配置项

{
  "root": "定义配置读取结束位置。默认时 eslint 会从当前目录开始，一级级向上读取配置文件直到根目录",
  "parser": "指定用于解析特定语法的解析器。如：@babel/eslint-parser、@typescript-eslint/parser",
  "parserOptions": "指定解析器配置及附加的语法支持。如：es6+支持、jsx语法",
  "env": "添加需要的全局变量。如：es6、node、browser",
  "settings": "定义 plugins 使用的共享配置内容。如：{ react: { version: version } } 提供给 eslint-plugin-react 使用的配置",
  "plugins": "加载扩展的插件，以支持 eslint 没有的规则。如：eslint-plugin-react 让 eslint 支持 react 语法规则",
  "extends": "扩展集成好的 rule 规则内容，避免手动定义。如：plugin:react/recommended 使用 eslint-plugin-react 插件内推荐的 rule 定义",
  "overrides": "用于覆盖特定的配置，一般和 files 配合使用。如：对同一个目录下不同文件格式，定义各自的解析和规则"
}

其他说明

• plugins 和 extends 区别
  • plugins：定义 eslint 中没有的规则扩展
  • extends：读取集成好的 eslint 规则定义（有些类似定义了 .eslintrc 文件）。如：某个插件的推荐规则等
• 按照 npm 插件名称，默认可省略eslint-config-/eslint-plugin-前缀内容
  • 配置 -> 如：eslint-config-react-app，使用时在extends中配置eslint-config-后的名称为extends: ["react-app"]
  • 插件 -> 如：eslint-plugin-react-hooks，使用时在extends中配置eslint-plugin-后的名称为extends: ["plugin:react-hooks/recommended"]其中/recommended为配置名称
• 定义不同解析器：对于不同的文件类型，使用特定的解析去处理
  • 如 js 文件使用@babel/eslint-parser作为解析器。而遇到 ts 文件则需要@typescript-eslint/parser解析器。可通过 overrides 配合 files 覆盖规则，来运行对应的解析器

module.exports = {
  // 默认配置支持 js 检测
  parser: '@babel/eslint-parser',
  // 使用 overrides、files 配合
  overrides: [
    {
      // 对于 ts 文件使用 typescript 进程接些
      files: ['**/*.ts'],
      parser: '@typescript-eslint/parser',
      plugins: ['@typescript-eslint']
    }
  ]
}

• ts 相关插件：@typescript-eslint/parser、@typescript-eslint/eslint-plugin 两者版本要相同，且 typescript 也要安装所提示的对应版本范围之内。否则会有以下提示

• 对于 koa 项目：所使用的 @types/koa 也要与 typescript 版本相依赖（查询官方文档说明），不然会出现部分 koa 定义内容不识别问题

react 例子

// package.json
{
  "devDependencies": {
  	"eslint": "",
    "eslint-import-resolver-alias": "",
    "eslint-plugin-import": "",
    "eslint-plugin-jsx-a11y": "",
    "eslint-plugin-react": "",
    "eslint-plugin-react-hooks": ""
  }
}

// .eslintrc
{
  "root": true,
  // babel-code 解析为 estree 让 eslint 可以正常工作（babbel-eslint 已弃用）
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    // 项目使用es模块类型
    "sourceType": "module",
    "ecmaFeatures": {
      // 附加 jsx 语法支持
      "jsx": true
    }
  },
  // 扩展浏览器、es6+全局变量。如：Promise、Set...
  "env": {
    "es6": true,
    "browser": true,
  },
  // 使用 eslint/react/react-hooks/import 插进推荐的 rule 内容
	"extends": [
  	  "eslint:recommended",
  	  "plugin:react/recommended",
  	  "plugin:react-hooks/recommended",
  	  "plugin:import/recommended"
	],
	"plugins": ["react", "react-hooks", "jsx-a11y"],
	"settings": {
    // react 插件用的配置
  	"react": {
      "version": "detect",
    },
    // import 插件用配置
    "import/resolver": {
      "alias": {
        "map": [
          ["~", "./"]
          ["@", "./src"]
        ]
      }
    }
	}
}

// .babelrc
{
  "presets": [
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-syntax-jsx"
  ],
  "sourceType": "module"
}

server 例子

// package.json
{
	"devDependencies": {
    "@typescript-eslint/eslint-plugin": "x.x.x",
    "@typescript-eslint/parser": "x.x.x",
    "eslint": "x.x.x",
    "eslint-plugin-import": "x.x.x"
  }
}

// .eslintrc
{
  "root": true,
  "env": {
    "es6": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "tsconfig.json",
  	"sourceType": "module",
  },
  "plugins": [
    "import",
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript"
  ]
}

常用插件

基础插件

• eslint-config-airbnb-base
  • 根据 airbnb 推荐的基础 eslint 检测 rule 配置
• eslint-plugin-import
  • 支持 es6+ 的 import/export 语法
• eslint-import-resolver-alias
  • 支持导出的 alias 解析。需要配置 import/resolver 属性
• @babel/eslint-parser | babbel-eslint（老版）
  • 允许 eslint 解析 babel 后的代码（需要配合 babel）
  • 需要配合 @babel/preset-react 解析器 @babel/plugin-syntax-jsx 插件等
• eslint-plugin-node
  • 用于给 node 的规则检测（服务端）

react 相关

• eslint-config-react-app
  • facebook 出的 create-react-app 内置的 rule，是下面的集成定制版
• eslint-plugin-react [react]
  • 让 eslint 支持 react 的语法规则
• eslint-plugin-react-hooks [react]
  • 支持 hooks 规则校验
• eslint-plugin-jsx-a11y [react]
  • 支持元素上的 a11y 语法
• eslint-config-airbnb [react]
  • 在 eslint-config-airbnb-base 基础上添加了 react/react-a11y 语法规则

ts 相关

• @typescript-eslint/parser [ts]
  • 让 eslint 支持 ts 解析
• @typescript-eslint/eslint-plugin [ts]
  • 支持 ts 语法检测
  • 注意：要与 @typescript-eslint/parser 版本相同，及对应的 typescript 插件
• eslint-import-resolver-typescript [ts]
  • 让 ts 和 eslint-plugin-import 正常工作（浏览器）

prettier 格式化

• eslint-plugin-prettier
  • 让 prettier 作为 eslint 的规则
• eslint-config-prettier
  • 防止 prettier 与 eslint 冲突