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

> Resolve ESLint and Prettier conflicts with Airbnb config by using eslint-config-prettier. Learn how to properly configure extends for seamless code formatting.

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

---

**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.

```bash
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:

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

```

The Airbnb configuration source lives in [`packages/eslint-config-airbnb/index.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/index.js), which extends both the base rules from [`packages/eslint-config-airbnb-base/index.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb-base/index.js) and React-specific rules from [`packages/eslint-config-airbnb/rules/react.js`](https://github.com/airbnb/javascript/blob/main/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`](https://github.com/airbnb/javascript/blob/main/.eslintrc.json) file so it can override and disable the conflicting formatting rules.

```json
{
  "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`](https://github.com/airbnb/javascript/blob/main/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`](https://github.com/airbnb/javascript/blob/main/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.

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

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

```

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

```bash
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`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/index.js) and [`packages/eslint-config-airbnb-base/index.js`](https://github.com/airbnb/javascript/blob/main/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`](https://github.com/airbnb/javascript/blob/main/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.