eslint-plugin-vue 的初体验

近日看到 vuejs-templates/webpack 的更新记录中介绍了 eslint-plugin-vue。由于它不包含如分号这类代码风格相关的规范，只加强了 Vue 相关的规范，能够和 standard 与 airbnb 这类样式共存，所以决定在项目中采用。

安装

yarn add -D eslint eslint-plugin-vue

在 eslintrc 的 extends 项中添加 plugin:vue/essential：

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue/essential'
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

注意事项

如果使用了其它的 parser（如 "parser": "babel-eslint"），需要将它移到 parserOptions 中，这样就不会与 vue-eslint-parser 冲突：

- "parser": "babel-eslint",
  "parserOptions": {
+     "parser": "babel-eslint",
      "ecmaVersion": 2017,
      "sourceType": "module"
  }

原来的项目中有使用 eslint-plugin-html，它会与 eslint-plugin-vue 冲突，使用时需要移除。

使用效果

执行一遍 npm run lint 后，输出如图：

由于启用了所有规则，所以会显示出很多 error，尤其是 vue/order-in-components，它规范了组件中属性的顺序。

相信启用 eslint-plugin-vue 可以使项目代码更加规范统一。