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

> Seamlessly extend Airbnb ESLint config for TypeScript projects. Install necessary packages, configure the parser, and resolve conflicts for a smooth setup.

- Repository: [Airbnb/javascript](https://github.com/airbnb/javascript)
- Tags: how-to-guide
- Published: 2026-02-24

---

**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/main/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/main/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/main/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/main/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:

```bash

# 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`](https://github.com/airbnb/javascript/blob/main/.eslintrc.json) to extend the Airbnb config while specifying the TypeScript parser. The configuration must point to your [`tsconfig.json`](https://github.com/airbnb/javascript/blob/main/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:

```json
{
  "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:

```json
{
  "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:

```json
{
  "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:

```json
{
  "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:

```json
{
  "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`](https://github.com/airbnb/javascript/blob/main/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`](https://github.com/airbnb/javascript/blob/main/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`](https://github.com/airbnb/javascript/blob/main/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`](https://github.com/airbnb/javascript/blob/main/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`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/rules/react-hooks.js). Include both in your `extends` array if your TypeScript project uses the React Hooks API.