在webstrorm中配置好es6 babel【更新：在webstorm中配置.vue和.vue文件中支持es6】

 

第一步：全局安裝babel-cli

npm install -g babel-cli

第二步，新建一個空項目,在 WebStorm 中的當前項目中打開 Terminal，進入項目的根目錄下，

安裝 ES2015 preset，ES2015 preset會自動轉譯那些須要轉換爲 ES5 的 ES6 代碼。

npm install --save-dev babel-preset-es2015

如圖：

第三步：根目錄路徑下新建.babelrc文件，內容以下

{
   "presets": ["es2015"] }

第四步：新建const.js,寫入es6，發現頁面報錯，將JavaScript語言版本切換爲ECMAScript6

點擊File —>settings,彈出設置框。把js的版本設置爲： ECMAScript 6  ，勾選prefer strict mode這項。

第五步：  緊接着配置javascript的下的選項， 並點擊apply啓用。並點擊OK按鈕。

第六步： 配置 File Watchers 實現自動轉譯。第三步配置完，就出現了下面的提示。【若是沒有出現，就手動add watcher】

第七步： 點擊上面的Add watcher，【若是沒有出現第三步的提示，則能夠經過，file->settings-tools-file watcher來進行添加Babel】彈出以下窗口，點擊OK.【配置 WebStorm 的 File Watchers 以實現自動轉譯咱們編寫的 ES6 代碼。】

此處注意修改arguments的配置：

• Arguments:--source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$

 第七步 發現const.js下出現compile.js文件，查看生成的compile,發現已經生成成功，以下：說明已經成功了，能夠進行es6的學習，並查看轉碼後的代碼

一、配置.vue文件的快捷建立

　　①、File——》settings——》plugins,安裝vue.js插件。

②、建立新建.vue文件的模板

③、結果：能夠經過File——》New,建立.vue文件，生成下圖模板

二、使.vue文件語法高亮

 

 三、.vue支持es6語法