WebStorm ES6 語法支持設(shè)置

ECMAScript 6是JavaScript語言的下一代標(biāo)準(zhǔn),已經(jīng)在2015年6月正式發(fā)布了。Mozilla公司將在這個標(biāo)準(zhǔn)的基礎(chǔ)上,推出JavaScript 2.0。
ES6的目標(biāo),是使得JavaScript語言可以用來編寫大型的復(fù)雜的應(yīng)用程序,成為企業(yè)級開發(fā)語言。

作為一只猴子,我也想嘗試一下ES6有什么新特性,于是開始了學(xué)習(xí)之路。

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

各種語法錯誤
what the fuck

相信每一只程序猴都不想在這樣的環(huán)境下編碼,反正本猴不想

1 語法支持設(shè)置

Preferences > Languages & Frameworks > JavaScript

這里只要配置ECMAScript版本即可


配置之后


2 自動轉(zhuǎn)碼為ES5

file watcher + babel(ES6轉(zhuǎn)碼器)

你可能希望你寫的代碼有更好的兼容性,但目前的ES6肯定不是所有瀏覽器都支持的,所以我們要用到ES6轉(zhuǎn)碼器。
Babel是一個廣泛使用的ES6轉(zhuǎn)碼器,可以將ES6代碼轉(zhuǎn)為ES5代碼,從而在瀏覽器或其他環(huán)境執(zhí)行。這意味著,你可以用ES6的方式編寫程序,又不用擔(dān)心現(xiàn)有環(huán)境是否支持。

而且你還希望每次修改代碼時能自動轉(zhuǎn)碼,所以還要用到webstorm的file watcher(當(dāng)然還有其他解決方案)

  • npm install -g babel
  • Preferences > Tools > File watchers
  • 點(diǎn)擊“+”按鈕
file watcher配置界面

File Type:配置該監(jiān)聽器監(jiān)聽的文件類型,可以在Preferences > Editor > File types中配置
Scope:配置該監(jiān)聽器的監(jiān)聽范圍,可自定義新的范圍,也可以使用Preferences > Appearance & Behavior > Scopes中定義的范圍
Program:babel的安裝位置
Arguments:命令執(zhí)行參數(shù),參見Babel CLI
Working directory:babel命令執(zhí)行的位置,默認(rèn)為文件所在目錄

這樣對文件做修改會隨時生成編譯成ES5的文件以及sourceMap文件


編譯后
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容