# 自定制代碼片段(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> ~~~ > 想指定多個scope，可以使用英文逗號“,”來分隔。 > Window版Sublime Text查看文件的scope類型，使用 `Ctrl+Shift+Alt+P` 快捷鍵，scope類型會顯示在編輯器左下角，多個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!