用Sublime Text蠻久了，配置配來(lái)配去的，每次換電腦都得重頭再配過(guò)，奈何人老了腦子不中用了，得好好整理一些，下次換電腦就有得參考了..

同事說(shuō)，他的WebStorm簡(jiǎn)直太方便，自身集成了很多方便的工具，不用配置太多

哈哈哈哈但我還是更喜歡用ST

?

如果要將Sass編譯成css文件，安裝相應(yīng)的編譯工具就行，然后在命令行直接sass a.scss:b.css 編譯就行了

要將ES6解析成ES5的語(yǔ)法形式，同樣的安裝好babel工具，命令行執(zhí)行 babel a.js -o b.js 即可

但始終是要先打開(kāi)命令行手動(dòng)打命令，略為麻煩，對(duì)此可以使用相應(yīng)的?watch?參數(shù)來(lái)監(jiān)聽(tīng)文件的改變，即時(shí)編譯

但更好的方案似乎是：不用另外打開(kāi)cmd命令行，直接即時(shí)地在編輯器/IDE中解析編譯

?

搭飛機(jī)前往：Sass支持 ? Babel支持 ? Sublime-build ? 其他小tips

?

一、Sass支持

要讓ST支持Sass，第一步應(yīng)該是支持Sass的語(yǔ)法，Ctrl+Shift+P --> install --> Sass 安裝Sass插件

第一個(gè)是語(yǔ)法渲染的支持，下面那個(gè)就是?Sass Build?。也安裝了，用來(lái)編譯成CSS

（其實(shí)Sass Build插件的實(shí)現(xiàn)不難，下方會(huì)稍微介紹；要實(shí)現(xiàn)編譯，首要的條件是機(jī)子本身已經(jīng)配好了Sass環(huán)境，插件做的只是調(diào)用）

安裝好這個(gè)插件之后，將Scss文件保存后，按快捷鍵?Ctrl+B?即可將其編譯成CSS文件，默認(rèn)路徑為當(dāng)前目錄下

看看Tools下的Build System，可以發(fā)現(xiàn)多了兩個(gè)build配置，即為Sass Build工具提供的，第一個(gè)為簡(jiǎn)單地編譯，第二個(gè)在編譯之后還進(jìn)行了壓縮

想選下面那個(gè)，可以手動(dòng)勾選，或者想編譯時(shí)按快捷鍵?Ctrl+Shift+B?選擇選項(xiàng)即可

默認(rèn)是CSS文件被解析到當(dāng)前目錄下，我們可以自定義路徑或文件名

點(diǎn)擊新建一個(gè)New Build System，放上這個(gè)配置

{"cmd": ["sass", "--update", "${file_base_name}.scss:./css/${file_base_name}.css", "--style", "expanded"],"selector": "source.sass, source.scss","line_regex": "Line ([0-9]+):","windows":{"shell": "true"}}

cmd中即為命令與參數(shù)的結(jié)合，類(lèi)似一般的Sass編譯命令，通過(guò)使用一些內(nèi)置的變量，我們就能自定義CSS文件的生成路徑及文件名

很好，能在ST編輯器中好好編譯了，但還缺了點(diǎn)什么。目前保存文件之后還得手動(dòng)按快捷鍵編譯

?

再裝個(gè)插件?SublimeOnSaveBuild?，提供保存即執(zhí)行命令的支持

裝好插件之后最好重啟一下ST，然后保存文件時(shí)，即可按照你Build System中的配置，執(zhí)行配置中的命令

可以看看它的配置信息

{"filename_filter": "\\.(css|js|sass|less|scss)$","build_on_save": 1 }

定義了對(duì)某些文件進(jìn)行監(jiān)聽(tīng)，如果不想保存時(shí)即構(gòu)建，就將值設(shè)為0即可（注意，作者?對(duì)Default選項(xiàng)設(shè)為了只讀，想更改就在User配置項(xiàng)中更改覆蓋即可）

?

二、Babel支持

一般使用Babel解碼器將ES6語(yǔ)法解析成ES5語(yǔ)法，在ST編輯器中裝個(gè)插件?babel-sublime??即可支持Babel

這個(gè)插件首先識(shí)別了ES6或JSX的語(yǔ)法形式進(jìn)行渲染，其次還特別建議使用這個(gè)主題插件做更好的代碼著色

除此之外，它還提供了Babel的轉(zhuǎn)碼，不過(guò)這個(gè)功能有些缺陷。先看其配置項(xiàng)

注意要將這里的路徑配好，設(shè)置成環(huán)境變量的路徑，讓插件可以在次尋找?babel或babel-core?命令，否則就會(huì)報(bào)錯(cuò)?Couldn't find babel or babel-core

然后，類(lèi)似在命令行中執(zhí)行babel命令的前提：先在當(dāng)前目錄配置好.babelrc文件，定義轉(zhuǎn)碼規(guī)則，在當(dāng)前目錄放置好依賴包（因?yàn)檫@里找不到全局的）

