How to Extend Airbnb ESLint Config for TypeScript Projects: A Complete Setup Guide

Extend the eslint-config-airbnb or eslint-config-airbnb-base package by installing @typescript-eslint/parser and @typescript-eslint/eslint-plugin, then configure the parser and resolve rule conflicts using the overrides section for TypeScript files.

The airbnb/javascript repository provides industry-standard ESLint shareable configs that enforce strict JavaScript style guidelines. To extend Airbnb ESLint config for TypeScript projects, you must integrate the TypeScript parser and plugin while resolving specific rule conflicts between JavaScript and TypeScript syntax. This guide demonstrates the exact configuration patterns and source file references needed to combine Airbnb's rules with full TypeScript support.

Understanding the Airbnb ESLint Package Structure

The Airbnb configuration ships as two distinct npm packages located in the repository's packages/ directory. Both export configuration objects that aggregate ESLint's recommended rules with Airbnb's custom rule files.

eslint-config-airbnb-base

The eslint-config-airbnb-base package, defined in [packages/eslint-config-airbnb-base/index.js](https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/index.js), contains the core JavaScript rules without any React-specific linting. This package extends ESLint's recommended rules and applies strict style enforcement for vanilla JavaScript projects.

eslint-config-airbnb

The full eslint-config-airbnb package, defined in [packages/eslint-config-airbnb/index.js](https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb/index.js), extends the base configuration to include React and accessibility rules. It specifically imports definitions from [packages/eslint-config-airbnb/rules/react.js](https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb/rules/react.js) and optional React Hooks rules from [packages/eslint-config-airbnb/rules/react-hooks.js](https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb/rules/react-hooks.js).

Installing TypeScript Dependencies

Airbnb's configs target only plain JavaScript. You must install two additional packages to parse TypeScript syntax and enable TypeScript-specific linting rules.

Run the following commands to install the required dependencies:

# Install Airbnb config and its peer dependencies (includes React rules)

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

# Install TypeScript parser and plugin

npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

Configuring ESLint for TypeScript Projects

Create or update your .eslintrc.json to extend the Airbnb config while specifying the TypeScript parser. The configuration must point to your tsconfig.json for type-aware rules and handle import resolution for .ts and .tsx extensions.

Basic Configuration Structure

Add the TypeScript parser and plugin to your configuration:

{
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "parserOptions": {
    "project": "./tsconfig.json",
    "sourceType": "module"
  }
}

Resolving TypeScript Imports

Configure the import/resolver setting to allow eslint-plugin-import (included with Airbnb) to resolve TypeScript modules correctly:

{
  "settings": {
    "import/resolver": {
      "node": { "extensions": [".js", ".jsx", ".ts", ".tsx"] },
      "typescript": {}
    }
  }
}

Handling Rule Conflicts with Overrides

Airbnb's JavaScript rules often conflict with TypeScript equivalents. Use the overrides section to disable JavaScript rules and enable TypeScript-specific replacements only for .ts and .tsx files:

{
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "rules": {
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": ["error"]
      }
    }
  ]
}

React vs. Non-React Project Configurations

Select the appropriate Airbnb config extension based on whether your TypeScript project uses React.

For React TypeScript Projects

Extend "airbnb" and "airbnb/hooks" to include React and Hooks rules. You must also configure the build system to allow JSX syntax in .tsx files:

{
  "rules": {
    "react/jsx-filename-extension": ["error", { "extensions": [".tsx"] }],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  }
}

For Non-React TypeScript Projects

Replace "airbnb" with "airbnb/base" in your extends array to exclude React-specific rules:

{
  "extends": [
    "airbnb/base",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

Summary

• The airbnb/javascript repository provides eslint-config-airbnb (React included) and eslint-config-airbnb-base (vanilla JS) as defined in their respective index.js files.
• TypeScript projects require @typescript-eslint/parser to replace the default parser and @typescript-eslint/eslint-plugin for type-aware rules.
• Set parserOptions.project to the path of your tsconfig.json to enable type-checking capabilities in ESLint rules.
• Configure settings.import/resolver with TypeScript extensions to resolve .ts and .tsx import paths correctly.
• Use the overrides section to disable conflicting JavaScript rules like no-use-before-define and enable their TypeScript equivalents only for TypeScript files.

Frequently Asked Questions

Can I use Airbnb ESLint config with TypeScript without React?

Yes. Replace "airbnb" with "airbnb/base" in your extends array. The base configuration, located at packages/eslint-config-airbnb-base/index.js, provides all JavaScript style rules without requiring React, JSX, or eslint-plugin-react dependencies.

Why do I need to disable no-use-before-define when using TypeScript?

Airbnb's JavaScript no-use-before-define rule incorrectly flags valid TypeScript declaration patterns and type scoping. You must disable the base rule and enable @typescript-eslint/no-use-before-define instead, which understands TypeScript's declaration merging and enum member scoping.

Do I need to install eslint-plugin-import separately for TypeScript?

No. When you install eslint-config-airbnb using npx install-peerdeps, eslint-plugin-import installs automatically as a peer dependency. However, you must explicitly configure the import resolver in settings.import/resolver to recognize .ts and .tsx file extensions.

What is the difference between airbnb and airbnb/hooks configurations?

The airbnb config includes React component rules from packages/eslint-config-airbnb/rules/react.js, while airbnb/hooks adds additional rules for React Hooks from packages/eslint-config-airbnb/rules/react-hooks.js. Include both in your extends array if your TypeScript project uses the React Hooks API.

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