Sublime Text – 教你如何自訂習慣用的片段，加速程式碼的編撰！

2015-08-26 / JSN / 0 Comments / 1,260 次瀏覽

這裡會教你如何製作自己專屬的程式碼片段 (snippet) ，透過簡單打幾個字，按下 tab 鍵讓 SublimeText 幫你自動完成。

 

檔案命名

副檔名 『.sublime-snippet』 ，我使用免安裝版，存在 『你的SublimeText/Data/Packages/我自訂的路徑』 底下。

 

檔案格式

<snippet>
    <content>你的片段內容</content>
    <tabTrigger>觸發的關鍵字</tabTrigger>
    <scope>想在哪些編碼中被觸發</scope>
    <description>好懂的註解</description>
</snippet>

 

範例

<snippet>
    <content><![CDATA[<?=${1:variable}?>$0]]></content> <!-- 會輸出 <?=?> 而且游標會在等於的後面 -->
    <tabTrigger>ppe</tabTrigger> <!-- 打 ppe 的時候會跳出自動完成的候選 -->
    <scope>source.php, text.html</scope> <!-- 會出現在 php 或 html -->
    <description>輸出PHP單行</description> <!-- 會出現在候選名單的提示中 -->
</snippet>

 

標籤 content 格式

<![CDATA[這段中文位置替換成你想要的片段]]>

 

游標順序的表示法

標籤 content 中的游標順序，『$0』 代表最後的游標位置。所以如果你的標籤 content 中有 $0 $1 $2 $3，那麼你每按一次 tab 鍵，游標的順序會是 『$1 -> $2 -> $3 -> $0』。

 

每個游標位置的文字提示格式

$0                 游標的地方不會有文字
${0:Hello_World}   游標的位置會有 hello_world 被反白

 

文字格式

例如 <![CDATA[Hello_World]]>
就會出現 Hello_World 。

例如 <![CDATA[\$Hello_World]]>
就會出現 $Hello_World，因為 『$』 符號，本來是內部用來設定游標位置的，所以要強制輸出 『$』 符號，務必添加斜線 『\』來跳脫字元，所以要寫成 『\$Hello_World』。

例如 <![CDATA[${1:\$Hello} – ${2:\$World};$0]]>
就會出現 『$Hello – $World;』 每按一次 tab ，游標依序是
1
2
3

例如 <![CDATA[\$${0:MyName}]]>
就會出現僅能更改英文的部分，『$』 會直接顯示而不被修改：
MyName

 

 

這些自動完成，我也有寫一些是給 jQuery – vmodel.js 使用，可參考：
jQuery – vmodel.js 討論列表範例教學(1) 基本方法

發表迴響