比如我使用了三個(gè)規(guī)則，就在當(dāng)前路徑下npm 裝好 babel-preset-es2015、babel-preset-react、babel-preset-stage-3

{"presets": ["es2015","react","stage-3"],"plugins": [] }

然后在es6.js下快捷鍵Ctrl+Shift+P，輸入babel，選擇?babel transform?執(zhí)行即可

如果順利的話，就能看到es6文件已經(jīng)轉(zhuǎn)換為es5語(yǔ)法，然而然而，只是生成了匿名文件，不符合我們的預(yù)期

我已經(jīng)查了很久，始終不知道應(yīng)該在哪里設(shè)置生成文件的路徑，所以這是個(gè)大缺陷呀，況且還得另外打命令

?

所以，自己配置Build選項(xiàng)吧，類(lèi)似Sass那樣

要注意的是，我們的目標(biāo)：要智能，在Scss文件下保存就即時(shí)編譯成CSS文件，在ES6語(yǔ)法文件下保存就即時(shí)解析成ES5語(yǔ)法格式

?

三、sublime-build

所以還是先好好去看?Sublime-build的文檔?吧

在這里，首要關(guān)注三個(gè)配置就行?

1. cmd 上文好像已經(jīng)提過(guò)了，其實(shí)就是一般的命令拼接

2. selector 可用來(lái)智能過(guò)濾，即在匹配的文件才執(zhí)行該build規(guī)則

前提是開(kāi)啟了自動(dòng)匹配的規(guī)則，即

如上文提到的SASS的build配置，匹配到才執(zhí)行

"selector": "source.sass, source.scss",

為了解析ES6語(yǔ)法，現(xiàn)在就來(lái)新建一個(gè)Build選項(xiàng)，輸入內(nèi)容，保存該.sublime-build文件至相應(yīng)目錄下

{"cmd": ["babel", "${file_base_name}.js", "-o", "./es5/${file_base_name}.js"],"selector": "source.js","line_regex": "Line ([0-9]+):","windows":{"shell": "true"} }

比如這里，匹配了*.js文件才執(zhí)行cmd中的命令，命令中自定義了路徑與文件名，規(guī)則類(lèi)似一般的babel命令規(guī)則

在SCSS文件下保存和JS文件下保存，觸發(fā)的build命令是不同的

? ??

如果只想在這兩種文件保存時(shí)才觸發(fā)build規(guī)則，在 SublimeOnSaveBuild 的配置中配置一下即可

"filename_filter": "\\.(css|js|sass|less|scss)$",

?

3. ?variants

就是說(shuō)通過(guò)這個(gè)配置，我們可以在一個(gè)Build選項(xiàng)中定義不同的命令，在構(gòu)建時(shí)我們可以自行選擇，比如我加入這么一段variants 配置

{"cmd": ["babel", "${file_base_name}.js", "-o", "./es5/${file_base_name}.js"],"selector": "source.js","line_regex": "Line ([0-9]+):","windows":{"shell": "true"},"variants": [{"name": "one","cmd": ["echo", "one"],"shell": true},{"name": "two","cmd": ["echo", "two"]}]}

在*.js文件中保存，就會(huì)出現(xiàn)三個(gè)命令選項(xiàng)，選擇name為two的命令，即可輸出two

關(guān)于sublime的build system 就簡(jiǎn)單介紹到這兒了，更多的還是去文檔中心看看比較好

?

四、其他

順帶提一下，如果想在內(nèi)網(wǎng)或離線環(huán)境下安裝ST插件，就手動(dòng)轉(zhuǎn)移插件包即可

Windows一般在系統(tǒng)的這個(gè)路徑下：C:\Users\Administrator\AppData\Roaming\Sublime Text 3\Installed Packages

這種后綴的文件即為插件包，將其放到相應(yīng)的Installed Packages目錄下即可

而插件的配置信息一般在這個(gè)Packages目錄下

比如想安裝了模版插件?SublimeTmpl之后，快捷鍵Ctrl+Alt+H/C/J/P 可直接新建HTML/CSS/Javascript/PHP模版文件

如果想更改模版文件，就進(jìn)入目錄更改即可

另外，ST的?Preferences?下的?Package Settings?也提供了一個(gè)插件配置的入口

?

而對(duì)于WebStorm，要支持ES6語(yǔ)法，需在?Preferences > Languages & Frameworks > JavaScript?配置版本后，保存

直接點(diǎn)擊?Add watch或通過(guò) Preferences > Tools > File watchers?新建一個(gè)監(jiān)聽(tīng)規(guī)則，用 babel 進(jìn)行即時(shí)解析語(yǔ)法

自定義設(shè)置好相應(yīng)項(xiàng)保存即可

?

可以看到，其實(shí)WS也是調(diào)用了機(jī)子本身的babel工具，調(diào)用命令行執(zhí)行。ST的配置跟這個(gè)有相似之處

?

總結(jié)

以上是生活随笔為你收集整理的Sublime插件支持Sass编译和Babel解析ES6 .sublime-build文件初探的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。