关于前端: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"
]