How to Migrate from TSLint to Airbnb ESLint Config: A Complete Guide

You can migrate from TSLint to Airbnb’s ESLint configuration by uninstalling TSLint, installing eslint-config-airbnb or eslint-config-airbnb-base with their peer dependencies, and creating an .eslintrc file that extends the preset while adding TypeScript parser support if needed.

When the TSLint project was officially deprecated in favor of ESLint, teams using TypeScript needed a robust replacement. The airbnb/javascript repository provides battle-tested, opinionated ESLint configurations that support both JavaScript and TypeScript projects. Learning how to migrate from TSLint to Airbnb ESLint config ensures your codebase benefits from active maintenance and a unified linting toolchain.

Why Migrate from TSLint to ESLint?

TSLint’s deprecation left a gap in the TypeScript linting ecosystem. The Airbnb ESLint configurations fill this gap while providing distinct advantages over maintaining legacy TSLint rules:

• Active maintenance: The configs in packages/eslint-config-airbnb/ and packages/eslint-config-airbnb-base/ are kept current with the latest ESLint releases and ECMAScript standards.
• Unified tooling: One linter handles both JavaScript and TypeScript, simplifying CI pipelines and editor integrations.
• Rich plugin ecosystem: Seamless integration with eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y.
• Extensibility: The preset uses plain JavaScript objects (module.exports) that you can layer with custom rules without modifying core files.

Phase 1: Remove TSLint and Install Dependencies

The first step in your migration is completely removing the deprecated TSLint toolchain and installing the Airbnb ESLint preset with its required peer dependencies.

Uninstall TSLint and Legacy Packages

Remove TSLint and any custom TSLint rules from your project:

npm uninstall tslint tslint-react @typescript-eslint/tslint-plugin

Delete any tslint.json or tslint.yaml files to prevent conflicts.

Install ESLint and Airbnb Configs

Install the core ESLint package along with the Airbnb configuration. For React projects, use eslint-config-airbnb. For Node.js or vanilla JavaScript projects, use eslint-config-airbnb-base. The main config’s README specifies exact peer dependencies you must install, including eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y.

# For React projects

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

# For non-React projects

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

Phase 2: Configure ESLint to Extend Airbnb Presets

After installation, create an ESLint configuration file that extends the Airbnb preset. The preset’s entry points expose plain JavaScript objects that ESLint reads directly.

Understanding the Config Architecture

The Airbnb ESLint configuration follows a hierarchical structure defined in the source code:

• packages/eslint-config-airbnb/index.js: The main entry point for React projects. It extends eslint-config-airbnb-base and adds React-specific rules by referencing internal rule files (./rules/react, ./rules/react-a11y).
• packages/eslint-config-airbnb-base/index.js: The foundation for all projects. It aggregates core rule groups including best-practices, errors, node, style, variables, es6, imports, and strict.

Both files export a configuration object (module.exports = { … }) that you can extend in your local .eslintrc file.

Setting Up the Configuration File

Create an .eslintrc.json file in your project root. For a React project:

{
  "extends": [
    "airbnb",
    "airbnb/hooks"
  ],
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "rules": {
    "no-console": "off",
    "import/prefer-default-export": "off"
  }
}

The airbnb/hooks extension adds React Hooks rules as defined in the Airbnb documentation.

Configuring for TypeScript Projects

Since the Airbnb preset does not bundle TypeScript support, you must manually add the TypeScript parser and plugin. These integrate seamlessly alongside the Airbnb rules.

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "airbnb-base",
    "plugin:@typescript-eslint/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "rules": {
    "@typescript-eslint/no-unused-vars": ["error"],
    "no-use-before-define": "off"
  }
}

Install the TypeScript dependencies if you haven't already:

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

Phase 3: Fine-Tune Rules and Validate

With the configuration in place, run ESLint against your codebase to identify violations:

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

Review the output and adjust rules that clash with your existing code style. Common overrides include disabling no-console for development environments or adjusting import/no-extraneous-dependencies for test files.

For gradual migration, you can start with warnings instead of errors:

{
  "rules": {
    "no-console": "warn",
    "react/prop-types": "off"
  }
}

Summary

• Uninstall TSLint completely before installing ESLint to avoid configuration conflicts.
• Choose the correct preset: eslint-config-airbnb for React (located at packages/eslint-config-airbnb/index.js) or eslint-config-airbnb-base for plain JavaScript (located at packages/eslint-config-airbnb-base/index.js).
• Add TypeScript support manually using @typescript-eslint/parser and @typescript-eslint/eslint-plugin since the Airbnb config focuses on core JavaScript rules.
• Extend the preset in your .eslintrc file and override specific rules to match your codebase’s needs.
• Validate the migration by running ESLint across all file extensions (.js, .ts, .tsx).

Frequently Asked Questions

Does the Airbnb ESLint config support TypeScript out of the box?

No, the Airbnb configuration focuses on core JavaScript and React rules. You must manually install @typescript-eslint/parser and @typescript-eslint/eslint-plugin to parse TypeScript files and enable TypeScript-specific linting rules. These tools work alongside the Airbnb preset without conflicts.

What is the difference between eslint-config-airbnb and eslint-config-airbnb-base?

eslint-config-airbnb (defined in packages/eslint-config-airbnb/index.js) extends the base config and adds React, JSX, and React Hooks rules. eslint-config-airbnb-base (defined in packages/eslint-config-airbnb-base/index.js) contains only the core JavaScript rules covering best practices, style, ES6, and imports. Use the base config for Node.js or vanilla JavaScript projects.

How do I handle TSLint rules that have no ESLint equivalent?

Most TSLint rules have ESLint equivalents in the core ESLint ruleset or @typescript-eslint plugins. If you used custom TSLint rules, search for ESLint community plugins that provide similar functionality, or implement custom ESLint rules using the rules object in your .eslintrc configuration.

Can I use the Airbnb config with Prettier?

Yes. Install eslint-config-prettier and add it as the last item in your extends array to disable Airbnb rules that conflict with Prettier formatting. The order matters: "extends": ["airbnb", "prettier"] ensures Prettier overrides take precedence.

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