ESLint

不管是多人合作还是个人项目，代码规范都是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。

配置项

所有的配置文件都在 .eslintrc.jsESLint - 图1 中。 本项目基本规范是依托于 vue 官方的 eslint 规则 eslint-config-vueESLint - 图2 做了少许的修改。大家可以按照自己的需求进行定制化配置。

比如：我个人或者项目组习惯于使用两个空格，但你可能觉得四个空格更顺眼，你可以做如下修改。 进入项目 .eslintrc.js 中，找到 indent，然后修改为 4 即可。 还有各种各样的配置信息，详情见 ESLint 文档ESLint - 图3。

在 v3.8.1ESLint - 图4版本之后，增加了eslint-plugin-vueESLint - 图5来更好的校验 vue 相关代码。

默认情况下使用了最严格的plugin:vue/recommended来校验代码，若你觉得太严格可自行修改。

  1. // https://github.com/PanJiaChen/vue-element-admin/blob/master/.eslintrc.js
  3. module.exports = {
  4.   extends: ['plugin:vue/recommended', 'eslint:recommended']
  5.   //你可以修改为  extends: ['plugin:vue/essential', 'eslint:recommended']
  6. }

取消 ESLint 校验

如果你不想使用 ESLint 校验（不推荐取消），只要找到 vue.config.jsESLint - 图6 文件。 进行如下设置 lintOnSave: false 即可。

vscode 配置 ESLint

这所谓工欲善其事，必先利其器，个人推荐 eslint+vscode 来写 vue，绝对有种飞一般的感觉。效果如图： eslintGif.gif

每次保存，vscode 就能标红不符合 eslint 规则的地方，同时还会做一些简单的自我修正。安装步骤如下：

首先安装 eslint 插件 eslint1.png

安装并配置完成 ESLint 后，我们继续回到 VSCode 进行扩展设置，依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加如下配置

  1. {
  2.   "files.autoSave": "off",
  3.   "eslint.validate": [
  4.     "javascript",
  5.     "javascriptreact",
  6.     "vue-html",
  7.     {
  8.       "language": "vue",
  9.       "autoFix": true
  10.     }
  11.   ],
  12.   "eslint.run": "onSave",
  13.   "eslint.autoFixOnSave": true
  14. }

这样每次保存的时候就可以根据根目录下.eslintrc.js 你配置的 eslint 规则来检查和做一些简单的 fix。每个人和团队都有自己的代码规范，统一就好了，去打造一份属于自己的 eslint 规则上传到 npm 吧，如饿了么团队的 configESLint - 图9，vue 的 configESLint - 图10。

vscode 插件和配置推荐ESLint - 图11

更多配置

由于本项目是基于vue-cli进行构建，所以更多配置可参考官方文档ESLint - 图12

自动修复

  1. npm run lint -- --fix

运行如上命令，eslint 会自动修复一些简单的错误。