SUBLIME3 前端個人常用外掛及快捷鍵
首先先介紹如何啟用外掛安裝功能：
- 開啟Sublime 3，然後按 ctrl+` 或者在View → Show Console
- 在開啟的窗口裡黏貼這個網站上的程式碼（注意: Sublime 2和3所黏貼的程式碼不一樣，注意選擇）：import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
- 安裝完成後，按 Ctrl+Shift+p (Windows) / Command+Shift+p (Mac), 輸入'Install Packages'，之後Sublime會自動下載外掛列表，然後彈出一個小的下拉選單讓你填寫想要下載的外掛名稱。
接下來是本文重點，前端開發的幾個必備外掛(越靠後的幾個越實用):
CSS3
連結: https://github.com/y0ssar1an/CSS3
簡介: 支援CSS3裡的語法高亮。(Sublime3裡自帶的CSS高亮不夠用)。安裝後, 開啟一個CSS檔案，然後按照下面GIF操作，將CSS3高亮作為CSS檔案的預設高亮:
安裝: Ctrl+Shift+P → Package Control: Install Package → CSS3
Sidebar Enhancement
連結: https://github.com/titoBouzout/SideBarEnhancements
簡介: 讓Sublime的側邊欄多出許多必備功能，如在瀏覽器中開啟，改名，複製檔案連結等等
安裝: Ctrl+Shift+P → Package Control: Install Package → SideBarEnhancements
Git Gutter
連結: https://github.com/jisaacks/GitGutter
簡介: 如果你使用Git做版本控制的話，這個外掛可以在行號前標記處哪些行是新加的，刪除的和修改過的。
安裝: Ctrl+Shift+P → Package Control: Install Package → GitGutter
Bracket Highlighter
連結: https://github.com/facelessuser/BracketHighlighter
簡介: 高亮各種括號的起始和結尾
安裝: Ctrl+Shift+P → Package Control: Install Package → BracketHighlighter
HTML-CSS-JS Prettify
連結: https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify
簡介: 編輯HTML, CSS, JS時，經常會出現縮排不對，程式碼行不對其的情況。裝了這個外掛之後，只要按下Ctrl+Shift+h (Windows), Command+Shift+h (Mac), 你的文件就會被整理乾淨。
安裝: Ctrl+Shift+P → Package Control: Install Package → HTML-CSS-JS Prettify
livestyle
連結: http://livestyle.emmet.io/
簡介: 這貨太神奇了。在除錯頁面的樣式時，經常會開啟Chrome自帶的開發者工具，然後編輯CSS，等滿意了再把CSS程式碼黏貼回Sublime裡。這貨允許你在Chrome裡修改CSS，然後相對應的在Sublime裡的CSS檔案就自動更新了！（你更新Sublime裡的CSS並儲存，開啟的網頁也會自動更新）
安裝: 需要安裝兩個外掛，一個是Sublime的外掛，一個是Chrome的外掛。
Sublime外掛: Ctrl+Shift+P → Package Control: Install Package → LiveStyle
Chrome外掛: https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg
用法: 先重啟你的Sublime，然後開啟一個CSS檔案。然後在Chrome裡開啟包含這個CSS的HTML頁面 → 開啟Chrome的開發者工具，工具欄的最後會多出一個 LiveStyle選項:
看下方File mapping裡被HTML頁面引用的CSS檔案會自動和Sublime裡開啟的同名CSS檔案關聯起來。如果名字都對的話你就可以在Elements裡開始編輯CSS了。編輯好後看下Sublime，該CSS檔案會被自動更新。
Emmet
連結: http://docs.emmet.io/abbreviations/syntax/
簡介: 通過一套簡單的語法讓你快速生成大量的HTML程式碼，比如輸入:
div.row>ul>li
然後按TAB會生成:
<div class="row"> <ul> <li></li> </ul> </div>
雖然要背一下語法，但是隻需要記憶最常用的幾個就好。效率提升槓槓的。
安裝:Ctrl+Shift+P → Package Control: Install Package → Emmet
JsFormat
JavaScript格式化
按快捷鍵 Ctrl+Alt+F 即可格式化當前的 js 檔案。平時書寫程式碼用的非常多，或者下載格式化別人壓縮過的程式碼。
外掛下載：https://github.com/jdc0589/JsFormat
SublimeTmpl
快速生成檔案模板
SublimeTmpl 能新建 html、css、javascript、php、python、ruby 六種型別的檔案模板，所有的檔案模板都在外掛目錄的templates資料夾裡，可以自定義編輯檔案模板。
SublimeTmpl預設的快捷鍵
ctrl+alt+h → html
ctrl+alt+j → javascript
ctrl+alt+c → css
ctrl+alt+p → php
ctrl+alt+r → ruby
ctrl+alt+shift+p → python
如果想要新建其他型別的檔案模板的話，先自定義檔案模板方在 templates 資料夾裡，再分別開啟 Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings 這四個檔案照著裡面的格式自定義想要新建的類
外掛下載：https://github.com/kairyou/SublimeTmpl
ConvertToUTF8
支援 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等編碼的外掛
CSScomb
CSS屬性排序
sublime常用快捷鍵
Ctrl+Shift+P：開啟命令面板
Ctrl+P：搜尋專案中的檔案
Ctrl+G：跳轉到第幾行
Ctrl+W：關閉當前開啟檔案
Ctrl+Shift+W：關閉所有開啟檔案
Ctrl+Shift+V：貼上並格式化
Ctrl+D：選擇單詞，重複可增加選擇下一個相同的單詞
Ctrl+L：選擇行，重複可依次增加選擇下一行
Ctrl+Shift+L：選擇多行
Ctrl+Shift+Enter：在當前行前插入新行
Ctrl+X：刪除當前行
Ctrl+M：跳轉到對應括號
Ctrl+U：軟撤銷，撤銷游標位置
Ctrl+J：選擇標籤內容
Ctrl+F：查詢內容
Ctrl+Shift+F：查詢並替換
Ctrl+H：替換
Ctrl+R：前往 method
Ctrl+N：新建視窗
Ctrl+K+B：開關側欄
Ctrl+Shift+M：選中當前括號內容，重複可選著括號本身
Ctrl+F2：設定/刪除標記
Ctrl+/：註釋當前行
Ctrl+Shift+/：當前位置插入註釋
Ctrl+Alt+/：塊註釋，並Focus到首行，寫註釋說明用的
Ctrl+Shift+A：選擇當前標籤前後，修改標籤用的
F11：全屏
Shift+F11：全屏免打擾模式，只編輯當前檔案
Alt+F3：選擇所有相同的詞
Alt+.：閉合標籤
Alt+Shift+數字：分屏顯示
Alt+數字：切換開啟第N個檔案
Shift+右鍵拖動：游標多不，用來更改或插入列內容
Ctrl+依次左鍵點選或選取，可需要編輯的多個位置
Ctrl+Shift+上下鍵：替換行