转: 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)ifnotos.path.exists(ipp)elseNone;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
3.重啟sublime text，如果在Perferences->packagesettings中看到packagecontrol這一項，則安裝成功。
|
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"><ahref="">Item1</a></li>
<li class="item2"><ahref="">Item2</a></li>
<li class="item3"><ahref="">Item3</a></li>
<li class="item4"><ahref="">Item4</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/',
}
classOpenBrowserCommand(sublime_plugin.TextCommand):
def run(self,edit):
window=sublime.active_window()
window.run_command('save')
url=self.view.file_name()
forpath,domain inurl_map.items():
ifurl.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 前端编码神器-快捷键与使用技巧介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 二十一、JavaScript之访问对象属
- 下一篇： 最长公共子序列LCS