前端開發Sublime 3外掛

Sublime的大名已經無需我介紹了，首先先介紹如何啟用外掛安裝功能：

1. 開啟Sublime 3，然後按 ctrl+` 或者在View → Show Console
2. 在開啟的窗口裡黏貼這個網站上的程式碼（注意: Sublime 2和3所黏貼的程式碼不一樣，注意選擇）：在開啟的窗口裡黏貼這個網站上的程式碼（注意: Sublime 2和3所黏貼的程式碼不一樣，注意選擇）： https://packagecontrol.io/installation

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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)　　
 

3. 安裝完成後，按 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

安裝: Ctrl+Shift+P → Package Control: Install Package → SideBarEnhancements

Git Gutter 連結: https://github.com/jisaacks/GitGutter 簡介: 如果你使用Git做版本控制的話，這個外掛可以在行號前標記處哪些行是新加的，刪除的和修改過的。

安裝: Ctrl+Shift+P → Package Control: Install Package → GitGutter

安裝: Ctrl+Shift+P → Package Control: Install Package → BracketHighlighter

HTML-CSS-JS Prettify 連結: https://packagecontrol.io/packages/HTML-CSS-JS Prettify 簡介: 編輯HTML, CSS, JS時，經常會出現縮排不對，程式碼行不對其的情況。裝了這個外掛之後，只要按下Ctrl+Shift+h (Windows), Command+Shift+h (Mac), 你的文件就會被整理乾淨。 安裝: Ctrl+Shift+P → Package Control: Install Package → HTML-CSS-JS Prettify

簡介: 這貨太神奇了。在除錯頁面的樣式時，經常會開啟Chrome自帶的開發者工具，然後編輯CSS，等滿意了再把CSS程式碼黏貼回Sublime裡。這貨允許你在Chrome裡修改CSS，然後相對應的在Sublime裡的CSS檔案就自動更新了！（你更新Sublime裡的CSS並儲存，開啟的網頁也會自動更新）

用法: 先重啟你的Sublime，然後開啟一個CSS檔案。然後在Chrome裡開啟包含這個CSS的HTML頁面 → 開啟Chrome的開發者工具，工具欄的最後會多出一個 LiveStyle選項:

看下方File mapping裡被HTML頁面引用的CSS檔案會自動和Sublime裡開啟的同名CSS檔案關聯起來。如果名字都對的話你就可以在Elements裡開始編輯CSS了。編輯好後看下Sublime，該CSS檔案會被自動更新。

div.row>ul>li 然後按TAB會生成:

安裝:Ctrl+Shift+P → Package Control: Install Package → Emmet

JsFormat JavaScript格式化 按快捷鍵 Ctrl+Alt+F 即可格式化當前的 js 檔案。平時書寫程式碼用的非常多，或者下載格式化別人壓縮過的程式碼。

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 這四個檔案照著裡面的格式自定義想要新建的型別~

ConvertToUTF8

支援 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等編碼的外掛

CSScomb

CSS屬性排序

其它:

以下外掛要看你的個人需求，視情況而定:

Advanced New File 連結: https://packagecontrol.io/packages/AdvancedNewFile 簡介: 通過Sublime裡的輸入框來新建一個檔案。Windows上按Ctrl+alt+n啟用，Mac上按Command+alt+n啟用。感覺有了SidebarEnhancement後，這個就沒啥大用了。 安裝: Ctrl+Shift+P → Package Control: Install Package → AdvancedNewFile

Djaneiro 連結: https://github.com/squ1b3r/Djaneiro 簡介: 如果你使用Django框架開發，這個外掛會新增以下常用的Snippet，幫助你編輯模板的時候少打些字。如果你有Pycharm的專業版，那就不需要這個了。 安裝: Ctrl+Shift+P → Package Control: Install Package → Djaneiro 用法: 安裝好後會多出一種檔案型別 ‘Djaneiro → HTML (Django)’。輸入’if’然後按Tab的話會自動轉換為

{% if %}

{% endif %} 請開啟它的網站連結，上面有所有支援的命令列表。

Bootstrap 3 Snippets 連結: https://github.com/JasonMortonNZ/bs3-sublime-plugin 簡介: 在Sublime裡添加了很多常用的Bootstrap 3的快捷。但前提是需要記住這些快捷的名字。。。 安裝: Ctrl+Shift+P → Package Control: Install Package → Bootstrap 3 Snippets

快捷鍵

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+上下鍵：替換行

漢化：

第二步 開啟sublime text 3，開啟選單->preferences->Browse Packages，進入到檔案管理器

第三步 返回上一層到sublime text 3 資料夾，開啟“Installed Packages”資料夾，把漢化包Default.sublime-package放到“Installed Packages”資料夾 這裡不用重新sublime text3 已經漢化成功;