如何使用 ESLint TypeScript Airbnb 配置？答案

【问题标题】：How to use ESLint TypeScript Airbnb configuration?如何使用 ESLint TypeScript Airbnb 配置？
【发布时间】：2020-09-09 19:25:28
【问题描述】：

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

以下是我尝试使用 Airbnb 约定 lint this code base 的尝试之一。

Airbnb configuration 还不支持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。

我安装 Typescript：

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
  }
};

我尝试 lint 我的代码：

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

【问题讨论】：

请给minimal reproducible example - 你是什么意思“不能让它工作”，究竟是什么？设置是什么，当您尝试 lint 时会发生什么？
@jonrsharpe：完成
您是否尝试安装它说找不到的插件？
不，因为根据npmjs.com/package/eslint-config-airbnb-typescript eslint-plugin-jsx-a11y 只有在我使用 React 时才需要。我不使用 React，在我看来，我之前可能会错误地安装一些东西。但我会尝试安装它。更新：我添加了包的链接。
我安装了：npm install -D eslint-plugin-jsx-a11y@6 eslint-plugin-react@7 eslint-plugin-react-hooks@2，即如果我想支持 React 所需的软件包并且它有所帮助。我不需要 React，但由于这个原因，我找到了最初的原因 - 我错误地从文档中复制了配置。

标签： typescript eslint eslint-config-airbnb typescript-eslint

【解决方案1】：

在.eslintrc.yaml中，添加

根：真

对我有用

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

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

我将 extends: ['airbnb-typescript'] 更改为 extends: ['airbnb-typescript/base']，现在 ESLint 可以工作了。

【讨论】：

感谢您发布答案！