在 WebStorm/PhpStorm 中开启对 Vue.js 的完美支持
版权声明：本文为SteinKuo作者的原创文章，未经 Steinkuo允许不得转载 https://blog.csdn.net/gh254172840/article/details/79114966 最近的一个前后端分离项目开始使用 Vue.js 进行开发，就顺便优化了一下 PhpStorm 下的开发体验（PhpStorm 版本为 2017.1）。
注：在最新的 2017.1 版本中，PhpStorm（WebStorm）已经对 Vue.js 进行了原生支持，所以不需要装第三方插件了。
安装 Vue.js 插件 PhpStorm 目前的版本还没有对 Vue.js 进行原生支持，所以需要先安装 Vue.js 插件（安装方式：「Preferences」 =>「Plugins」 => 「Browse repositories…」 => 搜索「Vue.js」）。
设置 *.vue 文件中的代码高亮 安装 Vue.js 插件后只是对 *.vue 文件有了基本的支持，但是其对需要编译的语法支持有限。
改善 HTML 属性高亮 PhpStorm 自带的 Inspections 会帮你检查很多常见的代码错误，但是 Vue.js 中的一些语法无法被正确解析，建议关闭。注意每次
进入「Preferences」 =>「Editor」 => 「Inspections」； 关闭「HTML」下的「Unknown HTML tag」； 关闭「HTML」下的「Unknown HTML tag attribute」，也可以不关闭但是手动在右侧的「Custom HTML tags」添加下面的属性白名单； 然后进入「File」 =>「Default Settings...」，重复上面的步骤，以后新开的项目都会默认使用这个配置了。 属性白名单（只包含了简写方式，不过仍旧不完整，只能寄望 Vue.js 插件能升级支持模糊匹配来原生支持了）：
@click, @click.stop, @click.prevent, @input, @change, @focus, @blur, @keyup, @submit, @submit.prevent, :disabled, :class, :style, :value, :readonly, :disabled, :title, :for, :tab-index, :name, :id, :checked, slot, scoped
切换至 ES6 规范 在项目中开启 ES6（「Preferences」 =>「Languages & Frameworks」 => 「JavaScript」 => 切换「JavaScript language version」至「ECMAScript 6」）。
开启 SCSS 支持 将 <style> 标签按下面的方法设置，然后就可以使用嵌套和引入模块了。
<style lang="scss" rel="stylesheet/scss" type="text/scss" scoped> @import "../layout/main"; .header { .logo { margin: 0 auto; } } </style> 其它 Airbnb 语法规范兼容 在上面修改「Inspections」处，找到「JavaScript」=>「General」，关闭「Unneeded last comma in array literal」和「Unneeded last comma in object literal」可以支持关于 comma-dangle 的规范要求。
引入 Vue.js 库 在项目中（建议在全局）加入 Vue.js 库：
进入「Preferences」 =>「Languages & Frameworks」 => 「JavaScript」=>「Libraries」； 点击「Add...」； 在弹出的窗口中设置名称、版本等，「Visibility」建议设置为全局「Global」，最主要的一点是下面的源文件区域，下载一份未压缩的 vue.js（例如：https://github.com/vuejs/vue/blob/master/dist/vue.js）放进去； 保存后勾上新加的 Vue.js 库。 这样即便你还没在项目目录安装 node_modules 也可以正确高亮代码中的 Vue.js 方法了。
模块跳转、语法分析等功能均正常使用：
--------------------- 作者：SteinKuo 来源：CSDN 原文：https://blog.csdn.net/gh254172840/article/details/79114966 版权声明：本文为博主原创文章，转载请附上博文链接！
