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

 

 

 

1 2 3 4 5

1.按Ctrl+`調出console 2.在底部代碼行貼上以下代碼並回車： 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，顯示以下彈窗：

 

 

 

1 2 3 4 5 6

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鍵

顯示結果是

 

 

1 2 3 4 5 6

<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文件輸入下列內容：

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import sublime, sublime_plugin import 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