在 WebStorm/PhpStorm 中开启对 Vue.js 的完美支持

JetBrains 家的 PhpStorm(WebStorm) 是我近几年来一直使用的 IDE,它改变了我从 Dreamweaver 4.03 时期起就对 IDE 的各种偏见。虽然相比现代编辑器,它们在新技术的跟进不如编辑器完全依靠插件的方式(但也往往导致插件质量不高)快捷,但在开发大中型项目时 IDE 还是有其独到的优势。

最近的一个前后端分离项目开始使用 Vue.js 进行开发,就顺便优化了一下 PhpStorm 下的开发体验(PhpStorm 版本为 2016.3)。


注:在最新的 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 中的一些语法无法被正确解析,建议关闭。注意每次

  1. 进入「Preferences」 =>「Editor」 => 「Inspections」;
  2. 关闭「HTML」下的「Unknown HTML tag」;
  3. 关闭「HTML」下的「Unknown HTML tag attribute」,也可以不关闭但是手动在右侧的「Custom HTML tags」添加下面的属性白名单;
  4. 然后进入「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">
  @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 库:

  1. 进入「Preferences」 =>「Languages & Frameworks」 => 「JavaScript」=>「Libraries」;
  2. 点击「Add...」;
  3. 在弹出的窗口中设置名称、版本等,「Visibility」建议设置为全局「Global」,最主要的一点是下面的源文件区域,下载一份未压缩的 vue.js(例如:https://github.com/vuejs/vue/blob/master/dist/vue.js)放进去;
  4. 保存后勾上新加的 Vue.js 库。

这样即便你还没在项目目录安装 node_modules 也可以正确高亮代码中的 Vue.js 方法了。

完整效果如下,模块跳转、语法分析等功能均正常使用:

-- EOF --

此条目发表在 前端开发 分类目录,贴了 , , 标签。将固定链接加入收藏夹。

在 WebStorm/PhpStorm 中开启对 Vue.js 的完美支持》有 2 条评论

  1. 袁清 说:

    你好,我在mac下使用webstorm打开vue.js项目 在style标签中的内容报错,css正常显示,但是遇到postcss,stylus语法就出现错误提示。我是一名新手,您能帮我解答一下吗?