前言
幾個月前，寫了一篇博文 《Sublime Text 2 使用心得》 ，介紹了ST2的基本用法、擴展插件推薦、快捷鍵等，限于篇幅，一些功能，如snippet（代碼片段）、zen coding深入介紹等內容沒有涉及，加之ST2更新很快，現在已經出到2.0.1（2012-8-1）了，也新增了不少功能，本文將補上這方面內容。
2.0.1新功能
2.0版本細節做了很多改進、優化，感受比較明顯的是以下幾個：
- 代碼可拖拽：選中代碼，鼠標拖拽到目標處釋放即可
- 增加在瀏覽器打開的功能：以前需要裝插件實現的功能，現在ST2內置了，在html文件中，右鍵→Open in Browser即可在你默認瀏覽器打開該文件（文件必須先保存）
- 雙擊Tab欄，可新建文件
- 保存文件時可以保存代碼的選中狀態（類似ps的選區）
- 雙擊代碼中空白處，只會選中空白（比以前方便多了，以前連標簽的'<'也會被選中）
Zen Coding（zen coding 貌似已停止更新，如果有發現zen coding 不能正常使用，請安裝他的替代者 emmet 用法類似。）
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頁面》
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
