WebStorm ES6 文法支援設定

標籤：pac   轉碼   版本   editor   監聽   tor   original   位置   自動   

1 文法支援設定

Preferences > Languages & Frameworks > JavaScript

這裡只要配置ECMAScript版本即可

配置之後

2 自動轉碼為ES5

file watcher + babel（ES6轉碼器）

你可能希望你寫的代碼有更好的相容性，但目前的ES6肯定不是所有瀏覽器都支援的，所以我們要用到ES6轉碼器。
Babel是一個廣泛使用的ES6轉碼器，可以將ES6代碼轉為ES5代碼，從而在瀏覽器或其他環境執行。這意味著，你可以用ES6的方式編寫程式，又不用擔心現有環境是否支援。

而且你還希望每次修改代碼時能自動轉碼，所以還要用到webstorm的file watcher（當然還有其他解決方案）

• npm install -g babel
• Preferences > Tools > File watchers
• 點擊“+”按鈕

file watcher配置介面

File Type：配置該監聽器監聽的檔案類型，可以在Preferences > Editor > File types中配置
Scope：配置該監聽器的監聽範圍，可自訂新的範圍，也可以使用Preferences > Appearance & Behavior > Scopes
Program：babel的安裝位置
Arguments：命令執行參數，參見Babel CLI
Working directory：babel命令執行的位置，預設為檔案所在目錄

這樣對檔案做修改會隨時產生編譯成ES5的檔案以及sourceMap檔案

編譯後

WebStorm ES6 文法支援設定