Sublime Text 3 使用心得
介紹一下Sublime Text 3,參考文章《Sublime Text 2 使用心得》,地址:http://www.cnblogs.com/leecanz/archive/2012/03/04/2379446.html,作者leecan_zeng,有發現新特性會更新文章。
一、 前言
作為一個前端,有一款好的開發利器是必不可少的,editplus、notepad++都是不錯的工具,體積輕巧,啟動迅速(dw太浮腫了)。 幾年前,又有一款新的編輯器誕生,席卷前端界,惹得無數喜愛,不少前端er紛紛拋棄用了數年的“伙伴”,投入了她的懷抱——Sublime Text 2。本文要介紹的是她的最新版Sublime Text 3。ST3是一款跨平臺的編輯器,再也不用為換平臺而找不到合適的、熟悉的編輯器擔憂了。目前,還是beta版中,不過功能已經很強大了,更新也很快,目 前最新是3047。ST3不是免費的,但可以永久免費使用,只是偶爾在保存的時候,會彈出要你購買注冊的對話框,僅此而已。官網地址:http://www.sublimetext.com/3。
二、 功能
Sublime Text 3 是一款具有代碼高亮、語法提示、自動完成且反應快速的編輯器軟件,不僅具有華麗的界面,還支持插件擴展機制,用她來寫代碼,絕對是一種享受。
界面
先看下ST3的界面:
l 從上到下:標題欄↓菜單欄↓tab控制欄↓編輯區↓狀態欄;
l 從做到右:分別是邊欄(可關閉)→編輯區→MiniMap
菜單欄
各種命令,各種設置。
Tab欄
很多編輯器都有的,如果文件編輯過未保存,右上角有個小圓點提示保存,如果未保存關了也不用害怕,ST2很貼心,會幫我們自動保存。
編輯區
這是我們主要的工作區域,ST2支持代碼自動縮進,代碼折疊功能。
介紹幾個常見的功能:
l 自動完成:自動完成的快捷鍵是Tab和Enter,如果在html文件中,輸入cl按下tab或Enter,即可自動補全為class=””;加上zencoding后,更是如虎添翼,后面再講到。
l 多列編輯:按住ctrl點擊鼠標,會出現多個閃爍的光標,這時可同時修改多處
或者按住鼠標中鍵拖拽,
l 代碼注釋功能:ctrl+/、ctrl+shift+/分別未行注釋和塊注釋,再按一下就能去掉注釋,ST3能夠自動識別是html、css還是js文件,給出不同類型的注釋。
l 行操作:ctrl+alt+↑、ctrl+alt+↓向上或者向下交換兩行,ctrl+enter,光標后插入空行,ctrl+d選擇相似,可以參考后面的快捷鍵列表。
l 右鍵功能:
前3個,大家都知道,第4個,show unsaved changes,顯示未保存的修改,紅色減號表示刪去的內容,綠色加號表示新增的內容
Open Containing Folder…,打開包含此文件的文件夾,這個很方便找到相關的文件。
Copy File Path,復制文件路徑,方便我們復制路徑到瀏覽器中查看。
l 人性化設計:從ST2開始就有很多設計細節還是值得稱贊的,比如點擊一個標簽或者括弧,會在起始處顯示下劃點線,方便看清代碼結構,每一層嵌套代碼間都有豎線,起到視覺輔助的作用。選中某個詞還會給其他地方相同的詞加上方框。另外還有代碼折疊功能。
三、 設置
ST3的設置只有兩個選項,分別是系統設置和快捷鍵設置。
一般我們修改設置的話,最好復制出來在user里修改,以免以后升級default被覆蓋掉。
l Settings:在此文件里,可以修改很多東西,比如主題,字體,字號,是否顯示行號、自動縮進、自動完成。很多都默認選中了,我另外修改了幾處地方:
always_show_minimap_viewport——默認顯示縮略圖
draw_minimap_border——顯示縮略圖邊框
font_size——字號
l Key Bindings:快捷鍵設置,ST3的快捷鍵很多,改的時候注意不要覆蓋了。因為快捷鍵眾多,所以有下面這種組合快捷鍵,先按下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 上一個書簽
四、 擴展
ST3是支持插件擴展的,首先,我們需要安裝Package Control,我會另外發文章介紹。
插件推薦(由于ST3使用python3語言開發,而目前大部分插件還是python2.x,所以暫時有些插件會用不了或會有所改變,請等待更新):
l ZenCoding:前端必備,快速開發HTML/CSS,現已更名為Emmet。
輸入 div.wrapper>div.header+div.main+div.footer 按下Tab,立刻變成
或者按下ctrl+alt+enter,激發zencoding控制臺,可看到整個動態的過程。
l JsFormat,格式化js代碼,這個插件很有用,我們有時在網上看到某些效果,想查看是怎么實現的,但是代碼被壓縮過,很難閱讀,不用怕,用ST3打開,按下快捷鍵,即可讓代碼還原,莫非是武林中失傳已久的“還我靚靚拳”。
l Tag 格式化標簽,讓亂七八糟的代碼,瞬間整齊清晰。
l BracketHighlighter,括弧高亮顯示。
l Clipboard History,剪切板歷史,可以保存多個復制信息,按下ctrl+alt+v,可以選擇歷史剪切板。
l Goto-CSS-Declaration,跳轉到css文件該class的聲明處,方便修改查看,如圖下所示,注意對應的css文件要同時打開才行。
l SCSS,支持scss的語法高亮,里面附帶了好多CSS Snippet,無論現用或者改造成,都可節省不少時間。
還有很多插件,jquery語法提示,jsHint等等。
五、 結語
總而言之,Sublime Text 3是一款不錯的代碼編寫工具,有好看的ui,人性化的細節設計,全面的功能和擴展機制,如果你還沒用過,請試一下,不會讓你失望的。另外,希望ST3以后能完美支持中文。
來自:http://ce.sysu.edu.cn/hope/Item.aspx?id=106853