webstorm不支持es6如何解決

這篇文章主要介紹“webstorm不支持es6如何解決”，在日常操作中，相信很多人在webstorm不支持es6如何解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”webstorm不支持es6如何解決”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

解決方法：1、依次點擊導航欄的“File”-“Preferences”-“Languages & Frameworks”-“JavaScript”，將版本設置為“ECMAScript 6”即可。2、執行“npm install -g babel”命令安裝Babel工具，打開“File watchers”并點擊“+”按鈕，在彈窗中配置Babel即可。

本教程操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

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

我也想嘗試一下ES6有什么新特性，于是開始了學習之路。

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

各種語法錯誤

解決方法

1、語法支持設置

 File > 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如何解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！