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

同事說，他的WebStorm簡直太方便，自身集成了很多方便的工具，不用配置太多

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

?

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

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

但始終是要先打開命令行手動打命令，略為麻煩，對此可以使用相應的?watch?參數來監聽文件的改變，即時編譯

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

?

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

?

一、Sass支持

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

第一個是語法渲染的支持，下面那個就是?Sass Build?。也安裝了，用來編譯成CSS

（其實Sass Build插件的實現不難，下方會稍微介紹；要實現編譯，首要的條件是機子本身已經配好了Sass環境，插件做的只是調用）

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

看看Tools下的Build System，可以發現多了兩個build配置，即為Sass Build工具提供的，第一個為簡單地編譯，第二個在編譯之后還進行了壓縮

想選下面那個，可以手動勾選，或者想編譯時按快捷鍵?Ctrl+Shift+B?選擇選項即可

默認是CSS文件被解析到當前目錄下，我們可以自定義路徑或文件名

點擊新建一個New Build System，放上這個配置

{"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中即為命令與參數的結合，類似一般的Sass編譯命令，通過使用一些內置的變量，我們就能自定義CSS文件的生成路徑及文件名

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

?

再裝個插件?SublimeOnSaveBuild?，提供保存即執行命令的支持

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

可以看看它的配置信息

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

定義了對某些文件進行監聽，如果不想保存時即構建，就將值設為0即可（注意，作者?對Default選項設為了只讀，想更改就在User配置項中更改覆蓋即可）

?

二、Babel支持

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

這個插件首先識別了ES6或JSX的語法形式進行渲染，其次還特別建議使用這個主題插件做更好的代碼著色

除此之外，它還提供了Babel的轉碼，不過這個功能有些缺陷。先看其配置項

注意要將這里的路徑配好，設置成環境變量的路徑，讓插件可以在次尋找?babel或babel-core?命令，否則就會報錯?Couldn't find babel or babel-core

然后，類似在命令行中執行babel命令的前提：先在當前目錄配置好.babelrc文件，定義轉碼規則，在當前目錄放置好依賴包（因為這里找不到全局的）

比如我使用了三個規則，就在當前路徑下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?執行即可

如果順利的話，就能看到es6文件已經轉換為es5語法，然而然而，只是生成了匿名文件，不符合我們的預期

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

?

所以，自己配置Build選項吧，類似Sass那樣

要注意的是，我們的目標：要智能，在Scss文件下保存就即時編譯成CSS文件，在ES6語法文件下保存就即時解析成ES5語法格式

?

三、sublime-build

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

在這里，首要關注三個配置就行?

1. cmd 上文好像已經提過了，其實就是一般的命令拼接

2. selector 可用來智能過濾，即在匹配的文件才執行該build規則

前提是開啟了自動匹配的規則，即

如上文提到的SASS的build配置，匹配到才執行

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

為了解析ES6語法，現在就來新建一個Build選項，輸入內容，保存該.sublime-build文件至相應目錄下

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

比如這里，匹配了*.js文件才執行cmd中的命令，命令中自定義了路徑與文件名，規則類似一般的babel命令規則

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

? ??

如果只想在這兩種文件保存時才觸發build規則，在 SublimeOnSaveBuild 的配置中配置一下即可

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

?

3. ?variants

就是說通過這個配置，我們可以在一個Build選項中定義不同的命令，在構建時我們可以自行選擇，比如我加入這么一段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文件中保存，就會出現三個命令選項，選擇name為two的命令，即可輸出two

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

?

四、其他

順帶提一下，如果想在內網或離線環境下安裝ST插件，就手動轉移插件包即可

Windows一般在系統的這個路徑下：C:\Users\Administrator\AppData\Roaming\Sublime Text 3\Installed Packages

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

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

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

如果想更改模版文件，就進入目錄更改即可

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

?

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

直接點擊?Add watch或通過 Preferences > Tools > File watchers?新建一個監聽規則，用 babel 進行即時解析語法

自定義設置好相應項保存即可

?

可以看到，其實WS也是調用了機子本身的babel工具，調用命令行執行。ST的配置跟這個有相似之處

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。