精通編輯器!Sublime Text 2 – Snippet 程式片段

一個編輯器是否好用取決于很多原因
除了可以自動完成,把你打到一半的字串按個 enter 自動選擇就打完
例如:
打 sw 就會出現 switch 的選擇,所以按個 enter 就自動出現 switch

螢幕快照 2013-12-08 上午11.25.41

有這樣的自動完成功能外
有 Snippet 的功能可以在你完成字串的同時把你需要的程式碼片段給導出來

除了在自動選擇的地方觸發
一般是按 Tab 觸發

打完 switch 按個 Tab
就出現

螢幕快照 2013-12-08 上午11.25.51

這樣的一大串程式
而且可以用 Tab 轉移到每個需要編輯的點上
會對寫程式的速度有很大的幫助
要在 Sublime 新增這樣的 Snippet 有兩種方法

1. 最快速的就是用別人的

如果沒有先安裝 Package Control 的話
可以參考下面這篇
https://chentsu.wordpress.com/2013/12/01/sublime-text-2-package-control/

如果有Package Control 的話直接
command + shift + p 打開 Command Palette
使用 Package Control : Install Package 指令

輸入 snippet 就會有一堆別人的 snippet 套件可以直接裝了
裝完就可以用了

2. 建自己的或修改別人的

用一段時候可能會發現別人的習慣跟自己的有點差異
所以只好開始修改甚至建新的 snippet

會建新的當然就會修改啦
所以先看看怎麼做

在上方工具列找到  Sublime Text 2 > Preference > Browse Packages..
螢幕快照 2013-12-08 上午11.18.25

就會打開下面這樣一個資料夾
螢幕快照 2013-12-08 上午11.17.44

裡面有很多 Package
你可以選擇你要用的語言的資料夾
例如 JavaScript
裡面就會有很多檔案
螢幕快照 2013-12-08 上午11.21.36

其中 以 .sublime-snippet 當作副檔名的就是我們現在的重點 Snippet 檔
先前我的 JavaScript 包裡面沒有 switch 所以就先用 switch來介紹

<snippet>
    <content><![CDATA[switch (${1:Things}) {
    case ${2:1}:
        break;
    case ${3:2}:
        break;
    default:
        $0
    break;
}]]></content>
    <tabTrigger>switch</tabTrigger>
    <scope>source.js</scope>
    <description>switch (…) {…}</description>
</snippet>

其實要建一個新的 Snippet 檔也是拿個既有的檔來改比較快

可以看到這是個 xml 格式
一個標簽 例如 <snippet>
就會有一個結束標簽 </snippet>

包在 <snippet></snippet> 裡面的有:

1.<content> : Snippet 的內容

要產生出來的內容會包在 <![CDATA[   ]]> 裡面
表示這裡面的符號就不再經過 XML 的解析

再來就是程式碼裡面會夾雜著
$0
$1
${1:data}
${2://somecode}
這樣的東西

$ + 數字 表示游標游動的位置

以前面的 switch Snippet 的 Code 來舉例:

首先會出現在 $1
螢幕快照 2013-12-08 下午3.52.36
再來是下一個比較大的數字 $2
螢幕快照 2013-12-08 下午3.53.03
一直下去直到沒有更大的數字
螢幕快照 2013-12-08 下午3.53.11 

最後回到 $0
螢幕快照 2013-12-08 下午3.53.26

${數字: 預設值}
數字跟冒號後面的字串可以當作預設值
也可以用來提示使用 Snippet 的人這個部位是填些什麼東西

2.<tabTrigger>: 觸發的文字,表示寫了這串文字在按下 Tab 就會有作用了

3.<scope> : sourse.js ,表示這個 Snippet 要在寫 JavaScript 的地方才會觸發

4.<description>: 就是下圖給開發這看的 switch (…) {…} 這樣的東西
螢幕快照 2013-12-08 上午11.25.41

在寫 Code 時漸漸修改出適合自己習慣的 Snippet 檔們
往後寫 Code 就能越來越快啦

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s