ESLint实践心得

首先安装ESLint相关的依赖

npm i -D eslint
npm i -D babel-eslint
npm i -D eslint-config-standard
npm i -D eslint-plugin-babel
npm i -D eslint-plugin-html
npm i -D eslint-plugin-import
npm i -D eslint-plugin-node
npm i -D eslint-plugin-promise
npm i -D eslint-plugin-standard
npm i -D eslint-plugin-vue

.eslintrc配置

{
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 2019,    // 使用目前最新的，没找到类似next的配置方式
    "sourceType": "module"
  },
  "env": {
    "browser": true        // 其他环境可以针对去加
  },
  "extends": [
    "plugin:vue/base",
    "standard"        // 我决定在standard基础上微调
  ],
  "plugins": [
    "vue"
  ],
  "rules": {
    "semi": [2, "always"],    // standard默认不带分号，我觉得还是加上好
    "no-debugger": "off"        // 允许书写debugger，方便开发调试
  }
}

自动修复

这样配置只会让不合规范的代码在dev或者build的时候报错，但会拉低开发效率，故而我在package.json中增加了--fix命令，使其能在本地dev运行前自行修复格式类错误。另外通过husky和lint-staged配合，可以实现在本地commit之前，对本次修改范围内的代码执行特定脚本，通过如下配置即可在commit时再次进行校验和fix。
实现before commit校验需要的依赖

npm i -D husky
npm i -D lint-staged

package.json

"scripts": {
    "dev": "npm run lint:fix && ecf run --env local",        // 本地调试启动时会自动执行fix
    "lint": "eslint --ext .js,.vue client",
    "lint:fix": "eslint --fix --ext .js,.vue client"        // 运行npm run lint:fix即可自动修复格式类错误
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,vue}": "npm run lint:fix"
}

另外在远程端也可以配置lint对应校验，我们公司内的发布平台已经提供对应功能的流水线设置，无需本地进行配置。

VSCode提效

package.json只能在每次dev启动时执行fix，这并不能满足我们边开发边调试的需要，另外代码中的错误也没有实时提示，只能在命令行报错后才知道。

为了解决这些问题，我们需要在VSCode中安装Vetur和ESLint插件，并增加如下VSCode配置

"eslint.autoFixOnSave": true, // 每次保存时便自动fix
"eslint.validate": [    // 实时报错提醒
    "javascript",{
        "language": "vue",
        "autoFix": true
    },
      "html",
    "vue"
]