Sublime Text 3：自用插件及設置

Sublime Text 3：自用插件及設置

Sublime Text 3是一款強大而精巧的文本編輯器
它的界面友好、功能非凡、性能極佳
可令代碼高亮、語法提示、自動完成
更重要的是，它支持衆多插件擴展——錦上添花、強之又強
本文着重介紹Sublime Text 3可助力前端開發的優秀插件以及更改默認設置

---

Eemmet插件——HTML必不可少的插件

Emmet插件可以說是使用Sublime Text進行前端開發必不可少的插件

基本用法：輸入標籤簡寫形式，然後按Tab鍵

關於Emmet的更多介紹，請查看[官方文檔]

這份速查表，可以幫你快速記憶簡寫形式

Autoprefixer——CSS3前綴自動補全

這是一款CSS3私有前綴自動補全插件

該插件使用CanIUse資料庫，能精準判斷哪些屬性需要什麼前綴

與CssComb插件一樣，該插件也需要系統已安裝Node.js環境

使用方法：在輸入CSS3屬性後（冒號前）按Tab鍵

注意：它的使用依賴於nodejs，所以一定要安裝了nodejs纔可以正常的使用。

JsFormat——JS格式化

這是一款將JS格式化的插件

可在JS文件中通過鼠標右鍵->JsFormat 或鍵盤快捷鍵Ctrl+Alt+F對JS進行格式化

SublimeCodeIntel——代碼提示插件

這是一款代碼提示插件，支持多種編程語言

該插件安裝時間可能相對較長
更特別的是，安裝該插件後需要根據您使用的編程語言進行配置

SublimeTmpl——模板插件

SublimeTmpl能新建html、css、javascript、php、python、ruby六種類型的文件模板，所有的文件模板都在插件目錄的templates文件夾裏，可以自定義編輯文件模板。

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

Terminal——命令行窗口

在編程過程中，我們經常需要使用到命令行窗口,Terminal插件可以允許在Sublime Text 3中打開cmd命令窗口

安裝好該插件後
即可使用快捷鍵Ctrl+Shift+T呼出命令行窗口

SideBarEnhancements——右鍵菜單增強插件

SideBarEnhancements是一款很實用的右鍵菜單增強插件

ColorPicker——顏色拾取器

能在Sublime界面直接調出取色器，效果如下圖：

使用方法：在Sublime界面按下ctrl+shift+C

ColorHightlighter——編輯器中顏色編碼預覽

能在CSS編輯過程中看見顏色的預覽，效果如下圖：

AutoFileName——自動提示路徑

sublime中並沒有在編輯器中內嵌提示路徑的功能，所以對於一些記性不太好的人（比如我），就十分麻煩；這個插件很好地彌補了這一缺陷，不過裝了這個插件後，在HTML中的<style>編寫css樣式時，出現;時，該插件會自動以爲你要輸入路徑，所以切記用ctrl+enter進行換行。

JSHint——代碼檢查工具

JSHint是一款用來檢測你的js代碼是否規範的軟件，有了它你可以在刷新瀏覽器之前就知道你哪裏寫錯了，由於可以集成插件到編輯器裏，可以隨時隨地的調用快捷鍵來檢查你的js代碼規範，比如我的是atl+J

注意：它的使用依賴於nodejs，所以一定要安裝了nodejs纔可以正常的使用。

DocBlockr——快速註釋

沒啥好說的，必備插件

Sass——Sass語法高亮

用Sass的同學都知道，Sublime沒有支持sass的語法高亮，所以這個插件可以幫上我們

使用：點擊Sublime右下角編程語言，選擇Sass/Scss（還有類似的，如LESS，Stylus都可以下載相應的插件）

Vue——Vue語法高亮

Vue開發者必備

LiveReload

請看另一篇詳細介紹該插件的博客

LiveReload：釋放你的F5，實時預覽HTML效果

Sublime用戶自定義設置

工具欄 Preferences – Settings-User 加入下面的代碼：

{
    // bold_folder_labels 側邊欄文件夾顯示加粗，區別於文件。
    "bold_folder_labels": true,
    "color_scheme": "Packages/User/Color Highlighter/themes/Monokai.tmTheme",
    "debug": true,
    // draw_minimap_border 用於右側代碼預覽時給所在區域加上邊框，方便識別。
    "draw_minimap_border": true,
    // ensure_newline_at_eof_on_save 文件末尾自動保留一個空行，懂的人自然知道它的用處。
    "ensure_newline_at_eof_on_save": true,
    // fade_fold_buttons 默認顯示行號右側的代碼段閉合展開三角號。
    "fade_fold_buttons": false,
    // font_size 字體大小
    "font_size": 12,
    // highlight_line 高亮當前行
    "highlight_line": true,
    // highlight_modified_tabs，高亮未保存文件。
    "highlight_modified_tabs": true,
    "ignored_packages":
    [
        "Vintage"
    ],
    "original_color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
    "previewonclick": false,
    // save_on_focus_lost 窗口失焦自動保存
    "save_on_focus_lost": true,
    // scorll_past_end 滾動能否超過結尾
    "scroll_past_end": true,
    "show_full_path": true,
    // spell_check 英文單詞拼寫檢測
    "spell_check": false,
    "syntax_map":
    {
        "JavaScript (Babel)": "javascript"
    },
    // tab_size 製表位寬
    "tab_size": 2,
    // 主題
    "theme": "predawn-DEV.sublime-theme",
    // translate_tabs_to_spaces 把代碼 tab 對齊轉換爲空格對齊
    "translate_tabs_to_spaces": true,
    // trim_trailing_white_space_on_save 保存時自動刪除行尾空格
    "trim_trailing_white_space_on_save": true,
    // word_wrap 自動換行
    "word_wrap": true,
    // update_check 關閉版本升級檢查
  "update_check": false,
}

未完待續，後續發現功能強大的插件會接着更新。