天天看點

[工具]Sublime Text 2 使用心得

作為一個前端,有一款好的開發利器是必不可少的,editplus、notepad++都是不錯的工具,體積輕巧,啟動迅速(dw太浮腫了)。最近,又有一款新的編輯器誕生,席卷前端界,惹得無數喜愛,不少前端er紛紛抛棄用了數年的“夥伴”,投入了她的懷抱——sublime text2。sublime text2是一款跨平台的編輯器,再也不用為換平台而找不到合适的、熟悉的編輯器擔憂了。目前,還是beta版中,不過功能已經很強大了,更新也很快,目前最新是bulid2181。st2不是免費的,但可以永久免費使用,隻是在儲存的時候,偶爾會彈出要你購買注冊的對話框,僅此而已。官網位址:http://www.sublimetext.com/2。

sublime text2 是一款具有代碼高亮、文法提示、自動完成且反應快速的編輯器軟體,不僅具有華麗的界面,還支援插件擴充機制,用她來寫代碼,絕對是一種享受。

先看下st2的界面:

[工具]Sublime Text 2 使用心得

l 從上到下:标題欄↓菜單欄↓tab控制欄↓編輯區↓狀态欄;

l 從做到右:分别是邊欄(可關閉)→編輯區→minimap

各種指令,各種設定。

很多編輯器都有的,如果檔案編輯過未儲存,右上角有個小圓點提示儲存,如果未儲存關了也不用害怕,st2很貼心,會幫我們自動儲存。

這是我們主要的工作區域,st2支援代碼自動縮進,代碼折疊功能。

介紹幾個常見的功能:

l 自動完成:自動完成的快捷鍵是tab,如果在html檔案中,輸入cl按下tab,即可自動補全為class=””;加上zencoding後,更是如虎添翼,後面再講到

l 多列編輯:按住ctrl點選滑鼠,會出現多個閃爍的光标,這時可同時修改多處

[工具]Sublime Text 2 使用心得

或者按住滑鼠中鍵拖拽,

[工具]Sublime Text 2 使用心得

l 代碼注釋功能:ctrl+/、ctrl+shift+/分别未行注釋和塊注釋,再按一下就能去掉注釋,st2能夠自動識别是html、css還是js檔案,給出不同類型的注釋。

l 行操作:ctrl+alt+↑、ctrl+alt+↓向上或者向下交換兩行,ctrl+enter,光标後插入空行,ctrl+d選擇相似,可以參考後面的快捷鍵清單。

l 右鍵功能:

[工具]Sublime Text 2 使用心得

前3個,大家都知道,第4個,show unsaved changes,顯示未儲存的修改,紅色減号表示删去的内容,綠色加号表示新增的内容

[工具]Sublime Text 2 使用心得

open containing folder…,打開包含此檔案的檔案夾,這個很友善找到相關的檔案

copy file path,複制檔案路徑,友善我們複制路徑到浏覽器中檢視

auto-format tags on selection 格式化選中的文檔,友善我們更清晰的檢視代碼結構,雖然st2有自動縮進功能,但是當我們粘貼進一段沒有格式化過的代碼,就需要這個能了,這個功能要安裝了tag這個插件才會出現。

l 人性化設計:st2雖然還是beta版中,但是有很多設計細節還是值得稱贊的,比如點選一個标簽或者括弧,會在起始處顯示下劃點線,友善看清代碼結果,每一層嵌套代碼間都有豎線,起到視覺輔助的作用。

[工具]Sublime Text 2 使用心得
[工具]Sublime Text 2 使用心得
[工具]Sublime Text 2 使用心得
[工具]Sublime Text 2 使用心得

sublime text2 在bulid2181後,對【設定】進行了合并,現在隻有兩個選項,分别是系統設定和快捷鍵設定。

[工具]Sublime Text 2 使用心得

一般我們修改設定的話,最好複制出來在user裡修改,以免以後更新default被覆寫掉。

l settings:在此檔案裡,可以修改很多東西,比如主題,字型,字号,是否顯示行号、自動縮進、自動完成。很多都預設選中了,我另外修改了兩個地方:

[工具]Sublime Text 2 使用心得

98行——顯示縮略圖邊框

101行——光标目前行高亮顯示

有助于我們快速找到光标位置。

l key bindings:快捷鍵設定,st2的快捷鍵很多,改的時候注意不要覆寫了。因為快捷鍵衆多,是以有下面這種組合快捷鍵,先按下ctrl+k,松開k,再按下j就可以展開全部代碼了。

[工具]Sublime Text 2 使用心得

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

回車即可。

點選preferences→package control,顯示以下彈窗:

n disable package :禁用插件

n enable package :啟用插件

n install package :安裝插件

n list package :檢視已安裝插件清單

n remove package :移除插件

n upgrade package :更新插件

[工具]Sublime Text 2 使用心得

已安裝插件清單:

[工具]Sublime Text 2 使用心得

l zencoding:前端必備,快速開發html/css

[工具]Sublime Text 2 使用心得

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

[工具]Sublime Text 2 使用心得

或者按下ctrl+alt+enter,激發zencoding控制台,可看到整個動态的過程。

[工具]Sublime Text 2 使用心得

l jsformat,格式化js代碼,這個插件很有用,我們有時在網上看到某些效果,想檢視是怎麼實作的,但是代碼被壓縮過,很難閱讀,不用怕,用st2打開,按下ctrl+alt+5(這是我設定的快捷鍵),即可讓代碼還原,莫非是武林中失傳已久的“還我靓靓拳”。

[工具]Sublime Text 2 使用心得
[工具]Sublime Text 2 使用心得

l tag 格式化标簽,讓亂七八糟的代碼,瞬間整齊清晰。

l brackethighlighter,括弧高亮顯示

l clipboard history,剪切闆曆史,可以儲存多個複制資訊,按下ctrl+alt+v,可以選擇曆史剪切闆

[工具]Sublime Text 2 使用心得

l goto-css-declaration,跳轉到css檔案該class的聲明處,友善修改檢視,如圖下所示,注意對應的css檔案要同時打開才行。

[工具]Sublime Text 2 使用心得
[工具]Sublime Text 2 使用心得

l gotorecent,打開最近的檔案,系統有這個功能,但隻能看最近8個,有點不爽,按ctrl+e,選擇即可。

l scss,支援scss的文法高亮,裡面附帶了好多css snippet,無論現用或者改造成,都可節省不少時間。

[工具]Sublime Text 2 使用心得

還有很多插件,jquery文法提示,jshint等等。

總而言之,sublime text2是一款不錯的代碼編寫工具,有好看的ui,人性化的細節設計,全面的功能和擴充機制,如果你還沒用過,請試一下,不會讓你失望的。如果說有什麼缺點的話,st2目前對ansi、gbk的漢字顯示不正常,(使用utf8編碼就沒問題,package control裡有一個gbk插件),希望st2以後能完美支援中文。

繼續閱讀