作者：mqliutie
原文地址：http://segmentfault.com/a/1190000002748032
常用插件 ：
- SideBarEnhancements
- HTML-CSS-JS Prettify
- BracketHighlighter
- SublimeCodeIntel
- Emmet
- CTags
- Markdown Editing 和 Markdown Preview
SideBarEnhancements
Sublime Text有一個缺點，當你想使用瀏覽器瀏覽你的html頁面的時候，你需要在你的文件上點擊鼠標右鍵，選擇Open In Browser才可以瀏覽器瀏覽，而這是用默認瀏覽器瀏覽，如果想用第二個瀏覽器都沒辦法。所以，可以通過SideBarEnhancements這個插件來更方便的瀏覽。
第一步：安裝
通過Package Control->Install Package搜索sidebarenhancements安裝。
第二步：配置 ( 一 )
右鍵某html，js，css等文件，找到Open With然后點擊Edit Applications將里面內(nèi)容設置為：
[
{"id": "side-bar-files-open-with",
"children":
[
{
"caption": "Firefox",
"id": "side-bar-files-open-with-chrome",
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "/Applications/Firefox.app",
//火狐瀏覽器的路徑 Windows中，后綴為.exe
"extensions":".*",
"args":[]
},
"open_automatically" : false
},
{
"caption": "Chrome",
"id": "side-bar-files-open-with-chrome",
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "/Applications/Chrome.app",
//Chrome瀏覽器的路徑 Windows中，后綴為.exe
"extensions":".*",
"args":[]
},
"open_automatically" : false
},
//如果想再添加瀏覽器，復制下面這個對象，改相應的路徑就可以了.
{
"caption": "Safari",
"id": "side-bar-files-open-with-chrome",
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "/Applications/Safari.app",
//Safari瀏覽器的路徑 Windows中，后綴為.exe
"extensions":".*",
"args":[]
},
"open_automatically" : false
}
]
}
]
第三步：配置 ( 二 )
打開Preferences里面的 Key Bindings - User把內(nèi)容修改為：
//keys 對應的值就是按鍵，比如按F2就會用Firefox打開這個頁面
[
{ "keys": ["f2"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "/Applications/Firefox.app",
//對應上面的Firefox路徑
"extensions":".*"
}
},
{ "keys": ["f1"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "/Applications/Safari.app",
//對應上面的Safari路徑
"extensions":".*"
}
},
//如果有新添加的瀏覽器，只需要把下面這個對象復制一份，路徑與新添加的對應就可以了.
{ "keys": ["f4"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "/Applications/Chrome.app",
//對應上面的Chrome路徑
"extensions":".*"
}
}
]
現(xiàn)在，F1就是 Safari，F2是Firefox，F4是 Chrome.
HTML-CSS-JS Prettify
第一步：安裝
通過Package Control->Install Package搜索HTML-CSS-JS Prettify安裝。
第二步：使用
- 選中格式化代碼，然后在按
Cmd+Shift+H(如果是Windows系統(tǒng)按Ctrl+Shift+H，這兩個快捷鍵是默認的)。 - 但是，這時候如果報錯
sh: node: command not found，說明node沒有安裝，那么就需要安裝node。 安裝好后，Linux和Mac不需要做什么更改，而Windows用戶則需要配置一下node_path.- 首先，在菜單欄里點擊
Preferences點擊第一個Browse Packages，然后進入HTML-CSS-JS Prettify文件夾，找到HTMLPrettify.sublime-settings文件，用Sublime Text打開進行更改windows對應的值，就是安裝的node的路徑。
- 首先，在菜單欄里點擊
第三步： 配置 ( 快捷鍵 )
如果對快捷鍵不滿意，可以自己設置 . 打開Preferences里面的Key Bindings - User，添加內(nèi)容：{ "keys": ["alt+q"], "command": "htmlprettify" }，當然快捷鍵你可以自己更改。
第四步： 配置 ( 代碼整理樣式 )
如果對代碼對其效果不滿意，可以選擇Preferences里的Package Settings找到HTML/CSS/JS Prettify里的Set Prettify Preferences. 里面是一些規(guī)則的設置。這個文件就是github(詳細設置可到github中看)中提到的.jsbeautifyrc文件。
BracketHighlighter
這個插件功能是匹配括號，在行號前面可以看到匹配括號的位置。
第一步：安裝
通過Package Control->Install Package搜索BracketHighlighter安裝。
第二步：配置
將preferences-->package settings-->Bracket highlighter-->Bracket settings-Default內(nèi)容復制到Bracket settings-User中，因為default里面的內(nèi)容是不可更改的，即使能更改，一旦插件更新，更改就會消失，所以盡量在User中設置。按Command+F(或者ctrl+F)搜索color，找到下所示：
"default": {
"icon": "dot", //行號前面的匹配圖標
"color": "brackethighlighter.default",
"style": "solid"http://樣式，可以使solid, outline, underline, hightlight和none.(solid和highlight是一樣的)
},
"unmatched": {
"icon": "question",
"style": "outline"
},
"curly": { //花括號
"icon": "curly_bracket"
// "color": "brackethighlighter.curly",
//"style" : "underline"
//這里面可以單獨設置自己的樣式，下面的一樣
},
"round": { //圓括號
"icon": "round_bracket"
},
"square": { 方括號
"icon": "square_bracket"
},
....//下面還有一些其他符號
color是設置顏色，英文介紹沒看懂怎么替換顏色。
SublimeCodeIntel
它的功能是代碼提示，支持這些語言：JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django,HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.
它還有一個功能，就是跳轉(zhuǎn)到函數(shù)定義的地方。
怪事 ：
這個插件真的是非常怪，第一次安裝的時候，如果不進行第二步的配置就沒有代碼提示，于是進行第二步配置，但是配置后函數(shù)跳轉(zhuǎn)功能沒有。緊接著我remove package然后重新安裝，還是不能跳轉(zhuǎn)。我將"Setting User"中的所有內(nèi)容刪除，函數(shù)跳轉(zhuǎn)功能有了。然后緊接著我又將Default的內(nèi)容全部復制到User中，函數(shù)跳轉(zhuǎn)功能還有，代碼提示功能也有。緊接著我又按照第二步修改過后，函數(shù)跳轉(zhuǎn)功能還有，代碼提示功能也有。弄不懂了- -+，反正現(xiàn)在能用就行。
可能是我人品差吧，，，同學安裝后什么也沒做，什么功能都有。而我折騰半天。
第一步： 安裝
通過Package Control->Install Package搜索SublimeCodeIntel安裝。(安裝過程中非常慢，慢慢等著吧，我掛了VPN快了不少。)
第二步： 配置
選擇Preferences->Package Settings->SublimeCodeIntel->Setting Default，將其內(nèi)容全部復制到Setting User中。按Command+F(或者ctrl+F)搜索codeintel_selected_catalogs，將其內(nèi)容改為如下：
"codeintel_selected_catalogs": [
"HTML5", "HTML", "JavaScript"
],
第三步：使用
1.按d會提示div tag選擇這個div tag就會出現(xiàn)：
<div></div>
2.但輸入div.class或者div#id，按下Tab會出現(xiàn)下面效果：
<div class="class"></div>
<div id="id"></div>
這個功能2其實Emmet也有，但是Emmet沒有功能1的代碼提示。
Emmet
Emmet(前身為大名鼎鼎的Zen Coding)是一個能大幅度提高前端開發(fā)效率的一個工具：
第一步：安裝
通過Package Control->Install Package搜索Emmet安裝。
第二步：使用
快速設置class屬性和id屬性，在SublimeCodeIntel插件功能2就可以了，但是下面的功能SublimeCodeIntel卻沒有。
輸入ul>li*5，按下Tab，會有如下結果：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
更多使用方法可以 百度，Google 搜索這個插件怎么用，也可以去官方文檔查看。
第三步：配置
Emmet還有一個功能，選取相同詞，可以一次更改多個詞，在mac中默認快捷鍵是Canmand+D(我記得是，要不然我也不會改鍵)。
我習慣Cammand+D(Ctrl+d)是刪除當前行，所以在Preferences->Key Bindings - User添加下面這兩行：
{ "keys": ["command+shift+d"], "command":"find_under_expand" },
{ "keys": ["command+d"], "command":"run_macro_file", "args": {"file":"Packages/Default/Delete Line.sublime-macro"} }
// 修改過后，command+shift+d就是選取相同的詞，command+d刪除當前行
CTags
這個插件的功能就是跳轉(zhuǎn)到函數(shù)定義的地方去。SublimeCodeIntel也有這個功能，因為當時安裝 SublimeCodeIntel是跳轉(zhuǎn)有問題，所以找到了它(感覺它不如SublimeCodeIntel)。
第一步：安裝插件
通過Package Control->Install Package搜索CTags安裝。
第二步：安裝ctags
要想ctags插件可以使用，先要在相應的項目目錄生成.tags文件，而生成這個文件，就需要在系統(tǒng)中安裝ctags.
- Windows安裝：
下載ctags.exe. 通過Preference -> Package Settings -> Ctags -> Settings Default中的內(nèi)容拷貝到Setting User中，將"command": ""中的""填入Ctags.exe的路徑位置。 - Linux安裝：
終端中依次輸入下列語句：
sudo apt-get install exuberant-ctags
sudo yum install ctags
//依賴yum管理工具，需要先安裝.注意安裝事項
- Mac安裝 :
如果有有MacPorts就用第一個命令，如果有Homebrew就用第二個命令。
port install ctags //需要安裝MacPorts
brew install ctags //需要安裝Homebrew
如果兩個都沒有，我推薦使用Homebrew，因為命令安裝，不麻煩，終端輸入下列命令：
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
// 安裝時碰到一句話Press ENTER to continue or any other key to abort，按Enter鍵繼續(xù)(我記得我碰到的是Return，所以以為是刪除鍵).輸入密碼安裝完畢.
brew install ctags //ctags安裝完畢
第三步：配置
將下列代碼復制到Preferences->Package Settings->CTags->Setting User中保存：
{
"command": "/usr/local/bin/ctags",
"autocomplete": true
}
第四步：使用
終端進入項目根目錄，運行：
ctags -R -f .tags
在Sublime Text中的項目根目錄點擊鼠標右鍵會出現(xiàn)CTags : Rebuild Tags，點擊后就會出現(xiàn).tags文件和.tags_sorted_by_file文件。
現(xiàn)在找到一個調(diào)用函數(shù)的地方，選中函數(shù)名，鼠標右鍵選擇Navigate to Defination，就會直接跳到函數(shù)聲明的地方。
問題 :
Ctags問題
Markdown Editing 和 Markdown Preview
當在 Sublime Text 中編寫 markdown 文件時，直接按瀏覽器瀏覽全是亂碼，而且還沒有將 markdown 文件解析成相應的 HTML. 這兩個插件的功能就是可以用瀏覽器瀏覽 Sublime Text 中編寫的 markdown文件。
第一步：安裝插件
通過Package Control->Install Package搜索Markdown Editing和Markdown Preview安裝。
第二步：配置
打開Preferences->Package Settings->Markdown Preview->Setting User將下面這句話粘貼進去：
{
"browser" : "/Applications/Chrome.app"
// "瀏覽markdown的瀏覽器的路徑"
}
打開Preferences->Key Binding User，添加下面一句話：
{ "keys": ["f6"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} },
keys的值是以上面瀏覽器預覽markdown文件。
第三步：使用
新建一個index.md，編寫markdown格式的內(nèi)容寫完以后按F6(我自己設置的時F6)就會看到Chrome中顯示的時解析后的樣子。
