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

> Learn to integrate Airbnb ESLint config with Prettier for seamless code formatting. Follow our guide to install dependencies and configure ESLint for cleaner, consistent code.

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

---

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

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

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

```json
{
  "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`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/index.js) extends [`packages/eslint-config-airbnb-base/index.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb-base/index.js) for base JavaScript rules, then adds 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) and 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). 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.

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

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

```

Format your code with Prettier directly when needed:

```bash
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`](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 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`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/index.js) and [`packages/eslint-config-airbnb-base/rules/style.js`](https://github.com/airbnb/javascript/blob/main/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`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/rules/react.js) while maintaining all base JavaScript rules from [`packages/eslint-config-airbnb-base/index.js`](https://github.com/airbnb/javascript/blob/main/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.