How to use ESLint TypeScript Airbnb configuration?

Question

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?

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

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.

I install Typescript:

npm init -y
npm i -D [email protected] --save-exact

I install ESLint and TypeScript ESLint:

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

I install Airbnb configuration:

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

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

I try to lint my code:

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

but I get:

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

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

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