Airbnb ESLint Config with TypeScript and Prettier

5.0.0 · active · verified Sun Apr 19

eslint-config-airbnb-typescript-prettier is an ESLint shareable configuration designed to streamline the setup of linting for TypeScript projects by integrating the popular Airbnb JavaScript style guide with Prettier for consistent code formatting. Currently at version 5.0.0, this package aims to reduce boilerplate and configuration overhead for developers. Its release cadence is generally aligned with updates to its upstream dependencies, including ESLint, Airbnb's base config, `@typescript-eslint`, and Prettier itself, ensuring compatibility and leveraging the latest best practices. A key differentiator is its pre-configured merging of these complex tools, saving significant time in initial project setup and ongoing maintenance compared to configuring each tool individually. It handles the often-tricky interoperability between ESLint's parser, TypeScript's syntax, and Prettier's formatting rules, providing a cohesive and opinionated development experience.

Common errors

```
Error: Failed to load parser '@typescript-eslint/parser' declared in 'airbnb-typescript-prettier'
```
cause The `@typescript-eslint/parser` package, a critical peer dependency, is either not installed or its version is incompatible.

fix Run `npm install --save-dev @typescript-eslint/parser` to ensure the parser is installed. Check `npm view eslint-config-airbnb-typescript-prettier peerDependencies` for compatible versions.
```
Parsing error: 'parserOptions.project' has been set for @typescript-eslint/parser.
```
cause ESLint's TypeScript parser requires `parserOptions.project` to correctly resolve type information, but it's either missing, misspelled, or points to an invalid `tsconfig.json` file.

fix Add or correct the `parserOptions` object in your `.eslintrc.js` file: `{ parserOptions: { project: './tsconfig.json' } }`, ensuring `tsconfig.json` exists at the specified path.
```
The "extends" option in .eslintrc.js has an invalid configuration for 'airbnb-typescript-prettier'.
```
cause The `eslint-config-airbnb-typescript-prettier` package is not installed in your project, or there is a typo in the `extends` array.

fix Verify the package is installed with `npm list eslint-config-airbnb-typescript-prettier` and run `npm install --save-dev eslint-config-airbnb-typescript-prettier` if it's missing. Double-check the spelling in your `.eslintrc.js`.
```
[eslint] Delete `␍` (`prettier/prettier`)
```
cause ESLint, via `eslint-plugin-prettier`, is detecting a formatting inconsistency (e.g., line endings, spacing) that Prettier would fix, indicating an unformatted file or a conflict in configuration.

fix Run `eslint --fix src/**/*.ts` (or your relevant files) to automatically fix the issue, or configure your IDE to run `eslint --fix` on save. Ensure your editor's Prettier settings (if any) are aligned with the project.
```
Error: You have used a rule which requires parserServices to be generated. You must therefore provide a value for the 'parserOptions.project' property for @typescript-eslint/parser.
```
cause A TypeScript-aware ESLint rule requires access to type information, but the `project` property is missing or improperly configured in `parserOptions`.

fix Add `parserOptions: { project: './tsconfig.json' }` to your `.eslintrc.js` and ensure that the specified `tsconfig.json` path is correct and accessible.

Warnings

breaking Version 5.0.0 of `eslint-config-airbnb-typescript-prettier` introduces updated peer dependency requirements. Ensure your `eslint`, `prettier`, and `typescript` installations meet the specified versions (e.g., `eslint: ^7.32.0 || ^8.2.0`, `prettier: ^1.18.2 || ^2.0.0`, `typescript: >=3.3.1`). Older versions may lead to conflicts or failed linting processes.
Fix: Update your `eslint`, `prettier`, and `typescript` packages to match the peer dependency range specified by `eslint-config-airbnb-typescript-prettier@5.0.0` using `npm install` or `yarn add`.
gotcha Omitting or incorrectly configuring `parserOptions.project` in your `.eslintrc.js` will prevent type-aware linting rules from working. This can lead to ESLint errors during startup or silent failure of critical TypeScript-specific checks.
Fix: Ensure your `.eslintrc.js` includes `parserOptions: { project: './tsconfig.json' }` and that the path to your `tsconfig.json` is correct and accessible from the ESLint configuration file.
gotcha When combining `eslint-config-airbnb-typescript-prettier` with other ESLint configurations, especially those involving Prettier, the order within the `extends` array in `.eslintrc.js` is critical. `eslint-config-prettier` (which is part of this config's chain) should always be the *last* item in the `extends` array to ensure it correctly disables conflicting ESLint rules.
Fix: Place `"airbnb-typescript-prettier"` as the last entry in your `extends` array, or ensure any custom Prettier-disabling configs are placed after other rule-defining configs.
gotcha Using `parserOptions.project` for type-aware linting can significantly increase ESLint's runtime performance, especially in large codebases, due to the need to load and parse the TypeScript project graph.
Fix: For faster linting in development, consider using `eslint-plugin-only-warn` or separating type-aware rules into a script that runs less frequently (e.g., CI/CD, pre-commit hook) or only on changed files.

Install

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

Imports

Configuration Extension
wrong:
```
extends: [require("eslint-config-airbnb-typescript-prettier")]
```
correct:
```
extends: "airbnb-typescript-prettier"
```
This string directly references the shareable configuration in your `.eslintrc.js` file's `extends` array, telling ESLint to load its rules, parser, and plugin settings.
TypeScript Project Options
wrong:
```
parserOptions: { tsconfigRootDir: __dirname, project: ['./tsconfig.json'] }
```
correct:
```
parserOptions: { project: "./tsconfig.json" }
```
For type-aware linting rules provided by `@typescript-eslint`, you must specify the `project` option within `parserOptions` to point to your `tsconfig.json`. This is often required for the more advanced rules.
Direct Module Import
wrong:
```
import config from 'eslint-config-airbnb-typescript-prettier';
```
correct:
This package is an ESLint shareable config, designed to be referenced by name in `.eslintrc.js` files via the `extends` property, not directly imported into JavaScript/TypeScript code for programmatic use.

Quickstart

Installs the package and its peer dependencies, then configures ESLint to use the Airbnb TypeScript Prettier ruleset with project-specific TypeScript parsing.

npm install --save-dev typescript eslint prettier eslint-config-airbnb-typescript-prettier

// .eslintrc.js
module.exports = {
  extends: "airbnb-typescript-prettier",
  parserOptions: {
    project: "./tsconfig.json"
  },
  rules: {
    // Override/add custom rules here if needed
    // e.g., 'import/prefer-default-export': 'off'
  }
};

// tsconfig.json (minimal example)
{
  "compilerOptions": {
    "target": "es2021",
    "module": "commonjs",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

view raw JSON →