Airbnb ESLint Config for TypeScript

Common errors

• The file must be included in at least one of the projects provided.

  cause ESLint is attempting to lint a file that is not covered by the `include` array in the `tsconfig.json` referenced by `parserOptions.project`.
  fix Create a `tsconfig.eslint.json` that extends your main `tsconfig.json` and explicitly includes all files you intend to lint (e.g., `"include": ["src/**/*.ts", "src/**/*.js", "test/**/*.ts"]`). Then update your `.eslintrc` to `parserOptions: { project: './tsconfig.eslint.json' }`.

• ESLint: Cannot find module '@typescript-eslint/eslint-plugin/package.json' or its corresponding type declarations.

  cause One or more of the required peer dependencies for `eslint-config-airbnb-typescript` (especially `@typescript-eslint/eslint-plugin` or `@typescript-eslint/parser`) are either not installed or are of an incompatible version.
  fix Ensure all peer dependencies are correctly installed with compatible versions. For v18.0.0, this means `npm install --save-dev @typescript-eslint/eslint-plugin@^7.0.0 @typescript-eslint/parser@^7.0.0 eslint@^8.56.0`.

• ESLint: Cannot read config file: ./.eslintrc.js

  cause Incorrect ESLint configuration file format or path, or missing required base config like `eslint-config-airbnb`.
  fix Verify that your `.eslintrc` file is valid JSON or CommonJS, correctly extends `airbnb` (or `airbnb-base`) before `airbnb-typescript`, and that the base Airbnb config is installed as a dependency.

Warnings

• breaking Version 18.0.0 introduced a breaking change by upgrading peer dependencies. You must update `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` to `^7.0.0` or above, and `eslint` to `^8.56.0` or above.
  Fix: Run `npm install --save-dev @typescript-eslint/eslint-plugin@^7.0.0 @typescript-eslint/parser@^7.0.0 eslint@^8.56.0`
• breaking Upgrading to version 17.0.0 requires updating `@typescript-eslint/eslint-plugin` to `^5.13.0` due to a peer dependency bump related to the `space-before-blocks` rule.
  Fix: Run `npm install --save-dev @typescript-eslint/eslint-plugin@^5.13.0`
• breaking Version 16.0.0 introduced breaking changes by updating to ESLint v8 and requiring `eslint-config-airbnb` dependency to `^19.0.0` (or `eslint-config-airbnb-base` to `^15.0.0`).
  Fix: Run `npm install --save-dev eslint@^8.0.0 eslint-config-airbnb@^19.0.0` (or `eslint-config-airbnb-base@^15.0.0`)
• gotcha This package relies heavily on its peer dependencies. Failure to install the correct versions of `eslint`, `@typescript-eslint/eslint-plugin`, and `@typescript-eslint/parser` will result in errors or incorrect linting behavior.
  Fix: Always install peer dependencies explicitly: `npm install --save-dev eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin@^7.0.0 @typescript-eslint/parser@^7.0.0 eslint@^8.56.0` (adjust versions as per latest major release).
• gotcha When using this config, you must set `parserOptions.project` in your ESLint configuration to the path of your `tsconfig.json` file to enable type-aware linting rules.
  Fix: Add `parserOptions: { project: './tsconfig.json' }` to your `.eslintrc` file. For complex project structures or monorepos, consider creating a dedicated `tsconfig.eslint.json`.

Install

• npm install eslint-config-airbnb-typescript npm
• yarn add eslint-config-airbnb-typescript yarn
• pnpm add eslint-config-airbnb-typescript pnpm

Imports

• airbnb-typescript
  wrong:

  require('eslint-config-airbnb-typescript')

  correct:

  extends: ['airbnb-typescript']

  This is an ESLint configuration, not a JS module. It is referenced in the 'extends' array of your .eslintrc file, not imported via `import` or `require`.
• airbnb-typescript/base
  wrong:

  extends: ['airbnb-typescript/base.js']

  correct:

  extends: ['airbnb-typescript/base']

  Use this path in your ESLint config's 'extends' array when you do not need React-specific rules. It configures the non-React version of the Airbnb style guide for TypeScript.
• parserOptions.project
  wrong:

  parserOptions: { tsconfigRootDir: __dirname, project: ['./tsconfig.json'] }

  correct:

  parserOptions: { project: './tsconfig.json' }

  The `project` option within `parserOptions` is crucial for ESLint to understand your TypeScript project context, enabling type-aware linting rules. Ensure it points to your main `tsconfig.json` or a dedicated `tsconfig.eslint.json`.

Quickstart

This quickstart demonstrates how to install the package and its peer dependencies, configure your `.eslintrc` file to extend the Airbnb TypeScript rules (with React support), and set up the `parserOptions.project` for type-aware linting.

npm install --save-dev eslint-config-airbnb-typescript \
            @typescript-eslint/eslint-plugin@^7.0.0 \
            @typescript-eslint/parser@^7.0.0 \
            eslint@^8.56.0 \
            eslint-config-airbnb # or eslint-config-airbnb-base

// .eslintrc.cjs (or .js)
module.exports = {
  extends: [
    'airbnb', // or 'airbnb-base' if no React
    'airbnb-typescript'
  ],
  parserOptions: {
    project: './tsconfig.json' // Path to your TypeScript config
  },
  root: true,
  env: {
    node: true,
    browser: true,
    es2021: true
  }
};

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2021",
    "module": "esnext",
    "lib": ["dom", "es2021"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    // ... other compiler options
  },
  "include": ["src/**/*", ".eslintrc.cjs"]
}

// package.json script for linting
// "lint": "eslint . --ext .js,.jsx,.ts,.tsx"