sublime學習筆記

學習課程地址：快樂的sublime編輯器_sublime編輯器使用

另可參考筆記地址：

http://c.haoduoshipin.com/happysublime/

http://blog.csdn.net/u014465934/article/details/72810763

PS：博主的一些文章地址：http://happypeter.github.io/

github：https://github.com/happypeter/sublime-config

1 sublime的幾個優勢

1.操做簡單上手快

2.支持多點編輯：ctrl + 光標

3.基於Package Control強大的包管理功能

4.閃電同樣的查找速度。打開一個大項目，鼠標右擊進行全局查找。即便純文本界面的 vim 都沒法達到這樣的速度。

5.深度可定製。全部的配置內容也都像 vim 同樣以純文本的形式保存在一個相似於 .vim 的目錄之中。透明和分享帶來的好處無限。

6.快速打開文件：ctrl + p

7.命令行面板：ctrl + shift + p

8.可啓用vim模式

9.已經造成事實標準，不少其餘的編輯器中均可以使用相似的快捷鍵。例如 github 的 atom ，atom 是開源和免費的。

10.sublime社區活躍

打開命令面板，可查找快鍵鍵，輸入keybin，打開第一項能找到全部的快捷鍵合集，以下所示

2 sublime安裝

安裝可到官網上安裝，也可到以下地址安裝（包含激活碼）：https://pan.baidu.com/s/1nv6Lzsd

3 一些經常使用的快捷鍵

Ctrl+ n：打開新頁面

Ctrl+ tab：頁面跳轉

Ctrl+ j：合併兩行

Ctrl+ l：選擇當前行

shift + 鼠標右鍵：塊選擇

