Intellij idea 如何将WebStorm与Vue.js集成

WebStorm没有提供本地支持（至少目前是这样——2016年4月）

我发现了一些如何改善WebStorm体验的建议。 现在我想把它们列在一个地方（我将在下面回答我自己的问题）

---

请随意改进答案WebStorm现在支持vue.js（从2017.1开始）

因此不需要额外的步骤

---

已弃用

以下是改善WebStorm（PhpStorm、Idea等）体验的方法清单：

使用Vue.js插件

更新：两个插件都有自己的问题

• 具有奇怪的特性（从项目视图中隐藏节点模块）
• 强制您对ES6和SCS、sass使用特殊声明（请参阅下面不推荐使用的部分）

您可以通过

设置（首选项）

=>

插件安装它

=>

浏览存储库

=>（搜索“vue”

选择一个或两个选项：“Vue.js”或“Vue for idea”。这取决于你

将“Javascript语言版本”设置为ES6

打开

设置（首选项）

=>

语言和框架

=>

JavaScript

。将

Javascript语言版本设置为
ECMAcript6


改进HTML标记的属性突出显示
打开
设置（首选项）
=>
编辑器
=>
检查
=>
HTML
=>
选择未知HTML标记属性

=>单击自定义HTML标记属性。 添加您的属性

例如，我的列表：

v-on，v-on:click，v-on:change，v-on:focus，v-on:blur，v-on:keyup，：click，@click，v-model，v-text，v-bind，：disabled，@submit，v-class，：class，v-if，：value，v-for，scoped，@click.prevent，number，：readonly，@input，@click，v-show，v-else，readonly，v-link，：title，：for，tab index，：name，：id，：checked，transition，@submit.prevent，autocapitalize，autocapitalize，v-html，：风格

备注：有关定制标签的完整列表，请查看下面的答案

p.p.S.实际上，它应该以更常见的方式工作：

打开

设置（首选项）

=>

语言和框架

=>

Javascript

=>

库

=>单击

添加

（在此之后，您应该将路径设置为

vue.js

。您可以使用npm或其他工具加载它）

（此答案中的更多信息：）

但是我没有成功

启用Node.js编码帮助：

打开

设置（首选项）

=>

语言和框架

=>

Node.js和NPM

如果“Node.js核心库未启用”，请单击按钮

enabled

---

已弃用（如果您未将vue插件用于IDE，则可能需要）：

将

*.vue

文件识别为html文件

打开

设置（首选项）

=>

编辑器

=>

文件类型

在中查找

HTML

识别的文件类型

，然后将

*.vue

添加为新的注册文件 模式

改善ES6突出显示

在每个带有标记的

vue

文件中：

    <script type="text/babel">
        // your code here...
    </script>

    <style lang="sass" rel="stylesheet/sass">
        // your style here...
    </style>

对于

scss

它将是

对于

触控笔

请尝试

---

UPD：下面的步骤不太可信，它们可能有帮助，也可能没有，其中一些我没有亲自检查，或者我没有发现是否存在任何影响

导入TextMate捆绑包功能

为vue导入类型脚本表

打开

设置（首选项）

=>

语言和框架

=>

JavaScript

=>

库

。单击

下载

，切换到

类型脚本社区存根

。并下载带有

vue

word的所有选项卡

示例：（从1:24开始）

---

UPD2:有关更多信息请在github查看问题：

---

UPD3:FAQ:

我可以改进

帕格
（
jade
）高亮显示吗


否。因为Webstorm不支持模板语言注入。。。自2013年以来一直在上升，没有官方消息

---

我规避模板注入单独的模板文件，这不是很好

<template lang="pug" src="./MyComponent.pug">

---

我更新了未知HTML标记的列表，因此您只需将其复制粘贴到PhpStorm设置中：

