一、 前言
作為一個前端，有一款好的開發利器是必不可少的，editplus、notepad++都是不錯的工具，體積輕巧，啟動迅速（dw太浮腫了）。最近，又有一款新的編輯器誕生，席卷前端界，惹得無數喜愛，不少前端er紛紛拋棄用了數年的“伙伴”，投入了她的懷抱——Sublime Text2。Sublime Text2是一款跨平台的編輯器，再也不用為換平台而找不到合適的、熟悉的編輯器擔憂了。目前，還是beta版中，不過功能已經很強大了，更新也很快，目前最新是bulid2181。ST2不是免費的，但可以永久免費使用，只是在保存的時候，偶爾會彈出要你購買注冊的對話框，僅此而已。官網地址：http://www.sublimetext.com/2。
二、 功能
Sublime Text2 是一款具有代碼高亮、語法提示、自動完成且反應快速的編輯器軟件，不僅具有華麗的界面，還支持插件擴展機制，用她來寫代碼，絕對是一種享受。
界面
先看下ST2的界面：
![clip_image002[5]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE1MzI0NzgxLmpwZw==.png "clip_image002[5]")
l 從上到下：標題欄↓菜單欄↓tab控制欄↓編輯區↓狀態欄；
l 從做到右：分別是邊欄（可關閉）→編輯區→MiniMap
菜單欄
各種命令，各種設置。
Tab欄
很多編輯器都有的，如果文件編輯過未保存，右上角有個小圓點提示保存，如果未保存關了也不用害怕，ST2很貼心，會幫我們自動保存。
編輯區
這是我們主要的工作區域，ST2支持代碼自動縮進，代碼折疊功能。
介紹幾個常見的功能：
l 自動完成：自動完成的快捷鍵是Tab，如果在html文件中，輸入cl按下tab，即可自動補全為class=””；加上zencoding后，更是如虎添翼，后面再講到
l 多列編輯：按住ctrl點擊鼠標，會出現多個閃爍的光標，這時可同時修改多處
![clip_image004[5]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE1MzU0MjAyLmpwZw==.png "clip_image004[5]")
或者按住鼠標中鍵拖拽，![clip_image006[5]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE1MzY2MDIxLmpwZw==.png "clip_image006[5]")
l 代碼注釋功能：ctrl+/、ctrl+shift+/分別未行注釋和塊注釋，再按一下就能去掉注釋，ST2能夠自動識別是html、css還是js文件，給出不同類型的注釋。
l 行操作：ctrl+alt+↑、ctrl+alt+↓向上或者向下交換兩行，ctrl+enter，光標后插入空行，ctrl+d選擇相似，可以參考后面的快捷鍵列表。
l 右鍵功能：
![clip_image008[5]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE1Mzc0MjIwLmpwZw==.png "clip_image008[5]")
前3個，大家都知道，第4個，show unsaved changes，顯示未保存的修改，紅色減號表示刪去的內容，綠色加號表示新增的內容
![clip_image010[5]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE1NDE0NzcuanBn.png "clip_image010[5]")
Open Containing Folder…，打開包含此文件的文件夾，這個很方便找到相關的文件
Copy File Path，復制文件路徑，方便我們復制路徑到瀏覽器中查看
Auto-Format Tags on Selection 格式化選中的文檔，方便我們更清晰的查看代碼結構，雖然ST2有自動縮進功能，但是當我們粘貼進一段沒有格式化過的代碼，就需要這個能了，這個功能要安裝了Tag這個插件才會出現。
l 人性化設計：ST2雖然還是beta版中，但是有很多設計細節還是值得稱贊的，比如點擊一個標簽或者括弧，會在起始處顯示下划點線，方便看清代碼結果，每一層嵌套代碼間都有豎線，起到視覺輔助的作用。
![clip_image012[5]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE1NDI3MjgwLmpwZw==.png "clip_image012[5]")
![clip_image014[5]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE1NDQ2Mjc2LmpwZw==.png "clip_image014[5]")
![clip_image016[5]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE1NDU1MDMxLmpwZw==.png "clip_image016[5]")
![clip_image018[5]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE1NTU1OTU5LmpwZw==.png "clip_image018[5]")
三、 設置
Sublime text2 在bulid2181后，對【設置】進行了合並，現在只有兩個選項，分別是系統設置和快捷鍵設置。
![clip_image020[4]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE1NTY4ODU5LmpwZw==.png "clip_image020[4]")
一般我們修改設置的話，最好復制出來在user里修改，以免以后升級default被覆蓋掉。
l Settings：在此文件里，可以修改很多東西，比如主題，字體，字號，是否顯示行號、自動縮進、自動完成。很多都默認選中了，我另外修改了兩個地方：
![clip_image022[4]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE1NTc0ODU2LmpwZw==.png "clip_image022[4]")
98行——顯示縮略圖邊框
101行——光標當前行高亮顯示
有助於我們快速找到光標位置。
l Key Bindings：快捷鍵設置，ST2的快捷鍵很多，改的時候注意不要覆蓋了。因為快捷鍵眾多，所以有下面這種組合快捷鍵，先按下ctrl+k，松開k，再按下j就可以展開全部代碼了。
![clip_image024[4]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE1NTg4MTM3LmpwZw==.png "clip_image024[4]"){kind=small}
l 主要快捷鍵列表
Ctrl+L 選擇整行（按住-繼續選擇下行）
Ctrl+KK 從光標處刪除至行尾
Ctrl+Shift+K 刪除整行
Ctrl+Shift+D 復制光標所在整行，插入在該行之前
Ctrl+J 合並行（已選擇需要合並的多行時）
Ctrl+KU 改為大寫
Ctrl+KL 改為小寫
Ctrl+D 選詞 （按住-繼續選擇下個相同的字符串）
Ctrl+M 光標移動至括號內開始或結束的位置
Ctrl+Shift+M 選擇括號內的內容（按住-繼續選擇父括號）
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 上一個書簽
四、 擴展
ST2是支持插件擴展的，首先，我們需要安裝Package Contro，ctrl+`調出命令行工具，輸入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())
回車即可。
點擊Preferences→Package Control，顯示以下彈窗：
n Disable Package ：禁用插件
n enable Package ：啟用插件
n Install Package ：安裝插件
n List Package ：查看已安裝插件列表
n Remove Package ：移除插件
n Upgrade Package ：升級插件
![clip_image026[4]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE2MDExOTUxLmpwZw==.png "clip_image026[4]")
插件推薦：
已安裝插件列表：
![clip_image028[4]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE2MDM1MDY3LmpwZw==.png "clip_image028[4]")
l ZenCoding：前端必備，快速開發HTML/CSS
![clip_image030[4]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE2MDQyNDkzLmpwZw==.png "clip_image030[4]")
輸入 div.wrapper>div.header+div.main+div.footer 按下Tab，立刻變成
![clip_image032[4]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE2MDU0ODY5LmpwZw==.png "clip_image032[4]")
或者按下ctrl+alt+enter，激發zencoding控制台，可看到整個動態的過程。
![clip_image034[4]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE2MDcyMTk2LmpwZw==.png "clip_image034[4]")
l JsFormat，格式化js代碼，這個插件很有用，我們有時在網上看到某些效果，想查看是怎么實現的，但是代碼被壓縮過，很難閱讀，不用怕，用ST2打開，按下ctrl+alt+5（這是我設置的快捷鍵），即可讓代碼還原，莫非是武林中失傳已久的“還我靚靚拳”。
![clip_image036[4]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE2MTg3NjYwLmpwZw==.png "clip_image036[4]")
![clip_image038[4]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE2MjY1MTk4LmpwZw==.png "clip_image038[4]")
l Tag 格式化標簽，讓亂七八糟的代碼，瞬間整齊清晰。
l BracketHighlighter，括弧高亮顯示
l Clipboard History，剪切板歷史，可以保存多個復制信息，按下ctrl+alt+v，可以選擇歷史剪切板
![clip_image040[4]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE2MjcxMTYzLmpwZw==.png "clip_image040[4]")
l Goto-CSS-Declaration，跳轉到css文件該class的聲明處，方便修改查看，如圖下所示，注意對應的css文件要同時打開才行。
![clip_image042[4]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE2Mjk0MDI5LmpwZw==.png "clip_image042[4]")
![clip_image044[4]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE2Mjk1OTE1LmpwZw==.png "clip_image044[4]"){kind=small}
l GotoRecent，打開最近的文件，系統有這個功能，但只能看最近8個，有點不爽，按ctrl+e，選擇即可。
l SCSS，支持scss的語法高亮，里面附帶了好多CSS Snippet，無論現用或者改造成，都可節省不少時間。
![clip_image046[4]](/image/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vY25ibG9nc19jb20vbGVlY2Fuei8yMDEyMDMvMjAxMjAzMDQxODE2MzI0MjU1LmpwZw==.png "clip_image046[4]")
還有很多插件，jquery語法提示，jsHint等等。
五、 結語
總而言之，Sublime Text2是一款不錯的代碼編寫工具，有好看的ui，人性化的細節設計，全面的功能和擴展機制，如果你還沒用過，請試一下，不會讓你失望的。如果說有什么缺點的話，ST2目前對ANSI、GBK的漢字顯示不正常，（使用utf8編碼就沒問題，package control里有一個gbk插件），希望ST2以后能完美支持中文。