自己長期使用editplus做代碼編輯，使用過DW，還是習慣前者的使用環(huán)境。好友推薦，試試新的編碼工具——Sublime Text 2。在代碼制作過程中，最主要的是1）快速復制的模式化工作 ?2）零碎代碼整理對齊 ?3）減少敲擊鍵盤的次數(shù)。通過自己試用，Sublime Text 2+Zen Coding的組合能滿足我這些需求，在配合其余插件。下文有詳細敘述，本文主要從設計師的角度選擇內容，可能有些淺顯。

建議使用官方版本，綠色版本容易出現(xiàn)一些莫名其妙的問題。

官網(wǎng)地址：http://www.sublimetext.com/

軟件特性：

• 自動完成：自動完成的快捷鍵是Tab，如果在html文件中，輸入cl按下tab，即可自動補全為class=””；加上zencoding后，更是如虎添翼，后面再講到
• 多列編輯：按住ctrl點擊鼠標，會出現(xiàn)多個閃爍的光標，這時可同時修改多處或者按住鼠標中鍵拖拽，

  

• 代碼注釋功能：ctrl+/、ctrl+shift+/分別未行注釋和塊注釋，再按一下就能去掉注釋，ST2能夠自動識別是html、css還是js文件，給出不同類型的注釋。
• 行操作：ctrl+alt+↑、ctrl+alt+↓向上或者向下交換兩行，ctrl+enter，光標后插入空行，ctrl+d選擇相似，可以參考后面的快捷鍵列表。
• 右鍵功能：

  前3個，大家都知道，第4個，show unsaved changes，顯示未保存的修改，紅色減號表示刪去的內容，綠色加號表示新增的內容

  Open Containing Folder…，打開包含此文件的文件夾，這個很方便找到相關的文件

  Copy File Path，復制文件路徑，方便我們復制路徑到瀏覽器中查看

  Auto-Format Tags on Selection?格式化選中的文檔，方便我們更清晰的查看代碼結構，雖然ST2有自動縮進功能，但是當我們粘貼進一段沒有格式化過的代碼，就需要這個能了，這個功能要安裝了Tag這個插件才會出現(xiàn)。

安裝Sublime Text 2插件的方法：

1.直接安裝

安裝Sublime text 2插件很方便，可以直接下載安裝包解壓縮到Packages目錄（菜單->preferences->packages）。

2.使用Package Control組件安裝

也可以安裝package control組件，然后直接在線安裝：

