Sublime Text算是前端開(kāi)發(fā)中最常使用的文本編輯器之一，對(duì)于前端工程師來(lái)說(shuō)熟悉手中的編輯器就像熟悉筷子一樣重要。Sublime Text的入門文章網(wǎng)上已經(jīng)太多了，本文只關(guān)注能提升前端工程師工作效率的技巧和插件。

一晃已經(jīng)接近2015年，過(guò)去數(shù)年里前端開(kāi)發(fā)的發(fā)展日新月異：瀏覽器里充斥著新增加的CSS特性（以及這些特性的N種實(shí)現(xiàn)），JavaScript也不像原來(lái)那樣只用作給單一頁(yè)面加點(diǎn)特效或者提交Ajax請(qǐng)求這么簡(jiǎn)單，我們手邊有了Jade，Sass，TypeScript等等一打甚至更多種能生成HTML，CSS，JavaScript的語(yǔ)言，默認(rèn)安裝的Sublime Text已經(jīng)完全無(wú)法提供這些新的語(yǔ)言、新的特性所需要的語(yǔ)法高亮和智能感知。這一節(jié)介紹了一些Package來(lái)輔助Sublime Text實(shí)現(xiàn)更好地語(yǔ)法高亮。

JavaScript Next

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

CSS3

嗯是的，就是CSS3，默認(rèn)安裝的Sublime Text對(duì)CSS3的支持讓人抓狂，幀動(dòng)畫？別開(kāi)玩笑了你只會(huì)看到一片白色的純文本一樣的代碼。事實(shí)上不光CSS3，我建議用CSS3 Package完全替代原來(lái)的CSS Package來(lái)完成語(yǔ)法高亮。

SCSS

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

當(dāng)然Stylus和LESS也是寫CSS的好工具，事實(shí)上我更喜歡LESS。

其他Package

CoffeeScript的開(kāi)發(fā)人員少不了Better-Coffescript，這個(gè)Package比Package Control里官方的CoffeeScript Package要好得多，后者已經(jīng)很久沒(méi)有維護(hù)更新了。嗯，TypeScript也是個(gè)不錯(cuò)的選擇，當(dāng)然我想Visual Studio或許是更好地TypeScript工具。

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

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

Color Highlighter

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