How to Resolve Conflicts Between ESLint and Prettier When Using Airbnb Config

Use eslint-config-prettier to disable all ESLint formatting rules that clash with Prettier, ensuring it appears after eslint-config-airbnb in your extends array.

The Airbnb JavaScript style guide provides a comprehensive set of linting rules through eslint-config-airbnb, but many of these rules overlap with Prettier's formatting decisions. To resolve conflicts between ESLint and Prettier when using Airbnb config, you must override the formatting-related ESLint rules and let Prettier handle code style exclusively.

Install the Required Dependencies

Start by installing the core Airbnb configuration along with the Prettier integration packages. You need eslint-config-airbnb for the base rules, eslint-config-prettier to disable conflicting formatting rules, and prettier itself.

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

Optionally, install eslint-plugin-prettier if you want Prettier violations to appear as ESLint errors rather than requiring a separate formatting command:

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

The Airbnb configuration source lives in packages/eslint-config-airbnb/index.js, which extends both the base rules from packages/eslint-config-airbnb-base/index.js and React-specific rules from packages/eslint-config-airbnb/rules/react.js.

Configure ESLint to Extend Both Configs

Order matters when extending configurations. The Prettier config must come after the Airbnb config in your .eslintrc.json file so it can override and disable the conflicting formatting rules.

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

• airbnb pulls in the complete rule set including React support (via packages/eslint-config-airbnb/rules/react.js) and import ordering.
• airbnb/hooks enables the React Hooks rules defined in packages/eslint-config-airbnb/rules/react-hooks.js.
• prettier (from eslint-config-prettier) disables all stylistic rules that would conflict with Prettier, such as quotes, comma-dangle, and max-len.

Add the Prettier Plugin for Unified Reporting

While optional, eslint-plugin-prettier integrates Prettier directly into ESLint's rule engine. This configuration treats formatting discrepancies as linting errors, allowing you to catch both code quality issues and style violations in a single command.

When you add "prettier/prettier": "error" to your rules, Prettier runs as part of the ESLint pipeline. This eliminates the need to run separate tools during development or CI/CD workflows.

Create a Prettier Configuration File

Define your formatting preferences in a .prettierrc file. These settings operate independently of ESLint once the conflicts are disabled.

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

Prettier uses these options to format your code, while ESLint (via the Airbnb config) continues to enforce semantic rules like no-unused-vars, import/no-unresolved, and React component best practices.

Run the Tools

With the configurations in place, you can lint your codebase using a single command that checks both Airbnb's code quality rules and Prettier's formatting standards:

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

To format files with Prettier directly (bypassing ESLint), use:

npx prettier --write .

Why This Approach Works

The Airbnb config enforces hundreds of rules across multiple categories—variables, imports, ES6+ features, and style. Many style rules (e.g., quotes, semi, object-curly-spacing) directly conflict with Prettier's formatting output.

eslint-config-prettier contains a comprehensive list of rule overrides that explicitly turn off every ESLint rule that is unnecessary or conflicting with Prettier. By extending it last in your configuration, you ensure these "off" settings take precedence over Airbnb's style preferences.

Meanwhile, eslint-plugin-prettier adds a prettier/prettier rule that runs Prettier's formatting engine inside ESLint. This gives you a unified developer experience where formatting errors appear alongside linting errors in your IDE and command-line output.

Summary

• Install eslint-config-airbnb, eslint-config-prettier, and prettier as dev dependencies.
• Extend configurations in the correct order: Airbnb first, then Prettier.
• Add eslint-plugin-prettier to surface formatting issues as ESLint errors.
• Configure Prettier separately in .prettierrc for formatting preferences.
• Reference the source files packages/eslint-config-airbnb/index.js and packages/eslint-config-airbnb-base/index.js to understand the rule inheritance chain.

Frequently Asked Questions

Do I need to install eslint-plugin-prettier?

No, eslint-plugin-prettier is optional but recommended. Without it, you must run Prettier separately to format code. With the plugin, Prettier violations appear as ESLint errors, allowing you to fix formatting and linting issues in one workflow using eslint --fix.

Can I use this setup without React?

Yes. If you are not using React, replace eslint-config-airbnb with eslint-config-airbnb-base. This package contains all non-React rules and is located at packages/eslint-config-airbnb-base/index.js in the repository. The Prettier integration works identically.

Why does the order of extends matter?

ESLint applies configurations sequentially. If you extend prettier before airbnb, the Airbnb style rules would override Prettier's disabling settings, re-enabling conflicting formatting rules. By placing prettier last, you ensure it disables all formatting-related rules from the preceding configurations.

Will this work with TypeScript?

Yes. Add @typescript-eslint/parser and @typescript-eslint/eslint-plugin to your configuration, extending them before the Airbnb and Prettier configs. The TypeScript parser handles .ts and .tsx files while the Airbnb and Prettier rules continue to apply as described.

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