介绍了在WebStorm中添加Vue.js单文件组件的亮点和语法支持，与大家分享如下：

有点遗憾

能看懂这篇文章的人不需要我介绍什么是vue。先拜大神吧！vue项目的创始人特别在sublime下写了一个语法高亮的插件，有人问他webstorm支持怎么样？他是这么回答的。默哀一分钟。

添加突出显示和语法支持

我通过插件认识到这一点。目前互联网上有两个插件：

插件1:https://github.com/henjue/vue-for-idea

插件2:https://github.com/postalservice14/vuejs-plugin

我现在用的是插件1。

它可以提供一点语法和代码突出显示以及一个文件模板。

也就是说，当您在左侧工程列中右键单击以创建新的工程列时，将会出现vue文件。

但是，他的语法支持确实有限，不要期望太高。cmd点击的一些跳转无法实现。

我还在设置中添加了额外的帮助：

这是这个组织在github上维护的语法列表，安装到webstorm上后会有相应的语法提示。在设置中输入这里，点击右边的下载，这个列表就会出现。选择以上来源，有两个选项。选择第二个，这个列表就会出现。找到vue并安装它。

但是感觉在。vue文件。

添加ES6支持

首先，您需要设置webstorm本身的JavaScript版本。如图所示：

这里的默认值是ES5.1，将其更改为ES6。

然后打开设置：

找到这个地方，找到上面的html类型，然后添加*。开始吧。确定后，系统会提示已被占用。如果你想清除它，你可以继续。这样，系统将处理。vue文件为html，并能正确识别里面的脚本标签。

如果你不想这么做，你可以。还有一个办法。将type='text/ecmascript-6 '直接添加到脚本标签中就可以了，里面的代码会高亮显示并支持ES6。

Sass支持

根据vue-loader文档，在*中支持几个css预处理程序和模板语言jade。vue模板。但是，当您将lang=sass添加到样式标签并编写sass时，您会发现IDE会报告错误。一开始我想到了webstorm的语言注入，根据现有的写了一个：

但是，它不能使用。

我去谷歌，发现有人做了，但没有成功。至于为什么，目前还不清楚。我知道玉是模板语言，所以我不能这么做。

但是萨斯不应该。

但是，也不是没有收获。

当在样式标记中找到rel='样式表/SCS '和type='文本/css '时，可以正确识别Sass。例如：

Stylescoped lang=' sass' rel='样式表/scss' type=' text/CSS '与less相同。但是，webstorm版本应该高于2016.1.1。

关于玉石支架

我还不知道玉模板语言。然而，在寻找萨斯支持的过程中，却发现有人用这样的“曲线救国”来支持翡翠：

同时我也发现vue-idea-plugin的作者做了一个不靠谱的承诺，戳到这里说会支持小玉，但是没有具体时间。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。