這篇文章寫了有1年多了，發(fā)現(xiàn)這篇文章關(guān)注的人不少?，F(xiàn)在Webstorm要支持vue已經(jīng)有了更方便的方式。避免誤導(dǎo)，還是來更新下。

方法1：安裝 Vue.js 插件

打開 Settings->Plugins 搜索安裝

css預(yù)處理器支持

在我寫這文章的時間，還沒有支持預(yù)處理的方案，不過現(xiàn)在已經(jīng)很簡單了。

給 style 標(biāo)簽加上 rel=”stylesheet/scss” 屬性即可支持 scss 語法，看規(guī)則可以改成 less stylus 之類的。

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

方法2：Webstorm EAP 版已經(jīng)原生支持vue文件

看這里 https://blog.jetbrains.com/webstorm/2017/02/webstorm-2017-1-eap-171-2822/ EAP版可能不太穩(wěn)定，不過也能用。
或者等過段時間發(fā)布的 Webstorm 2017.1 穩(wěn)定版。

不得不說vue真是越用越厲害了啊，Webstorm也開始支持了。最后 原生支持才是最好的

以下內(nèi)容過時，針對舊版本的Webstorm

webstorm是前端開發(fā)神器，但我一直都不喜歡webstorm，就因?yàn)槟呛艽斓呐渖湍谴蠊鈽?biāo)。

上陣子開始玩 Vuejs，在 Vue 中，可以 .vue 文件實(shí)現(xiàn)組件化，但各種編輯器都支持不好，作者也給sublime開發(fā)了相關(guān)的vue插件。我覺得用sublime就是在浪費(fèi)生命啊，花那么多時間來裝插件配環(huán)境，我選擇IDE！

堅持用sublime寫了一個月的vue，沒有智能提示（而對重度依賴提示），不能對代碼進(jìn)行格式化，手動調(diào)縮進(jìn)，尼瑪，能堅持這么久也不容易。所以折騰了下webstorm看怎么支持，所以就有這篇筆記。

vue支持

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

這樣vue文件就相當(dāng)于html文件，可以編輯css，js，也都有智能提示。

我一般用的是 es6 ，所以vue寫es6的代碼,webstorm還是會報錯。

vue里ES6支持

將script標(biāo)簽添加 type=”es6” 屬性

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

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

*.js 支持ES6

webstorm默認(rèn)js文件是ES5語法

打開 Settings => Languages & Frameworks => Javascript

把 Javascript Language version 改為 ECMAScript 6

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論