Ctrl + `（1左邊）：快速喚起console面板

Ctrl + Shift + p：調出packagecontrol面板

Ctrl + Shift + 上/下 鍵：能夠總體移動一行代碼

Ctrl + Shift +V ：進行自適應縮進的黏貼

Tab鍵：自動補全代碼

Ctrl + K + B 隱藏/顯示左面Side Bar

C + enter 快速下啓一行 

Ctrl + enter 快速下啓一行

Ctrl + shift + enter 快速上起一行

Ctrl + [ 向前兩個字節 Ctrl + ]向後兩個字節

Ctrl + 左/右 一會兒是跳一個單詞

左側顯示目錄樹：View ->Side Bar ->Show Side Bar[直接加載你的目錄文件也能夠]

自定義快捷鍵，進入以下界面：

那麼應該如何知道命令的正確名稱？

打開工做臺，輸入sublime.log_commands(True)回車執行，再打開面板執行相應的操做，從返回的結果中可看到精確的命令名和相關的參數。

4 sublime自定製

打開命令行窗口，輸入settings，有兩項：Default 和 User。Default 中的內容是不準改的，可在user中輸入一些配置，該文件保存的位置爲Packages->User->Preferences.sublime-settings，可經過Preferences->Browse Packages->User查看。

存放到 User 文件夾下的內容會覆蓋 Settings Default 中的內容。

自定製的設置直接放到 User/Preferences.sublime-settings 這個文件中，那麼就是對全部打開的項目都生效了。可是，這些設置有時候對於不一樣的項目是會有區別的，sublime 是有相應的解決方法的，就是能夠經過設置 Projects 來實現。若是以爲英文看得不順也能夠參考 這裏。基本思路就是給每一個項目添加 xxx.sublime-project 文件，裏面的配置會把 User/ 中的設置給覆蓋了。不過這樣仍是稍微有些麻煩，除非特別必要，本身手動臨時改改 User/ 中的這個 settings 文件就好。

5 用Package Control來安裝擴展包

進入https://packagecontrol.io/installation，複製installation頁面裏面的Python代碼，在工做臺中運行。

打開命令面板，輸入install出現以下界面：

選中第一個，出現全部包的列表

6 主題

安裝主題，先安裝Material，再安裝Seti，主題安裝好後，以下圖所示，選擇本身安裝的主題後生效

還可在命令窗口中輸入remove packages，選中要刪除的包便可進行刪除操做。

7 emmet

安裝sublime以後，默認安裝的包裏面就自帶不少自動補齊的功能，可是默認的這些自動補齊功能在作Web前端開發的時候還不是很夠用。因此emmet顯得很是重要。例如在html中輸入！<tab>:

emmet用於代碼提示、自動補全等

例如 輸入p20，Tab鍵以後自動補全代碼爲：padding: 20px;

輸入m0-auto，Tab鍵以後自動補全代碼爲：margin: 0 auto;

掌握一些Emmet語法對於提升代碼輸入速度頗有幫助。可在http://docs.emmet.io/actions/上查看更多命令。

子代：>

div>ul>li 生成
    <div>
        <ul>
            <li></li>
        </ul>
    </div>

兄弟：+

div+div 生成
    <div></div>
    <div></div>

父代：^

div+div>p>span+em^bq 生成
    <div></div>
        <div>
            <p><span></span><em></em></p>
            <blockquote></blockquote>
        </div>

重複：*

ul>li*3 生成
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

成組：（）

（div>dl>(dt+dd)*3）+footer>p 生成
    <div>
            <dl>
                <dt></dt>
                <dd></dd>
                <dt></dt>
                <dd></dd>
                <dt></dt>
                <dd></dd>
            </dl>
    </div>
    <footer>
        <p></p>
    </footer>

ID:# CLASS：.

div#header + div.page  生成
    <div id="header"></div>
    <div class="page"></div>

屬性：[ ]

td[title="hello world" colspan=3] 生成
<td title="hello world" colspan="3"></td>

8 自定義代碼片斷

snippet意爲小片斷，sublime可以讓用戶建立本身的sublime。這個不是憑空想出來的，而是要定位本身平常工做中的重複性勞動。

點擊Tools->Developer->New Snippet...能夠建立一個新的snippet

<snippet> <content><![CDATA[ Hello, ${1:this} is a ${2:snippet}. ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet>

• <content><![CDATA[ ]]></content> 定義了補全的內容。第三行就是要插入的代碼片，${1}表明的是第一個光標位置，代碼片會默認選中this，當按下tab以後，會選中${2}中的snippet
• <tabTrigger> ： 定義了觸發補全的字符串。好比在以上例子上, 在編輯窗口輸入hello而後按下tab就會在編輯器輸出Type your snippet here這段代碼片斷
• <description> ：對snippet描述
• <scope>：snippet生效的語言環境，若是不取消註釋的話，則在全部後綴的文件下均可以生效。

以視頻爲例，新建snippet以下：

<snippet> <content><![CDATA[ --- layout:default title:${1:標題} --- ${2} ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <tabTrigger>top</tabTrigger> <!-- Optional: Set a scope to limit where the snippet will trigger --> <scope>text.html.markdown</scope> </snippet>

保存時以.sublime-snippet爲文件擴展名，默認保存位置爲User下

點擊Tools->Snippets...，可看到已保存的自定義snippet，選中便可顯示出代碼片斷，或者使用關鍵字觸發，輸入top<tab>

做用範圍<scope>

經過快捷鍵：Ctrl + Shift + Alt + p可查看當前文件的scope，例

出來的內容有多是空格隔開的多個字符串，取第一個字符串就好了。基本上各類代碼文件的 scope 都是 source 打頭，例如 source.js source.ruby source.python 。其餘的都是以 text 打頭，例如 text.html.basic text.html.markdown text.plain 等。 那麼如何給一個 snippet 定義多於一個文件類型的 scope 呢？能夠這樣

<scope>text.html.markdown, text.plain</scope>

9 批處理任務 build system

10 HTML文件預覽快捷鍵設置

首先須要安裝SideBarEnhancements插件

接下來配置預覽快捷鍵，打開Preferences->Key Bindings->User，鍵入以下內容

[ // chrome { "keys": ["f1"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:/Users/Administrator/AppData/Local/Google/Chrome/Application/chrome.exe", "extensions":".*" } }, // ie { "keys": ["f2"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:/Program Files (x86)/Internet Explorer/iexplore.exe", "extensions":".*" } } ]

其中「keys」是指定的快捷鍵，可自定義，application是瀏覽器在電腦上的目錄地址，保存便可經過快捷鍵進行預覽html