如何使用ESLint TypeScript Airbnb配置？ [英] How to use ESLint TypeScript Airbnb configuration?

问题描述

我尝试安装用于TypeScript的ESLint Airbnb配置几天了，我无法正常工作。有人可以给出工作配置的安装和配置步骤吗？

I try to install and use ESLint Airbnb configuration for TypeScript for several days and I cannot make it work. Can somebody give installation and configuration steps of a working configuration, please?

下面是我尝试此代码使用Airbnb约定。

Below is one of my attempts to lint this code base using Airbnb convention.

Airbnb配置还不支持 Typescript ESLint 3.0，所以我将安装TypeScript ESLint 2.34。
Typescript ESLint 2.34目前还不支持ESLint 7，因此我将安装ESLint6.x。
Typescript ESLint 2.34目前尚不支持Typescript 3.8，因此我将安装Typescript 3.7.5。

Airbnb configuration doesn't support Typescript ESLint 3.0 yet, so I will install TypeScript ESLint 2.34. Typescript ESLint 2.34 doesn't support ESLint 7 yet, so I will install ESLint 6.x. Typescript ESLint 2.34 doesn't support Typescript 3.8 yet, so I will install Typescript 3.7.5.

我将安装Typescript：

I install Typescript:

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

我安装了ESLint和TypeScript ESLint：

I install ESLint and TypeScript ESLint:

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

我安装了Airbnb配置：

I install Airbnb configuration:

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

我创建.eslintrc.js文件，其内容为：

I create .eslintrc.js file with the content:

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

推荐答案

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

The cause of the problem was that I incorrectly copied the configuration from the eslint-config-airbnb-typescript package documentation.

我更改了扩展名：['airbnb-typescript'] 更改为扩展名：['airbnb-typescript / base'] ，现在ESLint可以使用了。

I changed extends: ['airbnb-typescript'] to extends: ['airbnb-typescript/base'] and now ESLint works.

这篇关于如何使用ESLint TypeScript Airbnb配置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！