Typescript Compatible Airbnb Rules for ESLint

Enhances Airbnb's ESLint config with TypeScript support. Forked from the generous work of Matt Turnbull!

Warning

We currently do not support ESLint v9 or above. Please see issue #15 to track progress.

Setup

Installation

Start by installing both ESLint and Typescript in your project. Afterwards, you can install this config through your favorite package manager normally:

npm install -D @kesills/eslint-config-airbnb-typescript

If you're using React, you'll also need to install the appropriate Airbnb rules separately:

npm install -D eslint-config-airbnb

Note

While current versions of NPM will automatically install peer dependencies, if you're using a version of NPM prior to v7, you will need to install them manually instead:

npm install -D \
  eslint@^8.56 \
  eslint-config-airbnb-base \
  @stylistic/eslint-plugin \
  @typescript-eslint/eslint-plugin@^8 \
  @typescript-eslint/parser@^8

Configuration

Next, tell ESLint to extend from this configuration. And since we need to access type information, a tsconfig.json and some setup for @typescript-eslint/parser to recognize it are required.

Important

These instructions assume you are on the current LTS version of Node. If you are using a Node version older than v20, you will need to update any references to import.meta.dirname to use a __dirname workaround instead.

Recommended - Flat Config

Since we don't yet have first-class support for the new flat configuration format (see #14 for progress), ESLint's compatability utility is needed:

npm install -D @eslint/eslintrc

Then you'll want to set up your eslint.config.js something like this:

import { FlatCompat } from '@eslint/eslintrc';

const compat = new FlatCompat({
  baseDirectory: import.meta.dirname,
});

export default [
  // Without React
  ...compat.extends('airbnb-base'),
  ...compat.extends('@kesills/airbnb-typescript/base'),

  // With React
  ...compat.extends('airbnb'),
  ...compat.extends('@kesills/airbnb-typescript'),

  // Either way
  {
    languageOptions: {
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
];

Legacy Config

If you're stuck on the legacy .eslintrc format, you'll want to set up your .eslintrc.js similar to this:

module.exports = {
  extends: [
    // Without React
    'airbnb-base',
    '@kesills/airbnb-typescript/base'

    // With React
    'airbnb',
    '@kesills/airbnb-typescript'
  ],
  parserOptions: {
    projectService: true,
    tsconfigRootDir: import.meta.dirname,
  },
};

Running ESLint

Once set up, you can use ESLint as you would normally. In the root directory of your project, run:

npx eslint . --ext .js,.jsx,.ts,.tsx

ESLint will lint all .js, .jsx, .ts, and .tsx files within the current folder, and output results to your terminal.

You can also get results in realtime inside most IDEs via a plugin. See ESLint's integration documentation for more details.

FAQ

I get this error when running ESLint: "The file must be included in at least one of the projects provided"

This means you are attempting to lint a file that tsconfig.json doesn't include. Please refer to the typescript-eslint FAQ on how best to resolve this.

I wish this config would support [...]

This config simply enhances the Airbnb with TypeScript support. It's not a single config to cater for all TypeScript linting requirements. For additional functionality, alter your ESLint config file. For example:

import typescriptPlugin from 'typescript-eslint';

// ...

export default [
  ...compat.extends('airbnb-base'),
  ...compat.extends('airbnb/hooks'),
  ...compat.extends('@kesills/airbnb-typescript/base'),
  ...typescriptPlugin.configs.recommendedTypeChecked,
  ...typescriptPlugin.configs.stylisticTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
];

I use Prettier / StandardJS, how do I remove formatting rules?

There are a couple of approaches to achieve this.

Configuration

Since the base Airbnb configs still use ESLint's legacy formatting rules, you can extend eslint-config-prettier to disable them. However, with ESLint deprecating all formatting rules and typescript-eslint outright removing them, all our styling rules now originate from ESLint Stylistic, which is not supported by the Prettier config (see upstream issue #283 to track progress).

Therefore, you'll need to disable all these rules manually. Luckily, this is pretty easy with flat configurations:

import stylistic from '@stylistic/eslint-plugin';

export default [
  // ...

  {
    rules: Object.fromEntries(
      Object.keys(stylisticPlugin.configs['all-flat'].rules ?? {}).map((key) => [key, 'off']),
    ),
  },
];

Combined Tooling

Another approach is to use prettier-eslint, which keeps the styling rules enabled and just combines the execution of ESLint and Prettier so the conflicts aren't user-facing. The CLI tool itself can be found under prettier-eslint-cli.

Why is import/no-unresolved disabled?

Two reasons:

1. It requires additional configuration, which may be different for monorepo's, webpack usage, etc
2. The rule offers little value in a TypeScript world, as the TypeScript compiler will catch these errors

If you would like to enable this rule, then:

• Enable the rule within your config: 'import/no-unresolved': 'error'
• Install and configure the TypeScript import resolver: eslint-import-resolver-typescript

Credits

Originally authored by Matt Turnbull. Forked and maintained by Kenneth Sills.

A big thank you to all contributors!