webstorm添加*.vue文件支持

方法1：安裝 Vue.js 插件

打開 Settings->Plugins 搜索安裝
css預處理器支持

在我寫這文章的時間，尚未支持預處理的方案，不過如今已經很簡單了。
給 style 標籤加上 rel=」stylesheet/scss」 屬性便可支持 scss 語法，看規則能夠改爲 less stylus 之類的。

<style rel="stylesheet/scss" lang="sass" scoped>
</style>

方法2：Webstorm EAP 版已經原生支持vue文件

看這裏 https://blog.jetbrains.com/we... EAP版可能不太穩定，不過也能用。
或者等過段時間發佈的 Webstorm 2017.1 穩定版。
不得不說vue真是越用越厲害了啊，Webstorm也開始支持了。最後 原生支持纔是最好的

如下內容過期，針對舊版本的Webstorm

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」 屬性

<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。

本文轉載於http://www.lred.me/2016/01/07...