sublime text 2 前端編碼神器-快速鍵與提示介紹

標籤：

前言

代碼編輯器或者文字編輯器，對於程式員來說，就像劍與戰士一樣，誰都想擁有一把可以隨心駕馭且鋒利無比的寶劍，而每一位程式員，同樣會去追求最適合自己的強大、靈活的編輯器，相信你和我一樣，都不會例外。

如果說“神器”是我能給予一款軟體最高的評價，那麼我很樂意為它封上這麼一個稱號。sublime text 2（以下簡稱ST2）小巧綠色且速度非常快，跨平台支援Win/Mac/Linux，支援32與64位，支援各種流行程式設計語言的文法高亮、代碼補全等，但ST2有著很多其他編輯器沒有的超酷的特性，讓它的好用達到了前所未有的程度……

ST2不是免費的，但可以永久免費使用，只是在儲存的時候，偶爾會彈出要你購買註冊的對話方塊，僅此而已。軟體官網：http://www.sublimetext.com/2。去下載試試吧~

最近一直在使用ST2，因為DW太臃腫，而ST2編寫代碼速度很快很輕便~

優點

SublimeText2 支援但不限於 C, C++, C#, CSS, D, Erlang, HTML, Groovy, Haskell, HTML, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, Matlab, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL, Textile and XML 等主流程式設計語言的文法高亮。ST2 擁有優秀的代碼自動完成功能 (自動補齊括弧，大括弧等配對符號；自動補全已經出現的單詞；自動補全函數名)，非常智能；另外 ST2 也擁有程式碼片段（Snippet）的功能，可以將常用的程式碼片段儲存起來，在需要時隨時調用。

強大的多行選擇和多行編輯

代碼地圖、多種介面布局與全屏免打擾模式

 

快速鍵

強大的快速鍵，提高你的編碼效率。

常用快速鍵

• CTRL+N：建立檔案
• CTRL+w：關閉檔案
• CTRL+O：開啟檔案
• CTRL+Z：撤銷
• CTRL+Y：撤銷還原
• CTRL+F：尋找
• CTRL+H：替換
• Esc：小工具視窗隱藏

 

編碼快速鍵

• Ctrl+Shift+P 開啟命令選擇區，如設定編碼語言
• Tab：縮排、自動完成
• Shift+Tab 去除縮排
• Ctrl+J 合并行（已選擇需要合并的多行時）
• Ctrl+T 詞互換
• Ctrl+U 軟撤銷
• Ctrl+K Backspace 從游標處刪除至行首
• Ctrl+KK 從游標處刪除至行尾
• Ctrl+K+T 摺疊屬性
• Ctrl+K+U 改為大寫
• Ctrl+K+L 改為小寫
• Ctrl+K+0 展開所有
• Ctrl+Enter 插入行後（快速換行）
• Ctrl+Shift+/ 注釋已選擇內容
• Ctrl+Shift+↑可以移動此行代碼，與上行互換
• Ctrl+Shift+↓可以移動此行代碼，與下行互換
• Ctrl+Shift+[ 摺疊代碼
• Ctrl+Shift+] 展開代碼
• Ctrl+/ 注釋整行（如已選擇內容，同“Ctrl+Shift+/”效果）
• Ctrl+Shift+A 選擇游標位置父標籤對兒
• Ctrl+Shift+D 複製游標所在整行，插入在該行之前
• Ctrl+Shift+K 刪除整行
• Ctrl+Shift+L 滑鼠選中多行（按下快速鍵），即可同時編輯這些行
• Ctrl+Shift+M 選擇括弧內的內容（按住-繼續選擇父括弧）
• Ctrl+Shift+Enter 游標前插入行
• Ctrl+PageDown 、Ctrl+PageUp 檔案按開啟的前後順序切換
• Ctrl+滑鼠左鍵 可以同時選擇要編輯的多處文本
• Shift+滑鼠右鍵（或使用滑鼠中鍵）可以用滑鼠進行豎向多行選擇

 

尋找快速鍵

• CTRL+P：尋找當前項目中的檔案和快速搜尋，快速尋找標籤位置
• Ctrl+P輸入 @ 尋找檔案主標題/函數；或輸入：跳轉到檔案某行
• CTRL+G：跳轉到指定行
• CTRL+F：尋找
• Ctrl+D 選詞 （反覆按快速鍵，即可繼續向下同時選中下一個相同的文本進行同時編輯）
• Ctrl+L 選擇整行（按住-繼續選擇下行）
• Ctrl+M 游標移動至括弧內開始或結束的位置
• Ctrl+R 快速列出/跳轉到某個函數
• ctrl+shift+F 在檔案夾內尋找，與普通編輯器不同的地方是sublime允許添加多個檔案夾進行尋找

其他快速鍵

• Ctrl+K+B 開啟/關閉側邊欄
• Ctrl+Tab 當前視窗中的標籤頁切換
• Ctrl+F2 設定書籤
• Shift+F2 上一個書籤
• Alt+Shift+1（非小鍵盤）視窗分屏，恢複預設1屏
• Alt+Shift+2 左右分屏-2列
• Alt+Shift+3 左右分屏-3列
• Alt+Shift+4 左右分屏-4列
• Alt+Shift+5 等分4屏
• Alt+Shift+8 垂直分屏-2屏
• Alt+Shift+9 垂直分屏-3屏
• Alt+. 閉合當前標籤
• Alt+F3 選中文本按下快速鍵，即可一次性選擇全部的相同文本進行同時編輯
• Tab 縮排 自動完成
• F2 下一個書籤
• F6 檢測語法錯誤
• F9 行排序(按a-z)
• F11 全螢幕模式

 

