作者：mqliutie
原文地址：http://segmentfault.com/a/1190000002748032
常用插件 ：
- SideBarEnhancements
- HTML-CSS-JS Prettify
- BracketHighlighter
- SublimeCodeIntel
- Emmet
- CTags
- Markdown Editing 和 Markdown Preview
SideBarEnhancements
Sublime Text有一個缺點(diǎn)，當(dāng)你想使用瀏覽器瀏覽你的html頁面的時候立镶，你需要在你的文件上點(diǎn)擊鼠標(biāo)右鍵损姜，選擇Open In Browser才可以瀏覽器瀏覽今野，而這是用默認(rèn)瀏覽器瀏覽哼绑，如果想用第二個瀏覽器都沒辦法矮固。所以窿克，可以通過SideBarEnhancements這個插件來更方便的瀏覽伪很。
第一步：安裝
通過Package Control->Install Package搜索sidebarenhancements安裝搓萧。
第二步：配置 ( 一 )
右鍵某html杂数，js，css等文件瘸洛，找到Open With然后點(diǎn)擊Edit Applications將里面內(nèi)容設(shè)置為：
[
{"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
},
//如果想再添加瀏覽器货矮，復(fù)制下面這個對象羊精，改相應(yīng)的路徑就可以了.
{
"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 對應(yīng)的值就是按鍵，比如按F2就會用Firefox打開這個頁面
[
{ "keys": ["f2"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "/Applications/Firefox.app",
//對應(yīng)上面的Firefox路徑
"extensions":".*"
}
},
{ "keys": ["f1"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "/Applications/Safari.app",
//對應(yīng)上面的Safari路徑
"extensions":".*"
}
},
//如果有新添加的瀏覽器喧锦，只需要把下面這個對象復(fù)制一份读规，路徑與新添加的對應(yīng)就可以了.
{ "keys": ["f4"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "/Applications/Chrome.app",
//對應(yīng)上面的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碍遍，這兩個快捷鍵是默認(rèn)的)。 - 但是阳液，這時候如果報(bào)錯
sh: node: command not found怕敬，說明node沒有安裝，那么就需要安裝node帘皿。 安裝好后东跪，Linux和Mac不需要做什么更改，而Windows用戶則需要配置一下node_path.- 首先鹰溜，在菜單欄里點(diǎn)擊
Preferences點(diǎn)擊第一個Browse Packages虽填，然后進(jìn)入HTML-CSS-JS Prettify文件夾，找到HTMLPrettify.sublime-settings文件曹动，用Sublime Text打開進(jìn)行更改windows對應(yīng)的值斋日，就是安裝的node的路徑。
- 首先鹰溜，在菜單欄里點(diǎn)擊
第三步： 配置 ( 快捷鍵 )
如果對快捷鍵不滿意墓陈，可以自己設(shè)置 . 打開Preferences里面的Key Bindings - User恶守，添加內(nèi)容：{ "keys": ["alt+q"], "command": "htmlprettify" }，當(dāng)然快捷鍵你可以自己更改跛蛋。
第四步： 配置 ( 代碼整理樣式 )
如果對代碼對其效果不滿意熬的，可以選擇Preferences里的Package Settings找到HTML/CSS/JS Prettify里的Set Prettify Preferences. 里面是一些規(guī)則的設(shè)置。這個文件就是github(詳細(xì)設(shè)置可到github中看)中提到的.jsbeautifyrc文件赊级。
BracketHighlighter
這個插件功能是匹配括號押框，在行號前面可以看到匹配括號的位置。
第一步：安裝
通過Package Control->Install Package搜索BracketHighlighter安裝理逊。
第二步：配置
將preferences-->package settings-->Bracket highlighter-->Bracket settings-Default內(nèi)容復(fù)制到Bracket settings-User中橡伞，因?yàn)閐efault里面的內(nèi)容是不可更改的，即使能更改晋被，一旦插件更新兑徘，更改就會消失，所以盡量在User中設(shè)置羡洛。按Command+F(或者ctrl+F)搜索color挂脑，找到下所示：
"default": {
"icon": "dot", //行號前面的匹配圖標(biāo)
"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"
//這里面可以單獨(dú)設(shè)置自己的樣式，下面的一樣
},
"round": { //圓括號
"icon": "round_bracket"
},
"square": { 方括號
"icon": "square_bracket"
},
....//下面還有一些其他符號
color是設(shè)置顏色崭闲，英文介紹沒看懂怎么替換顏色肋联。
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ù)定義的地方橄仍。
怪事 ：
這個插件真的是非常怪，第一次安裝的時候牍戚，如果不進(jìn)行第二步的配置就沒有代碼提示侮繁，于是進(jìn)行第二步配置，但是配置后函數(shù)跳轉(zhuǎn)功能沒有如孝。緊接著我remove package然后重新安裝宪哩，還是不能跳轉(zhuǎn)。我將"Setting User"中的所有內(nèi)容刪除第晰，函數(shù)跳轉(zhuǎn)功能有了斋射。然后緊接著我又將Default的內(nèi)容全部復(fù)制到User中，函數(shù)跳轉(zhuǎn)功能還有但荤，代碼提示功能也有。緊接著我又按照第二步修改過后涧至，函數(shù)跳轉(zhuǎn)功能還有腹躁，代碼提示功能也有。弄不懂了- -+南蓬，反正現(xiàn)在能用就行纺非。
可能是我人品差吧，赘方，烧颖，同學(xué)安裝后什么也沒做，什么功能都有窄陡。而我折騰半天炕淮。
第一步： 安裝
通過Package Control->Install Package搜索SublimeCodeIntel安裝。(安裝過程中非常慢跳夭，慢慢等著吧涂圆，我掛了VPN快了不少。)
第二步： 配置
選擇Preferences->Package Settings->SublimeCodeIntel->Setting Default币叹，將其內(nèi)容全部復(fù)制到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其實(shí)Emmet也有踩衩，但是Emmet沒有功能1的代碼提示。
Emmet
Emmet(前身為大名鼎鼎的Zen Coding)是一個能大幅度提高前端開發(fā)效率的一個工具：
第一步：安裝
通過Package Control->Install Package搜索Emmet安裝。
第二步：使用
快速設(shè)置class屬性和id屬性驱富，在SublimeCodeIntel插件功能2就可以了锚赤，但是下面的功能SublimeCodeIntel卻沒有。
輸入ul>li*5萌朱，按下Tab宴树，會有如下結(jié)果：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
更多使用方法可以 百度，Google 搜索這個插件怎么用晶疼，也可以去官方文檔查看酒贬。
第三步：配置
Emmet還有一個功能，選取相同詞翠霍，可以一次更改多個詞锭吨，在mac中默認(rèn)快捷鍵是Canmand+D(我記得是，要不然我也不會改鍵)寒匙。
我習(xí)慣Cammand+D(Ctrl+d)是刪除當(dāng)前行零如，所以在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刪除當(dāng)前行
CTags
這個插件的功能就是跳轉(zhuǎn)到函數(shù)定義的地方去考蕾。SublimeCodeIntel也有這個功能，因?yàn)楫?dāng)時安裝 SublimeCodeIntel是跳轉(zhuǎn)有問題会宪，所以找到了它(感覺它不如SublimeCodeIntel)椰弊。
第一步：安裝插件
通過Package Control->Install Package搜索CTags安裝研乒。
第二步：安裝ctags
要想ctags插件可以使用痊土，先要在相應(yīng)的項(xiàng)目目錄生成.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管理工具，需要先安裝.注意安裝事項(xiàng)
- Mac安裝 :
如果有有MacPorts就用第一個命令句携，如果有Homebrew就用第二個命令榔幸。
port install ctags //需要安裝MacPorts
brew install ctags //需要安裝Homebrew
如果兩個都沒有，我推薦使用Homebrew矮嫉，因?yàn)槊畎惭b牡辽，不麻煩，終端輸入下列命令：
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安裝完畢
第三步：配置
將下列代碼復(fù)制到Preferences->Package Settings->CTags->Setting User中保存：
{
"command": "/usr/local/bin/ctags",
"autocomplete": true
}
第四步：使用
終端進(jìn)入項(xiàng)目根目錄，運(yùn)行：
ctags -R -f .tags
在Sublime Text中的項(xiàng)目根目錄點(diǎn)擊鼠標(biāo)右鍵會出現(xiàn)CTags : Rebuild Tags挺尿，點(diǎn)擊后就會出現(xiàn).tags文件和.tags_sorted_by_file文件奏黑。
現(xiàn)在找到一個調(diào)用函數(shù)的地方炊邦，選中函數(shù)名，鼠標(biāo)右鍵選擇Navigate to Defination熟史，就會直接跳到函數(shù)聲明的地方馁害。
問題 :
Ctags問題
Markdown Editing 和 Markdown Preview
當(dāng)在 Sublime Text 中編寫 markdown 文件時，直接按瀏覽器瀏覽全是亂碼蹂匹，而且還沒有將 markdown 文件解析成相應(yīng)的 HTML. 這兩個插件的功能就是可以用瀏覽器瀏覽 Sublime Text 中編寫的 markdown文件碘菜。
第一步：安裝插件
通過Package Control->Install Package搜索Markdown Editing和Markdown Preview安裝。
第二步：配置
打開Preferences->Package Settings->Markdown Preview->Setting User將下面這句話粘貼進(jìn)去：
{
"browser" : "/Applications/Chrome.app"
// "瀏覽markdown的瀏覽器的路徑"
}
打開Preferences->Key Binding User限寞，添加下面一句話：
{ "keys": ["f6"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} },
keys的值是以上面瀏覽器預(yù)覽markdown文件忍啸。
第三步：使用
新建一個index.md，編寫markdown格式的內(nèi)容寫完以后按F6(我自己設(shè)置的時F6)就會看到Chrome中顯示的時解析后的樣子履植。
