Sublime Text Snippets（程式碼片段）功能

標籤：

我們在編寫代碼的時候，總會遇到一些需要反覆使用的程式碼片段。這時候就需要反覆的複製和黏貼，大大影響效率。我們利用Sublime Text的snippet功能，就能很好的解決這一問題。通俗的講，就是把我們常用的代碼分別儲存起啦，然後通過外掛程式的形式來反覆調用。

建立方法：Tools > New Snippet

這時你會看到如下範例程式碼：

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

此時的你應該有點莫名，我們接著來看下完整的結構和說明：

<snippet>    <content><![CDATA[ 你需要插入的程式碼片段${1:name} ]]></content>    <!-- 可選：快速鍵，利用Tab自動補全代碼的功能 -->    <tabTrigger>xyzzy</tabTrigger>    <!-- 可選：使用範圍，不填寫代表對所有檔案有效。附：source.css和test.html分別對應不同檔案。 -->    <scope>source.python</scope>    <!-- 可選：在snippet菜單中的顯示說明（支援中文）。如果不定義，菜單則顯示當前檔案的檔案名稱。 -->    <description>My Fancy Snippet</description></snippet>

${1:name}表示代碼插入後，游標所停留的位置，可同時插入多個。其中:name為自訂參數（可選）。
${2}表示代碼插入後，按Tab鍵，游標會根據順序跳轉到相應位置（以此類推）。

現在，你應該有了個大致的瞭解。那我們就開始自己動手編寫一個執行個體：

<snippet>     <content>     <![CDATA[     <footer>          <p>Copyright © 2008-2012 ${1:bluesdream}.com</p>          <p>增值電信業務經營許可證 滬B2-${2} <a href="#">滬ICP備號${3}</a></p>     </footer>     ]]>     </content>     <tabTrigger>cft</tabTrigger>     <description>custom-footer</description>     <scope>text.html</scope></snippet>

建立完畢以後，儲存在\Packages\User目錄下（例 X:\Sublime Text 2.0\Data\Packages\User），檔案命名為cft-code，尾碼名.sublime-snippet。

此時我們開啟一個html檔案，輸入cft，再按Tab鍵，剛才我們所編寫的程式碼片段，就插入了進來。並且此時的游標停留在我們所標記的${1}位置處，如果我們再按下Tab，那麼游標就跳轉到${2}的位置。由於我們在scope中定義了僅在html檔案中使用，所以此時如果我們開啟的是css或其他格式的檔案，那將無法插入程式碼片段。

補充：除了利用快速鍵Tab出代碼之外，我們還能通過菜單來載入，開啟Tools > Snippet，選擇Snippet: custom-footer。如果你沒有定義description，那此時便會看到以我們檔案名稱為命名的Snippet: cft-code選項。

 

Sublime Text Snippets（程式碼片段）功能