首頁 > 開發者 > Sublime Text
幾個月前，寫了一篇博文《Sublime Text 2 使用心得》，介紹了ST2的基本用法、擴充外掛程式推薦、快速鍵等，限於篇幅，一些功能，如snippet（程式碼片段）、zen coding深入介紹等內容沒有涉及，加之ST2更新很快，現在已經出到2.0.1（2012-8-1）了，也新增了不少功能，本文將補上這方面內容。
2.0.1新功能2.0版本細節做了很多改進、最佳化，感受比較明顯的是以下幾個：
Zen Coding在上篇文章有簡單帶過，是一件Web開發的神兵利器，有多個版本，對應不同的編輯器。
ST2上的Zen Coding，同樣功能強大，不僅能夠快速書寫html/css代碼，在代碼編輯、尋找功能方面也是獨豎一幟。
基本用法<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <link rel="stylesheet" href="css/.css" /> </head> <body> table.demo>(thead>tr>th)+(tbody>tr>td) </body></html>
按tab展開代碼
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <link rel="stylesheet" href="css/.css" /> </head> <body> <table class="demo"> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table> </body></html>代碼編輯
Zen Coding內建豐富的代碼操作快速鍵，這兩個快速鍵我用的最多，ctrl+[ 和 ctrl+]（已改成我習慣的快速鍵）。
兩個功能差不多，只不過一個是從裡到外，一個是從外到裡。
有時我們經常要對一個div進行操作，而這個div裡麵包含有很多個子div，如果要選中這個div，必須查這個div最後在哪閉合，不僅浪費時間，還可能看錯，用這個快速鍵，不僅快，而且准，還能逐層往外或往內擴充收縮。
例如：要選中這個table，把游標放到<table>裡，按下ctrl+]就行，自動選中代碼，現在無論是刪除還是移動都快捷方便多了。
另一個常用快速鍵，選中引號中內容。如果html中class名是用底線命名的，雙擊就可選中，如果是中劃線，雙擊只能選中單個單詞，用滑鼠按住選很不方便，可以試下ctrl+shift+.選中引號內容；ctrl+shift+u，刪除包裹游標的標籤；還有很多快捷操作，遞增、遞減資料，合并行，匹配標籤名等，有興趣的同學可以查看修改這個檔案/ZenCoding/Default (Windows).sublime-keymap。這麼多快速鍵，如果忘記怎麼辦，不用怕，最新的Zen Coding增加了一個協助面板，選擇Preferences-ZenCoding-ZenCoding has command pallete，彈出的面板列出所有的Zen Coding快速鍵。
定製自己的Zen Coding上面介紹了Zen Coding的快速鍵和修改方法，下面我們再來看怎麼改Zen Coding的html和css的快速鍵。Zen Coding提供的css快速鍵眾多，但有些卻不符合我們的使用習慣，例如float:left; 要輸入 fl:l，太麻煩了，我們一般使用fl更簡便；還有一些例如margin、padding，我們希望輸出的時候帶有單位（px），這首就要修改Zen Coding的zen_settings.py檔案了，該檔案位於Data\Packages\ZenCoding\zencoding中，是python檔案，開啟該檔案，修改儲存，重啟ST2後生效，趕緊來定製你自己的Zen Coding吧。
自訂建立檔案SublimeTmpl之前有不少同學跟我說，ST2各方面都很好，但就是有個地方很不爽，不能自訂建立檔案，預設總是plain text格式，每次都要手動切換一下。目前，官方還沒有提供這樣的功能o(╯□╰)o，但是國人開發了一個外掛程式，能夠彌補這個缺陷。在包安裝裡面搜尋：SublimeTmpl，安裝。預設已經添加了html、css、js等常見類型的面板，按ctrl+alt+h/ctrl+alt+c/ctrl+alt+j可建立這3鐘類型的檔案，快速鍵在這裡Default (Windows).sublime-keymap，模板檔案在這裡Data\Packages\SublimeTmpl\templates，可修改。
程式碼片段（snippet）Zen Coding快捷輸入很方便，但是當要輸入一大段代碼，有時就不方便了，比如上面那個table，要輸入 table.demo>(thead>tr>th)+(tbody>tr>td) 這麼多個單詞，如果預定義好table這個程式碼片段，輸入快速鍵產生就方便多了，這就是程式碼片段了，我們可以定義一些常見的程式碼片段，如tab、導航條、頁面基本結構等。下面是幾個例子：
content：放代碼必須放在CDATA裡，$1代表游標位置，方便編輯類名
tabTrigger：快速鍵
scope: 響應範圍 可以是 html css js檔案等
description：代碼描述 在輸入快速鍵的時候 提示框內的介紹標題文字
圖2是一個頁面的最基本結構，在一個html頁面中輸入dtd，按tab即可產生，並且游標停在title處，讓你輸入title，類似可以寫成各種各樣的snippets。snippets放在哪裡都可以，建議建個檔案夾專門存放snippets，方便維護管理。
包安裝上也提供了一些css、js的snippet下載。
總結Sublime Text 2 功能強大，外掛程式豐富，但要用熟它，需花時間去瞭解、去熟悉各種設定、各種快速鍵。下篇文章將介紹《使用 Sublime text 2 Bootstrap F5 快速開發Web頁面》
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