安裝外掛程式準備步驟

• 1.先裝一個管理外掛程式的外掛程式，必備：package control

 

  

12345

1.按Ctrl+`調出console2.在底部程式碼貼上以下代碼並斷行符號：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()) 3.重啟sublime text，如果在Perferences->package settings中看到package control這一項，則安裝成功。

 

• 2.點擊Preferences→Package Control，顯示以下彈窗：

 

  

123456

Disable Package ：禁用外掛程式enable Package ：啟用外掛程式Install Package ：安裝外掛程式List Package ：查看已安裝外掛程式列表Remove Package ：移除外掛程式Upgrade Package ：升級外掛程式

 

• 3.安裝外掛程式

Preferences→Package Control→Install Package，輸入外掛程式名稱，會看到編輯器的底部在loading下載安裝中，安裝完後，一般重啟即可。

 

外掛程式及功能推薦編碼快速鍵，前端必備-Emmet

Emmet作為zen coding的升級版，對於前端來說，可是必備外掛程式，如果你對它還不太熟悉，可以在其官網（http://docs.emmet.io/）上看下具體的視頻教程。或者是也可以再這裡看http://docs.emmet.io/cheat-sheet/

舉例：ul#nav>li.item$*4>a{Item $}  然後Tab鍵

顯示結果是

  

123456

<ul id="nav">    <li class="item1"><a href="">Item 1</a></li>    <li class="item2"><a href="">Item 2</a></li>    <li class="item3"><a href="">Item 3</a></li>    <li class="item4"><a href="">Item 4</a></li></ul>

有夠快嗎？還有更多例子，請看http://docs.emmet.io/abbreviations/syntax/

 

快捷輸出dtd標頭檔，即HTML頭部資訊

在沒裝emmet外掛程式的情況下，如果輸入html，顯示的僅是簡單的html結構，不包含dtd標頭檔，這讓人很鬱悶。不過以下的解決方案挺不錯，支援多種標頭檔，html5的寫法也支援哦~

在裝了emmet外掛程式之後，可以使用html:4t、html:4s、html:xt、html:xs、html:xxs、html:5等6中dtd設定中的一種，然後TAB鍵，即可快速產生標頭檔。關於標頭檔，以前經常使用的是html:xt這個格式的，也就是dreamweaver自動產生的標頭檔。不過現在標準的是html:5的標頭檔，基本的瀏覽器都支援了，沒什麼問題。

 

 

讓Sublime Text2支援快速鍵在瀏覽器中預覽

用過dreamweaver的同學都知道，F12能快捷在瀏覽器中瀏覽正在編輯的檔案。而這個功能在sublime需要，點擊右鍵，然後open in browser。這顯然還不夠便捷。下面來看怎麼解決吧~

Sublime Text2支援用Python編寫外掛程式，詳細步驟是：

一、點擊菜單Tools -> New Plugin…，在建立好的py檔案輸入下列內容：

  

123456789101112131415161718

import sublime, sublime_pluginimport webbrowser url_map = {    ‘/Users/jerry/Sites/test/‘ : ‘http://test/‘,} class OpenBrowserCommand(sublime_plugin.TextCommand):    def run(self,edit):        window = sublime.active_window()        window.run_command(‘save‘)        url = self.view.file_name()        for path, domain in url_map.items():            if url.startswith(path):                url = url.replace(path, domain).replace(‘\\‘, ‘\/‘)                break         webbrowser.open_new(url)

將檔案儲存到Packages/User目錄（Packages可通過菜單裡的Browser Packages…開啟），檔案名稱隨意，如open_browser.py。外掛程式部分完工了。

二、接下來，為剛才的外掛程式分配快速鍵。點菜單Tools -> Command Palette…，或者f12，開啟命令集，選擇“key Bindings – User”開啟個人快速鍵配置，輸入下列內容：

  

1	[{ "keys": ["f12"], "command": "open_browser" }]

 

這就是要做的全部工作，可以測試下了。開啟一個html檔案，f12試試，沒意外的話檔案會在預設瀏覽器開啟了。url_map裡配置的網站目錄到URL的映射應該也是可用的。

PS：如果要指定用什麼瀏覽器預覽，也可以將最後一行代碼改成這樣：

  

1	webbrowser.get(‘safari‘).open_new(url)

webbrowser具體支援get哪些瀏覽器，可以通過webbrowser._browsers查看。只是，ST2預設使用的是python2.6，在我的mac os下，python2.6找不到任何可用的瀏覽器。2.7的webbrowser.py裡多了一段patch，可以找到firefox和safari。好在，對我來說，能在預設瀏覽器預覽已經夠用了。

 

 

JS Format-Javascript的代碼格式化外掛程式

很多網站的JS代碼都進行了壓縮，一行式的甚至混淆壓縮，這讓我們看起來很吃力。而這個外掛程式能幫我們把原始代碼進行格式的整理，包括換行和縮排等等，是代碼一目瞭然，更快讀懂~

 

 

LESS-LESS高亮外掛程式

用LESS的同學都知道，sublime沒有支援less的文法高亮，所以這個外掛程式可以幫上我們

 

後記

不過由於編輯器過於快捷，也就是過於偷懶吧，所以不建議初學者使用~  – –      還有更多功能，等你來發現

新增外掛程式介紹文章：http://www.xuanfengge.com/practical-collection-of-sublime-plug-in.html

sublime text 2 前端編碼神器-快速鍵與提示介紹