文章发布时涉及到的依赖版本

{
    "husky": "^7.0.4",
    "lint-staged": "^12.1.7,
    "eslint": "^8.7.0",
    "@babel/eslint-parser": "^7.16.5",
    // vue
    "vue-eslint-parser": "^8.0.1",
    // react
    "eslint-plugin-react": "^7.28.0",
    "@babel/preset-react": "^7.16.7",
}

安装eslint

npm install -D eslint

安装eslint之后，需要安装解析器
经测试

eslint@7.5.0之前

解析器需要安装babel-eslint

eslint@7.5.0之后

解析器需要安装@babel/eslint-parser

这里请根据当前安装的eslint版本判断，安装哪个解析器:

npm install -D babel-eslint // eslint@7.5.0之前
npm install -D @babel/eslint-parser // eslint@7.5.0之后

Vue

安装vue-eslint-parser

解析vue文件、语法

npm install -D vue-eslint-parser

React

安装eslint-plugin-react @babel/preset-react

npm install -D eslint-plugin-react @babel/preset-react

添加.eslintrc

{
  "env": {
    "node": true,
    "browser": true,
    "es2021": true
  },
  "parser": "@babel/eslint-parser", // 解析器
  "parserOptions": {
    "sourceType": "module", // Allows for the use of imports
    "ecmaVersion": 2021,
    "ecmaFeatures": {
      "jsx": true // enable JSX
    },
    "requireConfigFile": false,
  },
  // 规则
  "extends": [
    "eslint:recommended",
  ],
  // 自己的规则
  "rules": {
    // common
    "no-unreachable": 1, // return 下面的代码会warning
    "no-async-promise-executor": 1, // promise里不能async
  },
  "globals": {
    "AMap": true
  },
  ...
}

对接husky

安装husky可以看上一篇文章代码规范（一）——项目接入prettier、husky
husky安装完成后，在package.json的lint-staged添加eslint

{
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx,vue}": "eslint", // 这里加上eslint，注意：eslint的校验要在prettier之前
    "**/*.{js,jsx,ts,tsx,vue,css,less,scss,md,json}": "prettier --write"
  }
}

配置vscode实时监听eslint

在应用商店安装ESLint

在setting.json中添加eslint配置

设置eslint校验的文件类型

{
  // eslint
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    "html",
    "javascript", // 用eslint的规则检测js文件
    "javascriptreact",
    "vue"
  ]
}

如果想关闭当前项目的eslint提示

可以在当前项目根目录下新建一个.vscode文件夹，然后新建setting.json

{
  // eslint
  "eslint.enable": false // 关闭eslint检测
}