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

Vernon

Please give a minimal reproducible example - what do you mean "cannot make it work", exactly? What's the setup, and what happens when you try to lint? – Crane

@jonrsharpe: done – Vernon

Did you try installing the plugin it says it can't find? – Crane

No, because according to npmjs.com/package/eslint-config-airbnb-typescript eslint-plugin-jsx-a11y should be needed only if I use React. I don't use React and it seems to me that I could installed something incorrectly earlier. But I will try to install it. Update: I added links to the packages. – Vernon

I installed: npm install -D eslint-plugin-jsx-a11y@6 eslint-plugin-react@7 eslint-plugin-react-hooks@2 i.e. the packages required if I want to support React and it helped. I don't need React but thanks to this I found the original reason - I copied configuration from the documentation incorrectly. – Vernon

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.

Vernon

Answer 2

in .eslintrc.yaml, add

root: true

Polyphony

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Misti