How to Integrate Airbnb ESLint Config with Prettier: Complete Setup Guide

To integrate Airbnb ESLint config with Prettier, install eslint-config-airbnb, eslint-config-prettier, and prettier, then extend "airbnb" followed by "prettier" in your ESLint configuration to disable conflicting formatting rules.

The airbnb/javascript repository provides one of the most widely adopted JavaScript style guides through its eslint-config-airbnb package. When you integrate Airbnb ESLint config with Prettier, you must resolve overlapping formatting rules to prevent the tools from conflicting. This guide walks through the exact installation steps and configuration order required based on the source code structure in the Airbnb repository.

Install the Required Dependencies

Start by installing the core packages. You need the Airbnb config, the Prettier config that disables conflicting ESLint rules, and Prettier itself.

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

Optionally, install eslint-plugin-prettier if you want Prettier to run as an ESLint rule and report formatting issues alongside code quality violations:

npm install --save-dev eslint-plugin-prettier

The eslint-config-airbnb package serves as the main entry point in the repository at packages/eslint-config-airbnb/index.js, where it extends the base configuration and React-specific rule sets.

Configure ESLint to Extend Airbnb and Prettier

The extension order in your ESLint configuration critically matters. You must extend "prettier" after "airbnb" so that it overrides and disables the formatting rules that clash with Prettier.

{
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "prettier"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

If you installed eslint-config-airbnb-base instead for a non-React project, use "airbnb-base" in the extends array.

Understanding the Config Structure

The Airbnb configuration layers multiple rule sets defined in the repository source. The main config at packages/eslint-config-airbnb/index.js extends packages/eslint-config-airbnb-base/index.js for base JavaScript rules, then adds React-specific rules from packages/eslint-config-airbnb/rules/react.js and hooks rules from packages/eslint-config-airbnb/rules/react-hooks.js. When you add "prettier" last in the extends array, eslint-config-prettier systematically disables every rule in these files that concerns formatting, such as quotes, comma-dangle, and max-len.

Set Up Prettier Configuration

Create a .prettierrc file to define your formatting preferences. These settings operate independently of ESLint once the conflicts are disabled.

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100
}

Prettier handles all formatting decisions—such as line breaks, quote style, and trailing commas—while ESLint enforces the remaining code quality rules from the Airbnb style guide.

Run the Integrated Tools

Execute both tools using npx commands. ESLint now reports both code quality issues from the Airbnb rules and formatting violations if you configured eslint-plugin-prettier.

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

Format your code with Prettier directly when needed:

npx prettier --write .

Why This Approach Works

The integration succeeds because each tool handles a distinct responsibility. Airbnb's config enforces code quality patterns, import ordering, and React best practices through rules defined across packages/eslint-config-airbnb-base/rules/*.js and the React-specific rule files. Prettier focuses exclusively on formatting. Without eslint-config-prettier, both tools would attempt to enforce style rules like singleQuote, causing conflicts. By extending "prettier" last, you explicitly turn off all ESLint formatting rules that would otherwise clash with Prettier's output, creating a single source of truth for code style.

Summary

• Install eslint-config-airbnb, eslint-config-prettier, and prettier as dev dependencies.
• Extend configs in the correct order: "airbnb" (or "airbnb-base") first, then "prettier" last to disable conflicting rules.
• Optionally add eslint-plugin-prettier to surface Prettier errors within ESLint.
• Configure .prettierrc independently for formatting preferences once conflicts are resolved.
• Reference the source files packages/eslint-config-airbnb/index.js and packages/eslint-config-airbnb-base/index.js to understand the rule hierarchy.

Frequently Asked Questions

What is the correct order for extending ESLint configs when using Airbnb and Prettier?

You must extend "airbnb" (or "airbnb-base") before "prettier". ESLint processes extends arrays sequentially, so placing "prettier" last allows eslint-config-prettier to override and disable the formatting rules defined in the Airbnb configs located at packages/eslint-config-airbnb/index.js and packages/eslint-config-airbnb-base/rules/style.js.

Do I need eslint-plugin-prettier to integrate Airbnb ESLint with Prettier?

No, eslint-plugin-prettier is optional. It runs Prettier as an ESLint rule and reports formatting differences as ESLint errors. You only need eslint-config-prettier, which disables conflicting rules. Use the plugin only if you prefer seeing all issues in a single ESLint report rather than running Prettier separately.

Which Airbnb config should I use for non-React projects?

Use eslint-config-airbnb-base instead of eslint-config-airbnb. Install it with npm install --save-dev eslint-config-airbnb-base, then extend "airbnb-base" in your ESLint config. This package excludes the React rules found in packages/eslint-config-airbnb/rules/react.js while maintaining all base JavaScript rules from packages/eslint-config-airbnb-base/index.js.

How do I resolve remaining conflicts between ESLint and Prettier after setup?

If conflicts persist, verify that "prettier" appears last in your extends array and that you have removed any explicit formatting rules from your ESLint config that duplicate Prettier settings. Check that eslint-config-prettier is installed and that you are not manually enabling rules like quotes or comma-dangle that Prettier controls.

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