Sublime Text 3 插件整理

　　Sublime Text做爲一個盡爲人知的代碼編輯器，其優勢不用贅述。界面整潔美觀、文本功能強大，且運行速度極快，很是適合編寫代碼，寫文章作筆記。Sublime Text還支持Mac、Windows和Linux各大平臺，方便用戶使用。種類繁多、功能強大的插件更給Sublime Text 3錦上添花。下載Package Control後就能夠迅速的開啓插件之路。

　　這裏是個人sublime text 3插件列表，總結一下方便本身在其餘環境中直接配置。

1. SideBarEnhancements
　　SideBarEnhancements是一款很實用的右鍵菜單加強插件，有以diff形式顯示未保存的修改、在文件管理器中顯示該文件、複製文件路徑、在側邊欄中定位該文件等功能，也有基礎的諸如新建文件/目錄，編輯，打開/運行，顯示，在選擇中/上級目錄/項目中查找，剪切，複製，粘貼，重命名，刪除，刷新等常見功能。

    配置快捷鍵
　　　　點擊工具欄的Preferences -> Package Settings -> Side Bar -> Key Bindings-User，在打開的配置文件中按以下格式配置便可。

 1 [
 2     // 使用快捷鍵F12直接在chrome中打開文件
 3     {
 4         "keys": ["f12"],
 5         "command": "side_bar_files_open_with",
 6         "args": {
 7             "paths": [],
 8             "application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
 9             "extensions": ".*"
10         }
11     }
12 ]

    打開其餘軟件
　　　　sublime text能夠直接預覽圖片等格式的文件，不過有了這個插件，就能夠直接在Side Bar中啓用Photoshop等工具了。
　　　　使用方法：
　　　　　　在Side Bar中的一個文件上右鍵，有個Open With選項，進入Edit Applications就能夠配置文件了。
　　　　　　以下爲我配置的Photoshop，主要修改的就是將application中的值改成電腦中軟件的路徑；
　　　　　　保存以後就能夠在Open With中選擇Photoshop，就可讓其打開圖片類型的文件了。

 1 //Photoshop
 2 {
 3   "caption": "Photoshop",
 4   "id": "side-bar-files-open-with-photoshop",
 5 
 6   "command": "side_bar_files_open_with",
 7   "args": {
 8     "paths": [],
 9     "application": "C:\\Program Files\\Adobe\\Adobe Photoshop CC 2014\\Photoshop.exe", // OSX
10     "extensions": "psd|png|jpg|jpeg", //any file with these extensions
11     "args": []
12   },
13   "open_automatically": false // will close the view/tab and launch the application
14 },

 

2. Bracket​Highlighter
　　Bracket​Highlighter是一個括號、引號、標籤高亮插件，支持[]、()、{}、""、''和<tag></tag>等，比Sublime Text自帶的高亮要明顯得多。
　　使用方法：安裝即生效
　　

 

3. Compare Side-By-Side
　　Compare Side-By-Side插件是一個簡單的並排比較工具。
　　使用方法：
　　在待比較的Tab上右鍵選擇Compare with...，而後選擇另外一個打開的比較對象便可，Sublime會自動彈出新的窗口顯示兩個文件。

 

4. DocBlockr
　　DocBlockr是一個用於生成註釋的插件，可使你很方便地對代碼創建文檔。
　　它會解析函數，變量，和參數，根據它們自動生成文檔範式，你的工做就是去填充對應的說明。

