如何使用 ESLint TypeScript Airbnb 配置？

Question

我尝试为 TypeScript安装和使用ESLint Airbnb 配置几天，但我无法使其工作。有人可以提供工作配置的安装和配置步骤吗？

下面是我尝试使用 Airbnb 约定整理此代码库的尝试之一。

Airbnb 配置尚不支持Typescript ESLint 3.0，所以我将安装 TypeScript ESLint 2.34。Typescript ESLint 2.34 还不支持 ESLint 7，所以我会安装 ESLint 6.x。Typescript ESLint 2.34 还不支持 Typescript 3.8，所以我会安装 Typescript 3.7.5。

我安装打字稿：

npm init -y
npm i -D typescript@3.7.5 --save-exact

我安装了 ESLint 和 TypeScript ESLint：

npm i -D eslint@6 @typescript-eslint/parser@2 @typescript-eslint/eslint-plugin@2

我安装Airbnb配置：

npm i -D eslint-config-airbnb-typescript@7 eslint-plugin-import@2

我使用以下内容创建 .eslintrc.js 文件：

module.exports = {
  root: true,

  //required!; use the previously installed parser; it allows ESLint to understand
  //TypeScript syntax; it converts TypeScript into an ESTree-compatible form so it
  //can be used in ESLint
  parser: '@typescript-eslint/parser',               

  parserOptions: {
    project: ['./tsconfig.json'],  //required for "type-aware linting"
  },

  plugins: [
    //load the previously installed plugin; allows me to use the rules within my codebase
    '@typescript-eslint',
  ],

  extends: [  // 'eslint-config-' can be ommited ex. in eslint-config-standard      

    //enable all ESLint rules (for example to explore); todo: what with Typescipt?
    //'eslint:all',

    //ESLint's inbuilt "recommended" config - a small, sensible set of rules
    //'eslint:recommended',

    //disables a few of the recommended rules from the 'eslint:recommended' that
    //are already covered by TypeScript's typechecker
    //'plugin:@typescript-eslint/eslint-recommended',

    //Typescript ESLint "recommended" config - it's just like eslint:recommended,
    //except it only turns on rules from our TypeScript-specific plugin
    //'plugin:@typescript-eslint/recommended',

    //"type-aware linting" - rules reporting errors based on type information
    //recommended; takes longer if run from CMD for large project
    //see: https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/TYPED_LINTING.md
    //'plugin:@typescript-eslint/recommended-requiring-type-checking',

    //if I use it, then comment all above extensions i.e. 'eslint:recommended',
    //'plugin:@typescript-eslint/eslint-recommended',
    //and 'plugin:@typescript-eslint/recommended'
    'airbnb-typescript',
  ],

  rules: {
    //can be configured later
  }
};

我尝试整理我的代码：

D:\workspace\iw-components>npx eslint . --ext .ts

但我得到：

Failed to load plugin 'jsx-a11y' declared in '.eslintrc.js
 » eslint-config-airbnb-typescript
 » D:\workspace\iw-components\node_modules\eslint-config-airbnb\index.js
 » D:\workspace\iw-components\node_modules\eslint-config-airbnb\rules\react-a11y.js':
Cannot find module 'eslint-plugin-jsx-a11y'

Require stack:
- D:\workspace\iw-components\__placeholder__.js

Answer 1

问题的原因是我错误地从eslint-config-airbnb-typescript包文档中复制了配置。

我换extends: ['airbnb-typescript']到extends: ['airbnb-typescript/base']现在ESLint工作。