TypeScript 项目 Airbnb 语法风格 ESLint 配置

TypeScript 项目 Airbnb 语法风格 ESLint 配置

1. 配置

安装：

npm i -D eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin@^6.0.0 @typescript-eslint/parser@^6.0.0

配置：

• .eslintrc.js:

  module.exports = {
    root: true,
    env: {
      node: true,
      browser: true,
    },
    extends: [
      'airbnb-base',
      'airbnb-typescript/base',
    ],
  
    parserOptions: {
      project: './tsconfig.json',
    },
  };
  

• tsconfig.json:

  {
    // ...
  
    "include": [
      "src/**/*.ts",
      "src/**/*.tsx",
      "src/**/*.vue",
      "tests/**/*.ts",
      "tests/**/*.tsx",
  
      "./*.js", // 匹配不到 `.eslintrc.js`，但可以匹配到 `webpack.config.js`
      "./.eslintrc.js", // 重点，缺少它会报如下错误
    ]
  }
  

错误：

Parsing error: ESLint was configured to run on `/.eslintrc.js` using `parserOptions.project`: /tsconfig.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file
Process finished with exit code -1

注意：

• webstorm 上修改完 tsconfig.json 的 include 属性的值，需要重启才会生效

2. 参考

• eslint-config-airbnb-typescript
• Solve parserOptions.project bug with Typescript and ESLint