WebStorm ES6 語法支持設置

 

ECMAScript 6是JavaScript語言的下一代標準，已經在2015年6月正式發佈了。Mozilla公司將在這個標準的基礎上，推出JavaScript 2.0。
ES6的目標，是使得JavaScript語言能夠用來編寫大型的複雜的應用程序，成爲企業級開發語言。

做爲一隻猴子，我也想嘗試一下ES6有什麼新特性，因而開始了學習之路。

在webstorm寫下了這段代碼，體驗一下ES6語法的便利，可是一大堆報錯

各類語法錯誤

what the fuck

相信每一隻程序猴都不想在這樣的環境下編碼，反正本猴不想

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文件

編譯後