天天看點

Sublime Text2 使用

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

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

Sublime Text2 使用

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

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

菜單欄

各種指令,各種設定。

Tab欄

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

編輯區

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

介紹幾個常見的功能:

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

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

Sublime Text2 使用

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

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

右鍵功能:

Sublime Text2 使用

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

Sublime Text2 使用

Open Containing Folder…,打開包含此檔案的檔案夾,這個很友善找到相關的檔案

Copy File Path,複制檔案路徑,友善我們複制路徑到浏覽器中檢視

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

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

Sublime Text2 使用
Sublime Text2 使用
Sublime Text2 使用
Sublime Text2 使用

--------設定---------

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

Sublime Text2 使用

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

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

Sublime Text2 使用

98行——顯示縮略圖邊框

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

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

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

Sublime Text2 使用

主要快捷鍵清單

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 :更新插件

Sublime Text2 使用

插件推薦:

已安裝插件清單:

Sublime Text2 使用

ZenCoding:前端必備,快速開發HTML/CSS

Sublime Text2 使用

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

Sublime Text2 使用

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

Sublime Text2 使用

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

Sublime Text2 使用
Sublime Text2 使用

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

BracketHighlighter,括弧高亮顯示

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

Sublime Text2 使用

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

Sublime Text2 使用
Sublime Text2 使用

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

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

Sublime Text2 使用

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

轉載:http://www.cnblogs.com/leecanz/archive/2012/03/04/2379446.html

下載下傳:http://www.iplaysoft.com/sublimetext.html

繼續閱讀