Sublime Text2 使用

Sublime Text 2 使用心得

1、 前言

做爲一個前端，有一款好的開發利器是必不可少的，editplus、notepad++都是不錯的工具，體積輕巧，啓動迅速（dw太浮腫了）。最近，又有一款新的編輯器誕生，席捲前端界，惹得無數喜好，很多前端er紛紛拋棄用了數年的「夥伴」，投入了她的懷抱——Sublime Text2。Sublime Text2是一款跨平臺的編輯器，不再用爲換平臺而找不到合適的、熟悉的編輯器擔心了。目前，仍是beta版中，不過功能已經很強大了，更新也很快，目前最新是bulid2181。ST2不是免費的，但能夠永久無償使用，只是在保存的時候，偶爾會彈出要你購買註冊的對話框，僅此而已。官網地址：http://www.sublimetext.com/2。

2、 功能

Sublime Text2 是一款具備代碼高亮、語法提示、自動完成且反應快速的編輯器軟件，不只具備華麗的界面，還支持插件擴展機制，用她來寫代碼，絕對是一種享受。

界面

先看下ST2的界面：

l 從上到下：標題欄↓菜單欄↓tab控制欄↓編輯區↓狀態欄；

l 從作到右：分別是邊欄（可關閉）→編輯區→MiniMap

菜單欄

各類命令，各類設置。

Tab欄

不少編輯器都有的，若是文件編輯過未保存，右上角有個小圓點提示保存，若是未保存關了也不用懼怕，ST2很貼心，會幫咱們自動保存。

編輯區

這是咱們主要的工做區域，ST2支持代碼自動縮進，代碼摺疊功能。

介紹幾個常見的功能：

l 自動完成：自動完成的快捷鍵是Tab，若是在html文件中，輸入cl按下tab，便可自動補全爲class=」」；加上zencoding後，更是如虎添翼，後面再講到

l 多列編輯：按住ctrl點擊鼠標，會出現多個閃爍的光標，這時可同時修改多處

或者按住鼠標中鍵拖拽，

l 代碼註釋功能：ctrl+/、ctrl+shift+/分別未行註釋和塊註釋，再按一下就能去掉註釋，ST2可以自動識別是html、css仍是js文件，給出不一樣類型的註釋。

l 行操做：ctrl+alt+↑、ctrl+alt+↓向上或者向下交換兩行，ctrl+enter，光標後插入空行，ctrl+d選擇類似，能夠參考後面的快捷鍵列表。

l 右鍵功能：

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

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

Copy File Path，複製文件路徑，方便咱們複製路徑到瀏覽器中查看

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

l 人性化設計：ST2雖然仍是beta版中，可是有不少設計細節仍是值得稱讚的，好比點擊一個標籤或者括弧，會在起始處顯示下劃點線，方便看清代碼結果，每一層嵌套代碼間都有豎線，起到視覺輔助的做用。

 

3、 設置

Sublime text2 在bulid2181後，對【設置】進行了合併，如今只有兩個選項，分別是系統設置和快捷鍵設置。

通常咱們修改設置的話，最好複製出來在user裏修改，以避免之後升級default被覆蓋掉。

l Settings：在此文件裏，能夠修改不少東西，好比主題，字體，字號，是否顯示行號、自動縮進、自動完成。不少都默認選中了，我另外修改了兩個地方：

98行——顯示縮略圖邊框

101行——光標當前行高亮顯示

有助於咱們快速找到光標位置。

l Key Bindings：快捷鍵設置，ST2的快捷鍵不少，改的時候注意不要覆蓋了。由於快捷鍵衆多，因此有下面這種組合快捷鍵，先按下ctrl+k，鬆開k，再按下j就能夠展開所有代碼了。

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 上一個書籤

4、 擴展

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 ：升級插件

插件推薦：

已安裝插件列表：

l ZenCoding：前端必備，快速開發HTML/CSS

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

或者按下ctrl+alt+enter，激發zencoding控制檯，可看到整個動態的過程。

l JsFormat，格式化js代碼，這個插件頗有用，咱們有時在網上看到某些效果，想查看是怎麼實現的，可是代碼被壓縮過，很難閱讀，不用怕，用ST2打開，按下ctrl+alt+5（這是我設置的快捷鍵），便可讓代碼還原，莫非是武林中失傳已久的「還我靚靚拳」。

l Tag 格式化標籤，讓亂七八糟的代碼，瞬間整齊清晰。

l BracketHighlighter，括弧高亮顯示

l Clipboard History，剪切板歷史，能夠保存多個複製信息，按下ctrl+alt+v，能夠選擇歷史剪切板

l Goto-CSS-Declaration，跳轉到css文件該class的聲明處，方便修改查看，如圖下所示，注意對應的css文件要同時打開才行。

l GotoRecent，打開最近的文件，系統有這個功能，但只能看最近8個，有點不爽，按ctrl+e，選擇便可。

l SCSS，支持scss的語法高亮，裏面附帶了好多CSS Snippet，不管現用或者改形成，均可節省很多時間。

還有不少插件，jquery語法提示，jsHint等等。

5、 結語

總而言之，Sublime Text2是一款不錯的代碼編寫工具，有好看的ui，人性化的細節設計，全面的功能和擴展機制，若是你還沒用過，請試一下，不會讓你失望的。若是說有什麼缺點的話，ST2目前對ANSI、GBK的漢字顯示不正常，（使用utf8編碼就沒問題，package control裏有一個gbk插件），但願ST2之後能完美支持中文。