webstorm如何添加*.vue文件支持

小編給大家分享一下webstorm如何添加*.vue文件支持，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

方法1：安裝 Vue.js 插件

打開 Settings->Plugins 搜索安裝

css預(yù)處理器支持

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

給 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)定，不過也能用。
或者等過段時(shí)間發(fā)布的 Webstorm 2017.1 穩(wěn)定版。

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

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

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

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

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

vue支持

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

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

我一般用的是 es6 ，所以vue寫es6的代碼,webstorm還是會(huì)報(bào)錯(cuò)。

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 ，代碼高亮正常，但卻是臨時(shí)的，只要一改動(dòng)代碼，又會(huì)劃很多紅線了，經(jīng)過google，這似乎是webstorm的一個(gè)已知的Bug。

以上是“webstorm如何添加*.vue文件支持”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！