如何将 WebStorm 与 Vue.js 集成

WebStorm now supports vue.js(从2017.1[blog]开始)

所以不需要额外的步骤

DEPRECATED

以下是改善WebStorm(PhpStorm、Idea等)体验的方法 list :

1. Use Vue.js plugin

UPDATE:两个插件都有自己的问题

• vue-for-idea有奇怪的side-effects(从项目视图中隐藏node_modules)；
• John Kelly's Vue.js plugin强制您对ES6和SCS、sass使用特殊声明(参见下面不推荐的部分)

You can install it via Settings(Preferences) => Plugins => Browse repositories => (search for) "vue"

Select 一个或两个选项:"Vue.js"或"Vue for idea".这取决于你.

2. Set "Javascript Language Version" to ES6

Open Settings(Preferences) => Language & Frameworks => JavaScript. Set Javascript Language Version to ECMAcript6

https://github.com/postalservice14/vuejs-plugin

3. Improve HTML-tag's attributes highlighting

Open Settings(Preferences) => Editor => Inspection => HTML => select Unknown HTML tag attributes => click Custom HTML tag attributes. Add your attributes.

例如，我的 list :

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.阻止、编号、只读、@input、@click、v-show、v-else、只读、v-link、:title、:for、选项卡索引、:name、:id、:checked、transition、@submit.预防、自动资本化、自动更正、插槽、v-html、:样式

备注:有关定制标签的完整列表，请查看下面的@Alex'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)

(更多信息请参见本答案:https://stackoverflow.com/a/28903910/930170)

但是我没有成功.

4. Enable Node.js Coding Assistance:

Open Settings(Preferences) => Languages & Frameworks => Node.js and NPM

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

DEPRECATED(如果您不在IDE中使用vue插件，则可能需要):

1. Make 100 files to be recognized as a html flies

Open Settings(Preferences) => Editor =>File Types find HTML in Recognized File Types, then add *.vue as a new Registered Patterns.

2. Improve ES6 highlight

在每个带有标签的vue个文件中:

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

(这将有助于识别像setTimeout(() => {console.log(1) }, 100)这样的建筑)

3. Improve styles highlight.(sass、scss等)

在每个带有标签的vue个文件中:

    <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:下面的步骤不那么可信，它们有帮助，或者可能没有，其中一些我没有亲自判断，或者我没有发现是否存在任何影响.

1. Import TextMate Bundle functionality

https://www.jetbrains.com/help/phpstorm/2016.1/textmate-bundles.html?origin=old_help

2. Import TypeScript tables for vue

Open Settings(Preferences) => Language & Frameworks => JavaScript => Libraries. Click Download, Switch to TypeScript community stubs. And download all tabs with vue word.

示例:https://youtu.be/4mKiGkokyx8?t=84(从1:24开始)

UPD2:对于more info，在github上查看问题:https://github.com/vuejs/vue-syntax-highlight/issues/3

UPD3:常见问题解答:

1. Can I improve 100(101) highlight?

   • No.因为Webstorm不支持模板语言注入...自2013年以来，Issue%一直在上升，但没有官方消息.