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編寫插件，詳細步驟是：

1、點擊菜單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。插件部分完工了。

2、接下來，爲剛纔的插件分配快捷鍵。點菜單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

轉載自：http://www.xuanfengge.com/sublime-text-2-artifact.html