How to Use Airbnb Style Guide with TypeScript: Complete Configuration Guide

Use the community-maintained eslint-config-airbnb-typescript package alongside the official eslint-config-airbnb to layer TypeScript parser support and type-aware rules on top of Airbnb’s JavaScript style conventions.

The airbnb/javascript repository defines one of the most widely adopted JavaScript style guides in the industry. However, the official ESLint configurations—located in packages/eslint-config-airbnb/ and packages/eslint-config-airbnb-base/—are built for plain JavaScript only. To use Airbnb style guide with TypeScript, you must extend the core config with a TypeScript-aware wrapper that integrates @typescript-eslint/parser and @typescript-eslint/eslint-plugin.

Understanding the Limitations of the Official Airbnb Config

The official Airbnb configuration packages do not include TypeScript support. According to the source code in packages/eslint-config-airbnb/index.js and packages/eslint-config-airbnb-base/index.js, these configs rely on the standard Espree parser and core ESLint rules designed for ECMAScript. They contain no configuration for .ts or .tsx file extensions and provide no support for TypeScript-specific syntax like type annotations, interfaces, or enums.

Installing Required Dependencies

To lint TypeScript with Airbnb rules, you must install three components: the base Airbnb config, the TypeScript wrapper, and the TypeScript ESLint toolchain.

Install the Core Airbnb ESLint Config

Use npx install-peerdeps to install eslint-config-airbnb (or eslint-config-airbnb-base for non-React projects) along with its peer dependencies:

npx install-peerdeps --dev eslint-config-airbnb

This command installs eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y as specified in the packages/eslint-config-airbnb/README.md.

Add the TypeScript Wrapper and Parser

Next, install the community wrapper and the TypeScript parser:

npm install --save-dev eslint-config-airbnb-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

The eslint-config-airbnb-typescript package acts as a thin layer that configures ESLint to use @typescript-eslint/parser while preserving all Airbnb stylistic rules.

Configuring ESLint for TypeScript

Create or update your .eslintrc.json file to extend both the Airbnb base and the TypeScript overlay:

{
  "extends": [
    "airbnb",
    "airbnb-typescript"
  ],
  "parserOptions": {
    "project": "./tsconfig.json",
    "sourceType": "module"
  }
}

The airbnb-typescript entry automatically sets the parser to @typescript-eslint/parser and enables type-aware linting by referencing your tsconfig.json.

Setting Up Your TypeScript Configuration

Ensure your tsconfig.json includes the files you want to lint:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

Running ESLint on TypeScript Files

Execute the linter against your TypeScript source files:

npx eslint "src/**/*.{ts,tsx}"

Customizing Rules for TypeScript Projects

While eslint-config-airbnb-typescript merges Airbnb preferences with TypeScript best practices, you may need to override specific rules. Add a rules section to your ESLint config:

{
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-explicit-any": "warn"
  }
}

Summary

• The official airbnb/javascript repository provides only JavaScript ESLint configurations via packages/eslint-config-airbnb/index.js and packages/eslint-config-airbnb-base/index.js.
• To use Airbnb style guide with TypeScript, install eslint-config-airbnb-typescript as a wrapper around the official config rather than modifying the source directly.
• Always specify parserOptions.project pointing to your tsconfig.json to enable type-aware linting rules.
• Use npx install-peerdeps to ensure all peer dependencies of the Airbnb config are correctly installed.
• Override specific @typescript-eslint rules in your .eslintrc.json when project requirements differ from strict defaults.

Frequently Asked Questions

Can I use the Airbnb style guide with TypeScript without installing React dependencies?

Yes. Install eslint-config-airbnb-base instead of eslint-config-airbnb, then extend "airbnb-base" and "airbnb-typescript/base" in your ESLint configuration. This provides the core JavaScript rules without React-specific plugins, as implemented in packages/eslint-config-airbnb-base/index.js.

Why doesn't the official Airbnb repository include TypeScript support?

The Airbnb JavaScript Style Guide maintains a strict separation of concerns. The official configs in packages/eslint-config-airbnb/ focus on standard JavaScript and React patterns. TypeScript support is delegated to community-maintained wrappers to avoid forcing TypeScript dependencies on pure JavaScript projects while keeping the core configs lightweight.

Do I need to modify the Airbnb config files directly to add TypeScript support?

No. Modifying files in node_modules or forking packages/eslint-config-airbnb/index.js creates maintenance overhead and prevents clean updates. Instead, use the eslint-config-airbnb-typescript wrapper, which imports the official config and programmatically adds TypeScript parser settings and rule overrides while keeping the original intact.

What version of TypeScript is compatible with eslint-config-airbnb-typescript?

The wrapper supports TypeScript versions compatible with @typescript-eslint/parser, typically TypeScript 4.0 and above. Check the peer dependencies of your installed @typescript-eslint packages to confirm compatibility with your project's TypeScript version, as type-aware linting requires alignment between the parser and the TypeScript compiler.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}