如何将 WebStorm 与 Vue.js 集成
How to integrate WebStorm with Vue.js
WebStorm 本身不支持 Vue.js（至少目前 - 2016 年 4 月）。
我发现很少有关于如何改善 WebStorm 体验的建议。
现在我想把它们列在一个地方（我将在下面回答我自己的问题）。
随时改进答案
WebStorm现在支持vue.js（从2017.1[blog]开始）
所以不需要额外的步骤
已弃用
这是改善 WebStorm（PhpStorm、Idea 等）体验的方法清单：
- 使用Vue.js插件.
更新：两个插件都有自己的问题atm
- vue-for-idea has weird side-effects（从项目视图中隐藏
node_modules）；
- John Kelly's Vue.js plugin 强制您对 ES6 和 scss 使用特殊声明，sass（请参阅下面的弃用部分）
You can install it via Settings(Preferences) => Plugins => Browse repositories => (search for) "vue"
选择一项或两项："Vue.js" 或 "vue-for-idea"。由你决定。
- 将"Javascript Language Version"设置为ES6。
Open Settings(Preferences) => Language & Frameworks =>
JavaScript. Set Javascript Language Version to ECMAcript6
- 改进HTML-标签的属性突出显示
Open Settings(Preferences) => Editor => Inspection => HTML =>
select Unknown HTML tag attributes => click Custom HTML tag attributes.
Add your attributes.
比如我的列表：
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,autocorrect,slot,v-html,:style
P.S。有关自定义标签的完整列表，请查看下面的 答案
P.P.S。实际上它应该以更常见的方式工作：
Open Settings(Preferences) => Languages & Frameworks => Javascript =>
Libraries => click Add
(after this you should set path to the vue.js. You can dowmload it with npm or whatever)
（此答案中的更多信息：）
但我没有成功。
- 启用Node.js编码帮助：
打开 Settings(Preferences) => Languages & Frameworks => Node.js and NPM
If "Node.js core library is not enabled", click button Enabled
DEPRECATED（如果您不为 IDE 使用 vue 插件，则可能需要）：
- 使
*.vue 文件被识别为 html 苍蝇.
Open Settings(Preferences) => Editor =>File Types find HTML in
Recognized File Types, then add *.vue as a new Registered
Patterns.
- 改善 ES6 高亮.
In each vue file with tag:
<script type="text/babel">
// your code here...
</script>
（这有助于识别 setTimeout(() => {console.log(1) }, 100) 等结构）
- 改进样式突出显示。 （sass、scss 等）
In each vue file with tag:
<style lang="sass" rel="stylesheet/sass">
// your style here...
</style>
对于 scss 它将是 <style lang="scss" type="text/scss">
对于stylus请尝试<style lang="stylus" type="text/stylus">
UPD：下面的步骤不太可信，它们可能有帮助，也可能没有，其中一些我没有亲自检查一下，或者我没有发现是否存在任何影响。
- 导入 TextMate 捆绑包功能。
https://www.jetbrains.com/help/phpstorm/2016.1/textmate-bundles.html?origin=old_help
- 为 vue 导入 TypeScript 表。
Open Settings(Preferences) => Language & Frameworks =>
JavaScript => Libraries. Click Download, Switch to TypeScript community stubs. And download all tabs with vue word.
Example: https://youtu.be/4mKiGkokyx8?t=84 (from 1:24)
UPD2: 如需 更多信息，请查看 github 中的问题：https://github.com/vuejs/vue-syntax-highlight/issues/3
UPD3：常见问题解答：
我可以改进 pug(jade) 突出显示吗?
- 否。因为 Webstorm 不支持模板语言注入... Issue 自 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
我会评论你之前的回答，但字符限制阻止我这样做。
注意：还有很多 events 可用，我只挑选了我个人认为最常见的。
WebStorm正式开始支持VueJSSee their blog
但现在它只适用于抢先体验预览版本
WebStorm 本身不支持 Vue.js（至少目前 - 2016 年 4 月）。
我发现很少有关于如何改善 WebStorm 体验的建议。 现在我想把它们列在一个地方（我将在下面回答我自己的问题）。
随时改进答案
WebStorm现在支持vue.js（从2017.1[blog]开始）
所以不需要额外的步骤
已弃用
这是改善 WebStorm（PhpStorm、Idea 等）体验的方法清单：
- 使用Vue.js插件.
更新：两个插件都有自己的问题atm
- vue-for-idea has weird side-effects（从项目视图中隐藏
node_modules）； - John Kelly's Vue.js plugin 强制您对 ES6 和 scss 使用特殊声明，sass（请参阅下面的弃用部分）
You can install it via
Settings(Preferences)=>Plugins=>Browse repositories=> (search for) "vue"
选择一项或两项："Vue.js" 或 "vue-for-idea"。由你决定。
- 将"Javascript Language Version"设置为ES6。
Open
Settings(Preferences)=>Language & Frameworks=>JavaScript. SetJavascript Language VersiontoECMAcript6
- 改进HTML-标签的属性突出显示
Open
Settings(Preferences)=>Editor=>Inspection=>HTML=> selectUnknown HTML tag attributes=> clickCustom HTML tag attributes. Add your attributes.
比如我的列表：
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,autocorrect,slot,v-html,:style
P.S。有关自定义标签的完整列表，请查看下面的
P.P.S。实际上它应该以更常见的方式工作：
Open
Settings(Preferences)=>Languages & Frameworks=>Javascript=>Libraries=> clickAdd(after this you should set path to thevue.js. You can dowmload it with npm or whatever)
（此答案中的更多信息：）
但我没有成功。
- 启用Node.js编码帮助：
打开 Settings(Preferences) => Languages & Frameworks => Node.js and NPM
If "Node.js core library is not enabled", click button
Enabled
DEPRECATED（如果您不为 IDE 使用 vue 插件，则可能需要）：
- 使
*.vue文件被识别为 html 苍蝇.
Open
Settings(Preferences)=>Editor=>File TypesfindHTMLinRecognized File Types, then add*.vueas a new Registered Patterns.
- 改善 ES6 高亮.
In each
vuefile with tag:<script type="text/babel"> // your code here... </script>
（这有助于识别 setTimeout(() => {console.log(1) }, 100) 等结构）
- 改进样式突出显示。 （sass、scss 等）
In each
vuefile with tag:<style lang="sass" rel="stylesheet/sass"> // your style here... </style>
对于 scss 它将是 <style lang="scss" type="text/scss">
对于stylus请尝试<style lang="stylus" type="text/stylus">
UPD：下面的步骤不太可信，它们可能有帮助，也可能没有，其中一些我没有亲自检查一下，或者我没有发现是否存在任何影响。
- 导入 TextMate 捆绑包功能。
https://www.jetbrains.com/help/phpstorm/2016.1/textmate-bundles.html?origin=old_help
- 为 vue 导入 TypeScript 表。
Open
Settings(Preferences)=>Language & Frameworks=>JavaScript=>Libraries. ClickDownload, Switch toTypeScript community stubs. And download all tabs withvueword.Example: https://youtu.be/4mKiGkokyx8?t=84 (from 1:24)
UPD2: 如需 更多信息，请查看 github 中的问题：https://github.com/vuejs/vue-syntax-highlight/issues/3
UPD3：常见问题解答：
我可以改进
pug(jade) 突出显示吗?- 否。因为 Webstorm 不支持模板语言注入... Issue 自 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
我会评论你之前的回答，但字符限制阻止我这样做。
注意：还有很多 events 可用，我只挑选了我个人认为最常见的。
WebStorm正式开始支持VueJSSee their blog
但现在它只适用于抢先体验预览版本