Sublime Text自定制代碼片段(Code Snippets)
在編寫代碼的整個過程中，開發人員經常會一次又一次的改寫或者重用相同的代碼段，消除這種重復過程的方法之一是把我們經常用到的代碼保存成代碼片段(snippets)，這使得我們可以方便的檢索和使用它們。
為了提高你的編碼效率，Sublime Text提供了一種讓你可以輕松添加自定義代碼片段的功能。這篇文章中，我們將看到在Sublime Text中如何創建、管理以及使用代碼片段來極大的簡化我們的工作流程。
創建代碼片段
為了創建代碼片段，我們需要打開 Tools > New Snipptes。
Sublime Text會提供下面的模版供我們定制代碼片段：
- <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><![CDATA[
- -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
- -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
- box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
- ]]></content>
然後在<tabTrigger>中設置讓Sublime Text自動補全代碼片段的觸發詞（trigger keyword）
shadow。
- <tabTrigger>shadow</tabTrigger>
最後，我們定義代碼片段的使用範圍（scope）。由於這裏我們添加的是CSS3的Box Shadow屬性，我們可以想限制代碼片段只在樣式表中起作用。
- <scope>source.css</scope>
完整代碼如下：
- <snippet>
- <content><![CDATA[
- -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
- -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
- box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
- ]]></content>
- <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
- <tabTrigger>shadow</tabTrigger>
- <!-- Optional: Set a scope to limit where the snippet will trigger -->
- <scope>source.css</scope>
- </snippet>
到這裏我們已經完成了代碼片段的設置，現在只需保存它。按 Ctrl+S 保存文件，Sublime Text默認會把文件保存到 /Packages/User 目錄下，但是為了便於管理，我們創建一個新的文件夾來專門保存Snippets，因為可能還有一些Build文件、Plugin文件等也需要創建新的文件夾來保存。
.sublime-snippet 為擴展名，否則Sublime Text將不能識別它是一個代碼片段。
插入代碼片段
在編輯器中輸入觸發詞的時候，Sublime Text會顯示選項。我們可以通過在選項中選擇或者按 Tab 來觸發關鍵詞插入代碼片段。
之後點擊 Tab 鍵，自動插入代碼片段如下：
由於前面我們指定了scope範圍為CSS文件，所以這個代碼片段只能在文件類型中是不會被觸發的，像下面這樣：
Tab鍵及域標記(Field Markers)
此外，有時我們還需要編輯代碼片段中的一些特殊屬性。以上面的CSS3 box-shadow為例，我們可能需要改變陰影的顏色、模糊度及偏移量。
Sublime Text提供了在插入代碼片段後，高亮我們需要編輯的區域的功能。這些區域可以用 $ 符號後面跟隨 { } 來指定，並且可以指定順序，如下：
- -webkit-box-shadow: ${1:1px} ${2:1px} ${3:1px} ${4:0px} ${5:rgba(0, 0, 0, 0.5)};
- -moz-box-shadow: ${1:1px} ${2:1px} ${3:1px} ${4:0px} ${5:rgba(0, 0, 0, 0.5)};
- box-shadow: ${1:1px} ${2:1px} ${3:1px} ${4:0px} ${5:rgba(0, 0, 0, 0.5)};
上面的例子中，首先高亮顯示的區域是${1:1px}，之後按 TAB鍵的時候會按照指定的順序依次高亮。在下面的截圖中，請註意box-shadow屬性的第一個值（包括帶有前綴的）全部被高亮顯示了。
Sublime Text的多點編輯功能讓我們一次同時選擇或高亮多行，使得編輯更加快捷。之後按 Tab鍵，高亮和編輯第二個數字區域${2:1px}，之後繼續。
安裝代碼片段擴展包
你並不需要自己定義很多代碼片段，因為已經有很多語言類型的代碼片段擴展包供我們安裝使用。
假設你已經安裝了Package Control，你可以按 Ctrl+Shift+P ，然後進入Package Control來安裝代碼片段擴展包。
下面的例子中，我們發現SASS Snippets是可用的。
你並不需要記住代碼片段的整個觸發詞，因為在你輸入的時候，Sublime Text會自動為了顯示可用選項。
That’s All. 希望這個小技巧可以幫你提高編碼效率。Happy Coding!
Further Resource
有關安裝Package Control的方法，你可以參考下面的網頁：
- Sublime Text 安裝Package Control及插件
關於更多創建及自定義代碼片段的說明，你可以參考：
- Sublime Text Documentation for Snippets
Sublime Text自定制代碼片段(Code Snippets)