1. 按Ctrl+`調出console（注：安裝有QQ輸入法的這個快捷鍵會有沖突的，輸入法屬性設置-輸入法管理-取消熱鍵切換至QQ拼音）
2. 粘貼以下代碼到底部命令行并回車：
   import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
3. 重啟Sublime Text 2。
4. 如果在Perferences->package settings中看到package control這一項，則安裝成功。

如果這種方法不能安裝成功，可以到這里下載文件手動安裝。

用Package Control安裝插件的方法：

1. 按下Ctrl+Shift+P調出命令面板
2. 輸入install 調出 Install Package 選項并回車，然后在列表中選中要安裝的插件。

（在綠色x64版本中，調用不出插件列表。英文版就沒問題，不清楚什么原因）

 

GBK Encoding Support

對應gb2312來說，Sublime Text 2 本生不支持的，我們可以通過插件GBK to UTF8或GBK進行轉碼工作。

 

主要插件Zen Coding：

Zen Coding

不懂可以圍觀：《Zen Coding: 一種快速編寫HTML/CSS代碼的方法》

輸入 div.wrapper>div.header+div.main+div.footer 按下Tab，立刻變成

或者按下ctrl+alt+enter，激發(fā)zencoding控制臺，可看到整個動態(tài)的過程。

Zen Coding代碼寫法：

1）使用Ctrl ＋ Alt ＋ Enter 呼出ZenCoding

2） div#content>ul>li*3>a[href="javascript:void(0);"]{Links$} 這樣短短的一句話生成：

<did id="content">

<ul>

<li><a target="_blank" >Links1</a></li>

<li><a target="_blank" >Links2</a></li>

<li><a target="_blank" >Links3</a></li>

</ul>

</did>

PS:Zen Coding for Sublime Text 2插件的開發(fā)者已經(jīng)停止了在Github上共享了，現(xiàn)在只有通過Package Control來安裝。

 

Sublime Text 中使用Zen Coding的一些技巧

1、縮寫擴展

之前知道，通過Control ＋ Alt ＋ Enter可以在一個新行中輸入ZC的縮寫，來生成代碼。同時，如果我們在編輯中直接書寫了ZC縮寫，比如 div#content>p 當光標放置在p之后時，可以通過Tab鍵來擴展，ZC會從光標處開始向左側搜索到第一個空白處，之間的代碼作為ZC縮寫，這樣不必每次打開新行輸入，提高了效率，缺點就是不能夠實時預覽。

2、嵌套代碼

如上圖所示，可以實現(xiàn)在已經(jīng)寫好的代碼外面嵌套其他的代碼，實現(xiàn)方式是將光標放置到想要嵌套的標簽上，然后使用Control ＋ Alt ＋ Enter 呼出ZC的命令行，就可以了。

 

其實Zen Coding還提供了很多方便代碼編寫的操作，例如標簽匹配、返回上一個/下一個編輯點、更新img標簽、合并行等，但是因為在Sublime Text中沒有提供完整的支持，所以這些特性還無法使用。

 

其余插件：

jQuery Package for sublime Text

如果你離不開jQuery的話，這個必備～～

Sublime Prefixr

Prefixr，CSS3 私有前綴自動補全插件，顯然也很有用哇

JS Format

一個JS代碼格式化插件。

Placeholders

故名思意，占位用，包括一些占位文字和HTML代碼片段，實用。

Sublime Alignment

用于代碼格式的自動對齊。傳說最新版Sublime 已經(jīng)集成。

Tag
一些有代碼潔癖的程序猿很適合這個插件，HTML代碼格式化能使html代碼更加漂亮整潔。

JsMinifier

該插件基于Google Closure compiler，自動壓縮js文件。

Sublime CodeIntel

代碼自動提示

Bracket Highlighter

類似于代碼匹配，可以匹配括號，引號等符號內的范圍。

GBK to UTF8

將文件編碼從GBK轉黃成UTF8，快捷鍵Ctrl+Shift+C

主要快捷鍵

Ctrl+L 選擇整行（按住-繼續(xù)選擇下行）

Ctrl+KK 從光標處刪除至行尾

Ctrl+Shift+K 刪除整行

Ctrl+Shift+D 復制光標所在整行，插入在該行之前

Ctrl+J 合并行（已選擇需要合并的多行時）

Ctrl+KU 改為大寫

Ctrl+KL 改為小寫

Ctrl+D 選詞 （按住-繼續(xù)選擇下個相同的字符串）

Ctrl+M 光標移動至括號內開始或結束的位置

Ctrl+Shift+M 選擇括號內的內容（按住-繼續(xù)選擇父括號）

Ctrl+/ 注釋整行（如已選擇內容，同“Ctrl+Shift+/”效果）

Ctrl+Shift+/ 注釋已選擇內容

Ctrl+Z 撤銷

Ctrl+Y 恢復撤銷

Ctrl+M 光標跳至對應的括號

Alt+. 閉合當前標簽

Ctrl+Shift+A 選擇光標位置父標簽對兒

Ctrl+Shift+[ 折疊代碼

Ctrl+Shift+] 展開代碼

Ctrl+KT 折疊屬性

Ctrl+K0 展開所有

Ctrl+U 軟撤銷

Ctrl+T 詞互換

Tab 縮進 自動完成

Shift+Tab 去除縮進

Ctrl+Shift+↑ 與上行互換

Ctrl+Shift+↓ 與下行互換

Ctrl+K Backspace 從光標處刪除至行首

Ctrl+Enter 光標后插入行

Ctrl+Shift+Enter 光標前插入行

Ctrl+F2 設置書簽

F2 下一個書簽

Shift+F2 上一個書簽

【下載地址】

官網(wǎng)地址：http://www.sublimetext.com/