對于前端開發(fā)來說洼畅，推薦使用JetBrains WebStorm編輯器（簡直是神器）或者vim（超級神器）吩案，但是有時我們寫個小demo時可以考慮使用Sublime Text，畢竟JetBrains WebStorm有時打開太慢了而且挺占內(nèi)存的帝簇。我之前裝的是Sublime Text2徘郭，今天裝了Sublime Text3，把相關(guān)的知識整理了下丧肴，適合新手看残揉。非新手可以直接看第四部分------ 四、插件推薦 （里面是我精心挑選的插件）看有你需要的插件不芋浮，或者您可以留言推薦其他好的插件抱环。：-）
一、Sublime Text 3 注冊碼
（盜版有罪纸巷，大家有錢后記得答謝原作者）
1镇草、Sublime Text 3 3126 注冊碼
2、 https://fatesinger.com/78705
二瘤旨、包管理器安裝方法
打開sublime text 3梯啤，按ctrl+~
或者菜單View > Show Console
打開命令窗口，粘貼這個網(wǎng)站中的代碼并回車即可存哲。
三因宇、安裝插件
1、快捷鍵 Ctrl+Shift+P（菜單 – Tools – Command Paletter）祟偷，輸入 install 選中Install Package并回車察滑；
2、輸入或選擇你需要的插件回車就安裝了（注意左下角的小文字變化修肠，會提示安裝成功）贺辰。
四、插件推薦
1、Browser Refresh 將寫好的代碼通過打開瀏覽器預(yù)覽
有一點需要注意的是安裝完該插件后魂爪，點擊如下圖紅色方框所圈出的地方后
在里面輸入
[
{ "keys": ["ctrl+shift+enter"], "command": "open_in_browser" }
]
以后就可以直接ctrl+shift+enter預(yù)覽寫好的代碼了。
2016年12月16日補(bǔ)充：上述功能也可使用更強(qiáng)大的SideBarEnhancements（側(cè)邊欄增強(qiáng)工具）進(jìn)行實現(xiàn)艰管。
2滓侍、HTML-CSS-JSPrettify 格式化代碼
具體介紹可看這里：使用SublimeText3的HTML-CSS-JSPrettify插件格式化代碼
不過在這里補(bǔ)充一點就是格式化代碼可使用快捷鍵ctrl+shift+H，不需要像文章中介紹的那么麻煩牲芋；
3撩笆、Better Completion
javascript ,jQuery , Bootstrap 等js庫的自動補(bǔ)全。該插件的特點就是可以自定義配置需要自動補(bǔ)全的庫缸浦。安裝完以后它的配置文件可以配置自己需要補(bǔ)全的庫夕冲；
官網(wǎng)說明：https://github.com/facelessuser/BracketHighlighter
這里提醒下，安裝完后需打開用戶自定義設(shè)置（見下圖紅色圓圈圈出的部分）并粘貼
如下代碼:
{
// --------------------
// sublime-better-completions-Package (sbc package)
// --------------------
// API files is contains the *keyword* such as `html`, `jquery`, `myglossary` with lowercase as filename `sbc-api-${filename}.sublime-settings` place in `/packages/User/` (your own) or `/packages/${this-package}/sublime-completions/` (package build-in).
// After you enable, disable or added new your own completions, you might need restart your Sublime Text Editor.
//
// Your own setting file `sbc-setting.sublime-settings` need to place in `/packages/User/` and contains all your api setting property that you want to enable.
//
// --------------------
// APIs Setup
// --------------------
// `true` means enable it.
// `false` means disable it.
"completion_active_list": {
// build-in completions
"css-properties": false,
"gruntjs-plugins": false,
"html": false,
"lodash": false,
"javascript": true,
"jquery": true,
"jquery-sq": true, // Single Quote
"php": false,
"phpci": false,
"sql": false,
"twitter-bootstrap": false,
"twitter-bootstrap-less-variables": false,
"twitter-bootstrap3": false,
"twitter-bootstrap3-sass-variables": false,
"underscorejs": false,
"react": false,
// Your own completions?
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-angularjs.sublime-settings
"my-angularjs": false,
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-glossary.sublime-settings
"my-glossary": false,
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-html.sublime-settings
"my-html": false,
// ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-javascript.sublime-settings
"my-javascript": false
}
}
上面如果你覺得用的到裂逐，可以將對應(yīng)的false改成true歹鱼；
4、BracketHighlighter 高亮顯示[], (), {}, "", '', #!xml <tag></tag>甚至是自定義的字符卜高，方便查找弥姻；
官方地址：https://github.com/facelessuser/BracketHighlighter
官方文檔：http://facelessuser.github.io/BracketHighlighter/
另外這個插件我安裝幾次都失敗了，剛開始報 pygments' is not currently installed錯誤掺涛，后來又安裝幾次發(fā)現(xiàn) pygments又安裝成功了庭敦，但又 報Unable to download python-markdown錯誤；這個應(yīng)該是網(wǎng)絡(luò)不好薪缆，大家可以開代理進(jìn)行安裝下載秧廉；我后來重新安裝幾次又好了。
5拣帽、AutoFileName
快捷輸入文件名疼电，文件路徑自動提示的。自動完成文件名的輸入减拭，如圖片選取澜沟，輸入”/”即可看到相對于本項目文件夾的其他文件
6、SublimeLinter 代碼校驗工具
具體可看這篇文章：代碼校驗工具 SublimeLinter 的安裝與使用
里面介紹了javascript語法檢查SublimeLinter-jshint及css語法檢查 SublimeLinter-csslint峡谊；
7茫虽、Emmet 必備的神器插件
輸入“!”或“html:5”，然后按Tab鍵便可自動生成模版既们；
輸入h1{foo}和a[href=#]濒析，就可以自動生成上述代碼；
大家具體可看這篇文章：Emmet：HTML/CSS代碼快速編寫神器
8啥纸、sublimeCodeIntel 代碼自動補(bǔ)全
直接安裝即可(我的直接安裝重啟即可使用)号杏，如正常安裝后還是使用不了可以參考只針對sublimecodeintel安裝好之后不能正常完成補(bǔ)全的問題
9、livereload 解放F5(刷新)的開發(fā)工具
具體可見這篇文章： LiveReload一款解放F5的開發(fā)工具
以前我在這篇文章中提到過browser-sync也能實現(xiàn)該功能（它其實不光只有實時刷新功能，還有BrowserSync會在多個瀏覽器中同步滾動條位置盾致，表單行為和點擊事件功能具體見BrowserSync主经，迅捷從免F5開始），但是感覺它太麻煩了庭惜，需要打開node罩驻，當(dāng)然有其他更好的單獨軟件（ 【F5】 Web開發(fā)免刷新）可以實現(xiàn)實時刷新的功能（F5使用示范）；
10护赊、livestyle sublime text3和chrome雙向?qū)崟r編輯預(yù)覽CSS
具體可見sublime text3和chrome雙向?qū)崟r編輯預(yù)覽CSS
當(dāng)然使用chrome的Workspace也能夠?qū)崿F(xiàn)該功能惠遏，具體見：使用chrome的Workspace實現(xiàn)js、css文件調(diào)試即時保存
**本文版權(quán)歸本人即簡書筆名：該賬戶已被查封 所有骏啰，如需轉(zhuǎn)載請注明出處节吮。謝謝！ *