nobr, noembed, comment, noscript, embed, script, :checked, :class, :click, :disabled, :for, :id, :name, :readonly, :style, :title, :value, @click, @click.prevent, @click.stop, @click.capture, @click.self, @drag, @drag.prevent, @drag.stop, @drag.capture, @drag.self, @dragend, @dragend.prevent, @dragend.stop, @dragend.capture, @dragend.self, @dragenter, @dragenter.prevent, @dragenter.stop, @dragenter.capture, @dragenter.self, @dragleave, @dragleave.prevent, @dragleave.stop, @dragleave.capture, @dragleave.self, @dragover, @dragover.prevent, @dragover.stop, @dragover.capture, @dragover.self, @dragstart, @dragstart.prevent, @dragstart.stop, @dragstart.capture, @dragstart.self, @drop, @drop.prevent, @drop.stop, @drop.capture, @drop.self, @input, @input.prevent, @input.stop, @input.capture, @input.self, @submit, @submit.prevent, @submit.stop, @submit.capture, @submit.self, scoped, slot, tab-index, v-bind, v-class, v-else, v-for, v-html, v-if, v-link, v-model, v-on, v-on:input, v-on:input.prevent, v-on:input.stop, v-on:input.capture, v-on:input.self, v-on:submit, v-on:submit.prevent, v-on:submit.stop, v-on:submit.capture, v-on:submit.self, v-on:blur, v-on:blur.prevent, v-on:blur.stop, v-on:blur.capture, v-on:blur.self, v-on:change, v-on:change.prevent, v-on:change.stop, v-on:change.capture, v-on:change.self, v-on:click, v-on:click.prevent, v-on:click.stop, v-on:click.capture, v-on:click.self, v-on:focus, v-on:focus.prevent, v-on:focus.stop, v-on:focus.capture, v-on:focus.self, v-on:keypress, v-on:keypress.prevent, v-on:keypress.stop, v-on:keypress.capture, v-on:keypress.self, v-on:keyup, v-on:keyup.prevent, v-on:keyup.stop, v-on:keyup.capture, v-on:keyup.self, v-on:keyup.enter, v-on:keyup.enter.prevent, v-on:keyup.enter.stop, v-on:keyup.enter.capture, v-on:keyup.enter.self, v-on:keyup.tab, v-on:keyup.tab.prevent, v-on:keyup.tab.stop, v-on:keyup.tab.capture, v-on:keyup.tab.self, v-on:keyup.delete, v-on:keyup.delete.prevent, v-on:keyup.delete.stop, v-on:keyup.delete.capture, v-on:keyup.delete.self, v-on:keyup.esc, v-on:keyup.esc.prevent, v-on:keyup.esc.stop, v-on:keyup.esc.capture, v-on:keyup.esc.self, v-on:keyup.space, v-on:keyup.space.prevent, v-on:keyup.space.stop, v-on:keyup.space.capture, v-on:keyup.space.self, v-on:keyup.up, v-on:keyup.up.prevent, v-on:keyup.up.stop, v-on:keyup.up.capture, v-on:keyup.up.self, v-on:keyup.down, v-on:keyup.down.prevent, v-on:keyup.down.stop, v-on:keyup.down.capture, v-on:keyup.down.self, v-on:keyup.left, v-on:keyup.left.prevent, v-on:keyup.left.stop, v-on:keyup.left.capture, v-on:keyup.left.self, v-on:keyup.right, v-on:keyup.right.prevent, v-on:keyup.right.stop, v-on:keyup.right.capture, v-on:keyup.right.self, v-show, v-text, v-on:drag, v-on:drag.prevent, v-on:drag.stop, v-on:drag.capture, v-on:drag.self, v-on:dragend, v-on:dragend.prevent, v-on:dragend.stop, v-on:dragend.capture, v-on:dragend.self, v-on:dragenter, v-on:dragenter.prevent, v-on:dragenter.stop, v-on:dragenter.capture, v-on:dragenter.self, v-on:dragleave, v-on:dragleave.prevent, v-on:dragleave.stop, v-on:dragleave.capture, v-on:dragleave.self, v-on:dragover, v-on:dragover.prevent, v-on:dragover.stop, v-on:dragover.capture, v-on:dragover.self, v-on:dragstart, v-on:dragstart.prevent, v-on:dragstart.stop, v-on:dragstart.capture, v-on:dragstart.self, v-on:drop, v-on:drop.prevent, v-on:drop.stop, v-on:drop.capture, v-on:drop.self, @focus, @focus.prevent, @focus.stop, @focus.capture, @focus.self, @change, @change.prevent, @change.stop, @change.capture, @change.self, @blur, @blur.prevent, @blur.stop, @blur.capture, @blur.self, @keypress, @keypress.prevent, @keypress.stop, @keypress.capture, @keypress.self, @keyup, @keyup.prevent, @keyup.stop, @keyup.capture, @keyup.self, v-on:reset, v-on:reset.prevent, v-on:reset.stop, v-on:reset.capture, v-on:reset.self, @reset, @reset.prevent, @reset.stop, @reset.capture, @reset.self, v-on:keydown, v-on:keydown.prevent, v-on:keydown.stop, v-on:keydown.capture, v-on:keydown.self, @keydown, @keydown.prevent, @keydown.stop, @keydown.capture, @keydown.self, v-on:mousenter, v-on:mousenter.prevent, v-on:mousenter.stop, v-on:mousenter.capture, v-on:mousenter.self, v-on:mouseover, v-on:mouseover.prevent, v-on:mouseover.stop, v-on:mouseover.capture, v-on:mouseover.self, v-on:mousemove, v-on:mousemove.prevent, v-on:mousemove.stop, v-on:mousemove.capture, v-on:mousemove.self, v-on:mousedown, v-on:mousedown.prevent, v-on:mousedown.stop, v-on:mousedown.capture, v-on:mousedown.self, v-on:mouseup, v-on:mouseup.prevent, v-on:mouseup.stop, v-on:mouseup.capture, v-on:mouseup.self, @mousenter, @mousenter.prevent, @mousenter.stop, @mousenter.capture, @mousenter.self, @mouseover, @mouseover.prevent, @mouseover.stop, @mouseover.capture, @mouseover.self, @mousemove, @mousemove.prevent, @mousemove.stop, @mousemove.capture, @mousemove.self, @mousedown, @mousedown.prevent, @mousedown.stop, @mousedown.capture, @mousedown.self, @mouseup, @mouseup.prevent, @mouseup.stop, @mouseup.capture, @mouseup.self, v-on:dblclick, v-on:dblclick.prevent, v-on:dblclick.stop, v-on:dblclick.capture, v-on:dblclick.self, v-on:contextmenu, v-on:contextmenu.prevent, v-on:contextmenu.stop, v-on:contextmenu.capture, v-on:contextmenu.self, v-on:wheel, v-on:wheel.prevent, v-on:wheel.stop, v-on:wheel.capture, v-on:wheel.self, v-on:mouseleave, v-on:mouseleave.prevent, v-on:mouseleave.stop, v-on:mouseleave.capture, v-on:mouseleave.self, v-on:mouseout, v-on:mouseout.prevent, v-on:mouseout.stop, v-on:mouseout.capture, v-on:mouseout.self, v-on:select, v-on:select.prevent, v-on:select.stop, v-on:select.capture, v-on:select.self, @dblclick, @dblclick.prevent, @dblclick.stop, @dblclick.capture, @dblclick.self, @contextmenu, @contextmenu.prevent, @contextmenu.stop, @contextmenu.capture, @contextmenu.self, @wheel, @wheel.prevent, @wheel.stop, @wheel.capture, @wheel.self, @mouseleave, @mouseleave.prevent, @mouseleave.stop, @mouseleave.capture, @mouseleave.self, @mouseout, @mouseout.prevent, @mouseout.stop, @mouseout.capture, @mouseout.self, @select, @select.prevent, @select.stop, @select.capture, @select.self, v-bind:key

我本来会评论你之前的回答，但由于性格的限制，我无法这么做

---

注意：还有很多可用的，在我看来，我只是手工挑选了最常见的。WebStorm正式开始支持VueJS

---

但是现在它只在早期访问预览构建中起作用

技巧

对我不起作用。即使设置

lang=“scss”

也无济于事，它试图读取纯css，因此充满了错误。此外，它还扰乱了自动缩进。你确定还是我遗漏了什么？编辑：刚刚发现它应该可以工作哦，算了吧<代码>对我来说很有用。要改进HTML标记的属性突出显示，请注意XML检查，这可能会导致HTML检查出现问题。感谢这一详尽的分析，这是一个很大的帮助。然而，由于您所述的原因，这两个插件在WebStorm中都不好。出于某种原因，额外的HTML标记属性列表也没有任何区别。工作原理是将.vue文件分配给HTML，然后使用vue速记-即@而不是v-on，只使用“：”而不是v-bind。但是我更喜欢v-on而不是@，因为它说明了它在做什么。这里有人知道如何修改模板区域的默认制表符缩进间距吗？使用vue.js插件，everyt