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