前端工程師手中的Sublime Text
- 原文地址：http://css-tricks.com/sublime-text-front-end-developers/
- 我的Blog：http://blog.cabbit.me/sublime-text-front-end-developers/
翻譯時(shí)候夾帶了私貨… ^_^
Sublime Text算是前端開(kāi)發(fā)中最常使用的文本編輯器之一，對(duì)于前端工程師來(lái)說(shuō)熟悉手中的編輯器就像熟悉筷子一樣重要。Sublime Text的入門(mén)文章網(wǎng)上已經(jīng)太多了，本文只關(guān)注能提升前端工程師工作效率的技巧和插件。
語(yǔ)法高亮
一晃已經(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)畫(huà)？別開(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í)際上寫(xiě)的都是.scss，畢竟.scss更“像”我們熟悉的原生CSS。
當(dāng)然Stylus和LESS也是寫(xiě)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寫(xiě)CSS時(shí)候就在想“這堆顏色碼誰(shuí)知道是什么顏色”… Color Highlighter這個(gè)插件會(huì)檢測(cè)CSS文件中的顏色碼，不論是Hex碼或者RGB碼都能很好的顯示。Color Highlighter能夠設(shè)置成用背景色或者邊框提示顏色，我一般在Settings里做這樣的設(shè)置：
language-http" { "ha_style": "filled", "icons": false }
這樣設(shè)置之后的效果是這樣的：
更贊的是最近這個(gè)插件也支持了Sass、LESS以及Stylus，這也使他成為我的必備插件之一。
Emmet
嗯，我個(gè)人不喜歡Emmet這個(gè)名字，反倒是以前他叫做Zen Coding的時(shí)候更容易被人記住。大量使用Emmet只有一個(gè)壞處，那就是你可能會(huì)忘記把標(biāo)簽成對(duì)打兩遍的好習(xí)慣。
用Emmet寫(xiě)HTML很快，真的很快。簡(jiǎn)單的把標(biāo)簽和需要的class名稱(chēng)寫(xiě)清，嵌套結(jié)構(gòu)和閉合標(biāo)簽他會(huì)幫你搞定的。Jade、Slim或者Haml的支持也很好。
Sublime Linter
經(jīng)常對(duì)代碼做lint是個(gè)好習(xí)慣，這不一定是為了檢測(cè)語(yǔ)法錯(cuò)誤，還能減少潛在的沖突、不兼容等。后端工程師有CLint一類(lèi)的工具，Sublime Text中對(duì)JavaScript的Lint支持也很好。Sublime Linter可以在編譯時(shí)就很方便的幫助我們lint代碼。雖然我們通過(guò)grunt等構(gòu)建工具，也可以在構(gòu)建網(wǎng)站時(shí)強(qiáng)制進(jìn)行l(wèi)int檢測(cè)，但是在編輯時(shí)的實(shí)時(shí)監(jiān)測(cè)總是方便很多。
主題/配色
我想合適的主題和配色是能夠潛在提高工程師效率的重要工具，雖然用白底黑字的記事本也能寫(xiě)出穩(wěn)固高效的代碼，但是為了我們的心情和眼睛，還是選幾款好的配色比較好。前端工程師對(duì)設(shè)計(jì)和美學(xué)更加敏銳，雖然不是設(shè)計(jì)師，但我們知道“什么是美的”。在Sublime Text中改變視覺(jué)效果有兩部分設(shè)置，分別是代碼高亮的“配色”以及編輯器本身的“主題”（包括了Tab欄、側(cè)邊欄以及Command窗口等）。順便插播一下，***版本的Sublime Text 3能夠指定側(cè)邊欄的文件圖標(biāo)了~
記得知乎上有為什么大部分程序員都喜歡用黑色界面這樣的問(wèn)題，嗯…… 不管你使用亮色系還是暗色系的主題（事實(shí)上我在不同的編輯器分別用了這兩種），下面這幾種都非常值得推薦：
Solarized Dark
Solarized在事實(shí)上設(shè)計(jì)了一套配色的標(biāo)準(zhǔn)，而非單純的幾個(gè)編輯器配色文件。我們可以在官網(wǎng)上找到大量流行IDE的Solarized配色方案，在GitHub等開(kāi)源網(wǎng)站上更多！幾乎所有數(shù)的出來(lái)的編輯器、終端工具等都可以找到Solarized風(fēng)格的配色。很多***工程師的工具和博客也使用了這一套配色。
Cobalt2
Cabalt2這套主題是本文原作者Wes Bos推薦的主題，這套主題經(jīng)過(guò)了5年以上的修改和演進(jìn)。它的特點(diǎn)在于通過(guò)高對(duì)比度的方案吸引使用者的眼球，把注意力放在需要注意的地方。
Seti UI
黑，很黑，用來(lái)形容Seti UI不算過(guò)分，這套主題的藍(lán)色很挑眼，我推薦這款主題只是因?yàn)檫@篇文章太長(zhǎng)了需要點(diǎn)兒亮色~
Goto Anything
如果你之前用過(guò)Coda、Textmate或者Dreamweaver你可能對(duì)側(cè)邊欄上的文件導(dǎo)航及其依賴(lài)。Sublime Text帶來(lái)了Goto Anything特性，只需要按下簡(jiǎn)單的 ⌘ (Ctrl on Windows) + P 就可以前往任何你想到達(dá)的位置，這是你能想到的打開(kāi)文件的最快的方法。智能感知的提示框提供了模糊匹配，我們不需要記住準(zhǔn)確的文件名，也不需要記住他在哪層文件夾里。
Goto Anything不光支持文件名，事實(shí)上他還支持前往某行，你可以使用“jquery.js:205:15”來(lái)前往jquery.js文件的205行15列。使用“@”可以前往文件里的函數(shù)、方法等等成員，再方便不過(guò)。
題圖來(lái)源：http://marcelkalveram.com/2013/11/10-shortcuts-to-become-a-true-sublime-text-ninja/
原文鏈接：http://www.cnblogs.com/wizcabbit/p/sublime-text-front-end-developers.html
