webstorm添加*.vue文件代碼提醒支持webstorm支持es6vue里支持es6寫法

本文轉自:http://www.lred.me/2016/01/07/webstorm%E6%B7%BB%E5%8A%A0-vue%E6%96%87%E4%BB%B6%E6%94%AF%E6%8C%81/

webstorm是前端開發神器，但我一直都不喜歡webstorm，就因為那很挫的配色和那大光標。

上陣子開始玩 Vuejs，在 Vue 中，可以 .vue 文件實現組件化，但各種編輯器都支持不好，作者也給sublime開發了相關的vue插件。我覺得用sublime就是在浪費生命啊，花那么多時間來裝插件配環境，我選擇IDE！
堅持用sublime寫了一個月的vue，沒有智能提示（而對重度依賴提示），不能對代碼進行格式化，手動調縮進，尼瑪，能堅持這么久也不容易。所以折騰了下webstorm看怎么支持，所以就有這篇筆記。

vue支持

打開 Settings => File Types 找到 HTML 添加 *.vue

這樣vue文件就相當於html文件，可以編輯css，js，也都有智能提示。
我一般用的是 es6 ，所以vue寫es6的代碼,webstorm還是會報錯。

vue里ES6支持

將script標簽添加 type=”es6” 屬性

1 2	<script type="es6"> </script>

 

然后打開 Settings => Language Injections 添加 XML Tag Injection，內容如下圖。

*.js 支持ES6

webstorm默認js文件是ES5語法
打開 Settings => Languages & Frameworks => Javascript
把 Javascript Language version 改為 ECMAScript 6

PS:要在vue文件里寫sass,stylus之類的css預處理，webstorm就不支持了，我也嘗試了添加 Injection ，代碼高亮正常，但卻是臨時的，只要一改動代碼，又會划很多紅線了，經過google，這似乎是webstorm的一個已知的Bug。