Sublime Text3—Code Snippets(自定義程式碼片段)

easyblue發表於2017-09-21

摘要

程式設計師總是會不斷的重複寫一些簡單的程式碼片段，為了提高編碼效率，我們可以把經常用到的程式碼儲存起來再呼叫。

平時用sublime安裝各種外掛，使用Tab鍵快速補全，便是snippets（可譯為程式碼片段）的一種。

Sublime編輯器還提供了自定義程式碼片段的功能（當然不止Sublime有此功能），其官方文件中定義如下：

Whether you are coding or writing the next vampire best-seller, you’re likely to need certain short fragments of text again and again. Use snippets to save yourself tedious typing. Snippets are smart templates that will insert text for you and adapt it to their context.


一、建立snippets

1. 新建和儲存

  • 選單欄中依次選擇Tools | Developer | New Snippet...就會新建一個副檔名為.sublime-snippet的XML語法的文件，注意字尾是識別snippets的關鍵。

  • 程式碼片段可以任意儲存在packages資料夾下，預設會儲存在Packages\User資料夾裡，為了方便管理和使用建議再新建個資料夾例如snippets，則路徑為Packages\User\snippets。

  • 預設結構如下：

<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>複製程式碼


2. content

  • <content></content>中必須包含<![CDATA[…]]>，在這裡面寫自定義的程式碼片段。

  • 程式碼片段如果含有]]>，需寫成]]$NOT_DEFINED>。

  • 如果含有$，需寫成\$。


3. tabTrigger

  • 在<tabTrigger></tabTrigger>中設定讓Sublime自動補全的觸發詞（trigger keyword）。


4. scope

  • 設定程式碼片段在何種語言環境下啟用，預設寫的是python。

  • 想指定多個scope，可以使用英文逗號,來分隔。

  • 如何知道文件的Scope是什麼？選單欄依次選擇Tools | Developer | Show Scope Name...，快捷鍵是Ctrl+Alt+Shift+P。


5. description

  • 如果加了<description>描述內容</description>，點開Tools | Snippets...會顯示你定義的描述內容。

  • 如果不寫則顯示檔名。


6. 設定游標位置Fields

<snippet>
    <content><![CDATA[
First Name: $1
Second Name: $2
Address: $3
]]></content>複製程式碼

  • 美元符加數字即可設定field markers即游標的位置，按Tab鍵游標按數字依次從小到大迴圈，如上從1到2到3再到1。

  • Shift+Tab可以進行向上跳轉。

  • Esc結束跳轉。

  • $0表示最後一個位置。


7. 映象域Mirrored Fields

  • 相同編號的位置即是映象域，可同時選中進行編輯。


8. 佔位符Placeholders

  • {數字編號}可以得到一個Tab佔位符。

  • {1:default}可以得到一個預設值。

  • 按Tab鍵依次迴圈選中程式碼片段中的預設值。

如預設的程式碼片段Hello, ${1:this} is a ${2:snippet}.會依次迴圈選中單詞this snippet。


二、使用snippets

  • 方法1：選單欄點選Tools | Snippets...,彈出為當前語法可用的Snippet，點選即插入。

  • 方法2：輸入觸發詞然後按Tab鍵。


三、安裝snippets

  • 方法1：進入Package Control:install Package搜尋選擇安裝已有的程式碼片段擴充套件包。

  • 方法2：選單選擇Preferences | Browse Packages...開啟，建議新建資料夾snippets方便管理，路徑為Sublime Text3\Packages\User\snippets，將寫好的程式碼片段拷貝進去。


參考


掘金：Sublime Text3—Code Snippets(自定義程式碼片段)
簡書：Sublime Text3—Code Snippets(自定義程式碼片段)
部落格園：Sublime Text3—Code Snippets(自定義程式碼片段)

相關文章