Sublime Text算是前端開發中最常使用的文本編輯器之一，對于前端工程師來說熟悉手中的編輯器就像熟悉筷子一樣重要。Sublime Text的入門文章網上已經太多了，本文只關注能提升前端工程師工作效率的技巧和插件。

一晃已經接近2015年，過去數年里前端開發的發展日新月異：瀏覽器里充斥著新增加的CSS特性（以及這些特性的N種實現），JavaScript也不像原來那樣只用作給單一頁面加點特效或者提交Ajax請求這么簡單，我們手邊有了Jade，Sass，TypeScript等等一打甚至更多種能生成HTML，CSS，JavaScript的語言，默認安裝的Sublime Text已經完全無法提供這些新的語言、新的特性所需要的語法高亮和智能感知。這一節介紹了一些Package來輔助Sublime Text實現更好地語法高亮。

JavaScript Next

JavaScript Next 提供了比默認JavaScript Package更好的語法高亮，而且他完美支持ECMAScript 6，如果你知道ECMAScript 6，或許也感受過默認安裝的Sublime Text不支持modules，succinct methods, arrow functions, classes, generators, and accessors 帶來的不便。

CSS3

嗯是的，就是CSS3，默認安裝的Sublime Text對CSS3的支持讓人抓狂，幀動畫？別開玩笑了你只會看到一片白色的純文本一樣的代碼。事實上不光CSS3，我建議用CSS3 Package完全替代原來的CSS Package來完成語法高亮。

SCSS

Sass的開發人員們，我建議你們使用SCSS Package，是的我也覺得有.sass和.scss是很腦殘的設定，但是我想大多數Sass開發人員實際上寫的都是.scss，畢竟.scss更“像”我們熟悉的原生CSS。

當然Stylus和LESS也是寫CSS的好工具，事實上我更喜歡LESS。

其他Package

CoffeeScript的開發人員少不了Better-Coffescript，這個Package比Package Control里官方的CoffeeScript Package要好得多，后者已經很久沒有維護更新了。嗯，TypeScript也是個不錯的選擇，當然我想Visual Studio或許是更好地TypeScript工具。

Haml Package為默認的工具增加了嵌套語言的支持，包括JavaScript，CSS，Sass等等，語法高亮比以前更方便。Slim和Jade也提供了各自的語法高亮支持，這兩種語言我還不是非常了解，如果有更好的插件提供請一定分享出來。

Sublime Text有無數有趣又有用的插件，社區的支持也是我一直用Sublime Text的原因。如果我們找一打工程師坐下來討論Sublime Text的插件，哦算了我們還是聊聊宇宙和平吧…… 前端工程師常用的插件比如CTag不再贅述，這里說幾個有趣的。

Color Highlighter

這個插件我等了很久了，我最早用Sublime Text寫CSS時候就在想“這堆顏色碼誰知道是什么顏色”… Color Highlighter這個插件會檢測CSS文件中的顏色碼，不論是Hex碼或者RGB碼都能很好的顯示。Color Highlighter能夠設置成用背景色或者邊框提示顏色，我一般在Settings里做這樣的設置：

language-http" { "ha_style": "filled", "icons": false }

這樣設置之后的效果是這樣的：

更贊的是最近這個插件也支持了Sass、LESS以及Stylus，這也使他成為我的必備插件之一。

Emmet

嗯，我個人不喜歡Emmet這個名字，反倒是以前他叫做Zen Coding的時候更容易被人記住。大量使用Emmet只有一個壞處，那就是你可能會忘記把標簽成對打兩遍的好習慣。

用Emmet寫HTML很快，真的很快。簡單的把標簽和需要的class名稱寫清，嵌套結構和閉合標簽他會幫你搞定的。Jade、Slim或者Haml的支持也很好。

Sublime Linter

經常對代碼做lint是個好習慣，這不一定是為了檢測語法錯誤，還能減少潛在的沖突、不兼容等。后端工程師有CLint一類的工具，Sublime Text中對JavaScript的Lint支持也很好。Sublime Linter可以在編譯時就很方便的幫助我們lint代碼。雖然我們通過grunt等構建工具，也可以在構建網站時強制進行lint檢測，但是在編輯時的實時監測總是方便很多。

我想合適的主題和配色是能夠潛在提高工程師效率的重要工具，雖然用白底黑字的記事本也能寫出穩固高效的代碼，但是為了我們的心情和眼睛，還是選幾款好的配色比較好。前端工程師對設計和美學更加敏銳，雖然不是設計師，但我們知道“什么是美的”。在Sublime Text中改變視覺效果有兩部分設置，分別是代碼高亮的“配色”以及編輯器本身的“主題”（包括了Tab欄、側邊欄以及Command窗口等）。順便插播一下，最新版本的Sublime Text 3能夠指定側邊欄的文件圖標了~

記得知乎上有為什么大部分程序員都喜歡用黑色界面這樣的問題，嗯…… 不管你使用亮色系還是暗色系的主題（事實上我在不同的編輯器分別用了這兩種），下面這幾種都非常值得推薦：

Solarized Dark

Solarized在事實上設計了一套配色的標準，而非單純的幾個編輯器配色文件。我們可以在官網上找到大量流行IDE的Solarized配色方案，在GitHub等開源網站上更多！幾乎所有數的出來的編輯器、終端工具等都可以找到Solarized風格的配色。很多頂級工程師的工具和博客也使用了這一套配色。

Cobalt2

Cabalt2這套主題是本文原作者Wes Bos推薦的主題，這套主題經過了5年以上的修改和演進。它的特點在于通過高對比度的方案吸引使用者的眼球，把注意力放在需要注意的地方。

Seti UI

黑，很黑，用來形容Seti UI不算過分，這套主題的藍色很挑眼，我推薦這款主題只是因為這篇文章太長了需要點兒亮色~

Goto Anything

如果你之前用過Coda、Textmate或者Dreamweaver你可能對側邊欄上的文件導航及其依賴。Sublime Text帶來了Goto Anything特性，只需要按下簡單的 ⌘ (Ctrl on Windows) + P 就可以前往任何你想到達的位置，這是你能想到的打開文件的最快的方法。智能感知的提示框提供了模糊匹配，我們不需要記住準確的文件名，也不需要記住他在哪層文件夾里。

Goto Anything不光支持文件名，事實上他還支持前往某行，你可以使用“jquery.js:205:15”來前往jquery.js文件的205行15列。使用“@”可以前往文件里的函數、方法等等成員，再方便不過。