　　使用方式：
　　　　/*  回車建立一個代碼塊註釋
　　　　/**  回車在自動查找函數中的形參等等
　　

 

5. JS Format
　　一個JS代碼格式化插件。
　　使用方法：Ctrl+Alt+F

 

6. Trimmer
　　你知道當你編寫代碼時，因爲錯誤或別的某些緣由，會產生一些沒必要要的空格。須要注意的是多餘的空格有時也會形成錯誤。
　　這個插件會自動刪除這些沒必要要的空格。
　　使用方法：
　　　　默認狀況下的快捷鍵是Ctrl+Alt+S，用於清除每行末尾的空格。
　　　　或者輸入Ctrl+Shift+P調出命令面板，輸入Trimmer，便可顯示全部操做。
　　　　

 

7. Emmet
　　Emmet（前身是Zen Coding）是一個前端開發不可缺乏的插件，它讓編寫HTML和CSS代碼變得簡單，節省大量時間。
　　Emmet可以使開發者用縮寫形式書寫代碼，再用「擴展」功能自動將代碼擴展至完整樣式。
　　早在2009年，Zen Coding做爲具備革命性的HTML和CSS代碼編輯插件一經問世，直到如今幫助了無數的開發者，減小他們的時間，使得編寫代碼變得簡便有趣。如今，Emmet已經超越了Zen Coding到達了更高層次，普適性的功能將給更多的開發者帶來便利。
　　基本用法：輸入簡寫形式，而後按 Tab 鍵。
　　詳細用法見官方文檔。

 

8. All Autocomplete
　　Sublime Text 默認的 Autocomplete 功能只考慮當前的文件，而 All Autocomplete 插件會搜索全部打開的文件來尋找匹配的提示詞。

 

9. SublimeCodeIntel
　　SublimeCodeIntel做爲一個代碼提示和補全插件，支持JavaScript、Mason、XBL、XUL、RHTML、SCSS、Python、HTML、Ruby、Python三、XML、Sass、XSLT、Django、HTML五、Perl、CSS、Twig、Less、Smarty、Node.js、Tcl、TemplateToolkit和PHP等全部語言，是SublimeText自帶代碼提示功能基礎上一個更好的擴展，自帶代碼提示功能只可提示系統代碼，而SublimeCodeIntel則能夠提示用戶自定義代碼。SublimeCodeIntel支持跳轉到變量、函數定義的功能，另外還有自動補全的功能，十分方便。

 

10. SublimeLinter
　　SublimeLinter是少數幾個能在sublime text 3工做的代碼檢查插件，SublimeLinter支持JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多種開發語言，但前提是須要配置相應語言的環境，要檢查JavaScript代碼須要安裝node.js，檢查PHP代碼須要安裝PHP並配置環境等。SublimeLinter能夠及時提示編寫代碼中存在的不規範和錯誤的寫法，並培養咱們良好的編碼習慣和風格。

　　使用ESLint作代碼檢查：
　　安裝插件SublimeLinter-contrib-eslint，更多細節見ESLint的使用。

 

11. CSS Format
　　CSS Format是Sublime Text的CSS格式化插件，能夠將CSS / SASS / SCSS / LESS代碼轉換爲擴展，壓縮或壓縮格式。CSS格式只是格式化程序，不支持語法檢查和自動更正功能。

　　基本用法：
　　選擇代碼或將光標置於文檔中，而後按如下方式之一執行命令：
　　　　右鍵菜單：CSS Format。
　　　　編輯菜單：編輯 > CSS Format。
　　　　命令面板：打開命令面板：Ctrl+Shift+P或Cmd+Shift+P，而後選擇Format CSS：XXX。

　　個人配置項：

1 {
2   "indentation": "  ",
3   "expand_block_break": "\n",
4   "format_on_save": false,
5   "format_on_save_action": "expand",
6   "format_on_save_filter": "\\.(css|sass|scss|less)$"
7 }

 

12. TortoiseSVN
　　在sublime裏面安裝svn的插件，就能夠在sublime的操做界面裏面進行相關svn操做，這樣就不用再回到文件系統中，進行相關svn的操做。

　　快捷鍵：
　　　　Alt+C  提交文件
　　　　Alt+U  更新文件
　　　　Alt+R  恢復文件

 

13. Terminal
　　這個插件可讓你在Sublime中直接使用終端打開你的項目文件夾，並支持使用快捷鍵。

　　快捷鍵：
　　　　Ctrl+Shift+T  打開文件所在文件夾
　　　　Ctrl+Shift+Alt+T  打開文件所在項目的根目錄文件夾


　　配置終端路徑：
　　　　默認調用系統自帶的PowerShell，也可改成Cmder。


{
  "terminal": "C:\\Program Files\\cmder\\Cmder.exe",
  "parameters": ["/START", "%CWD%"]
}

 

13. CSSComb
　　CSScomb是CSS的編碼風格格式化程序，您能夠輕鬆地編寫本身的配置，使您的樣式表美觀和一致。
　　前提是須要安裝Node.js。

　　自定義配置：
　　　　能夠在CSScomb的官網，設置根據本身的需求構建配置，以下爲我所用的配置；
　　　　以後將其放入安裝目錄的.csscomb.json文件中，覆蓋默認設置便可；
　　　　或者在sublime text中打開Preferences -> Package Settings -> CSScomb，參考Settings-Default設置本身的Settings-User。

 1 {
 2   "always-semicolon": true,
 3   "color-case": "lower",
 4   "block-indent": "  ",
 5   "color-shorthand": true,
 6   "element-case": "lower",
 7   "leading-zero": false,
 8   "quotes": "double",
 9   "space-before-colon": "",
10   "space-after-colon": " ",
11   "space-before-combinator": " ",
12   "space-after-combinator": " ",
13   "space-between-declarations": "\n",
14   "space-before-opening-brace": " ",
15   "space-after-opening-brace": "\n",
16   "space-after-selector-delimiter": "\n",
17   "space-before-selector-delimiter": "",
18   "space-before-closing-brace": "\n",
19   "strip-spaces": true,
20   "tab-size": true,
21   "unitless-zero": true,
22   "vendor-prefix-align": true
23 }

　　使用方法：
　　　　1.快捷鍵：Ctrl+Shift+C
　　　　2.鼠標右鍵：Run CSScomb
　　　　3.Ctrl+Shift+P調出命令面板，輸入Run CSScomb

　　注意：
　　　　官方文檔將css屬相按照 字 定位 展現 大小 的樣式進行排序，但這樣的排列性能並非最好的。
　　　　更好的順序應該是：顯示屬性 自身屬性 文本屬性 其餘修飾屬性；
　　　　雖然能夠在配置文件中修改，不過，好麻煩。。

 

14. 主題Theme

　　默認主題用的久了，也審美疲勞了。就想着換一個，這次更換的是。

　　1. Predawn

　　直接從 package control 中下載，如下爲主題配置項。

 1 {
 2   "theme": "predawn-DEV.sublime-theme",
 3   // Panel Options
 4   "predawn_findreplace_small": false,
 5   "predawn_quick_panel_small": false,
 6 
 7   // Sidebar Options
 8   "predawn_sidebar_arrows": true,
 9   "predawn_sidebar_large": false,
10   "predawn_sidebar_medium": false,
11   "predawn_sidebar_narrow": false,
12   "predawn_sidebar_small": false,
13   "predawn_sidebar_xlarge": false,
14   "predawn_sidebar_xsmall": false,
15 
16   // Tabs Options
17   "predawn_tabs_active_underline": false,
18   "predawn_tabs_large": false,
19   "predawn_tabs_medium": true,
20   "predawn_tabs_small": false
21 }

　　固然代碼顏色仍是習慣了的好，採用的是Monokai Extended。

"color_scheme": "Packages/User/SublimeLinter/Monokai Extended Bright (SL).tmTheme",

　　效果以下：

　　

 　　2. Seti_UI

　　個人配置項以下，更多配置。

 1 {
 2   "theme": "Seti.sublime-theme",
 3   "Seti_ClosedFolder_anim": true,
 4   "Seti_accent_teal": true,
 5   "Seti_alt_tree_row": true,
 6   "Seti_bold_heading": true,
 7   "Seti_bold_slctdfile_labels": true,
 8   "Seti_bold_slctdtab_labels": true,
 9   "Seti_no_scroll_icons": true,
10   "Seti_panel_nrml": true,
11   "Seti_sb_tree_tiny": true,
12   "Seti_show_group_arrows": true,
13   "Seti_sidebar_font_size_12": true,
14   "Seti_tabs_big": true,
15   "Seti_teal_map": true,
16   "Seti_teal_scrollbar": true,
17   "Seti_teal_statusbar": true,
18   "Seti_teal_tab": true,
19   "Seti_teal_tabclose": true,
20   "Seti_top_heading_anim": true,
21   "Seti_use_system_title_bar": true,
22 }

　　效果以下：