# How to Use the Airbnb Style Guide with Create React App: Complete Integration Guide

> Integrate the Airbnb style guide with Create React App seamlessly. Follow this complete guide to configure ESLint and ensure code consistency for your React projects.

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

---

**To use the Airbnb style guide with Create React App, extend both the `react-app` and `airbnb` ESLint presets in your [`.eslintrc.json`](https://github.com/airbnb/javascript/blob/main/.eslintrc.json) file and install the config's peer dependencies using `npx install-peerdeps --dev eslint-config-airbnb`.**

The **Airbnb JavaScript Style Guide** is one of the most widely adopted standards for writing consistent JavaScript and React code, maintained in the `airbnb/javascript` repository. When working with **Create React App (CRA)**, you can integrate the Airbnb ESLint configuration without ejecting from the build tool or modifying webpack configurations. This approach layers Airbnb's comprehensive rule set—defined in [`packages/eslint-config-airbnb/index.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/index.js) and [`packages/eslint-config-airbnb/rules/react.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/rules/react.js)—atop CRA's existing `react-app` preset.

## Understanding the ESLint Config Architecture

The Airbnb style guide is distributed as a shareable ESLint configuration that composes multiple rule layers. According to the source code in the `airbnb/javascript` repository, the architecture consists of the following components:

- **`eslint-config-airbnb`**: The main shareable config that aggregates base rules, React-specific rules, and accessibility standards. This package serves as the primary entry point for React projects and automatically pulls in its dependencies.
- **`eslint-config-airbnb-base`**: The foundation package containing non-React ECMAScript rules, imported automatically as a dependency of the main config. Its rules are defined in `packages/eslint-config-airbnb-base/rules/`.
- **[`packages/eslint-config-airbnb/rules/react.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/rules/react.js)**: Contains React-specific rule definitions, including JSX quoting standards, component ordering requirements, and prop-type validations.
- **[`packages/eslint-config-airbnb/index.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/index.js)**: The entry point that instructs ESLint to load the base config, React rules from [`rules/react.js`](https://github.com/airbnb/javascript/blob/main/rules/react.js), and JSX accessibility rules in the correct precedence order.

Create React App initializes projects with the `react-app` preset, which provides environment settings and parser options optimized for CRA's build pipeline. To use the Airbnb style guide with Create React App, you extend both configurations, allowing ESLint to merge the rule objects sequentially with later entries overriding earlier ones.

## Installing the Airbnb Config and Peer Dependencies

The `eslint-config-airbnb` package declares several peer dependencies that must be present in your project, including `eslint-plugin-import`, `eslint-plugin-react`, `eslint-plugin-react-hooks`, and `eslint-plugin-jsx-a11y`. The [`packages/eslint-config-airbnb/README.md`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/README.md) file documents two installation methods to resolve these dependencies.

### Method 1: Using install-peerdeps (Recommended)

For npm 5 and later, use the `install-peerdeps` utility to automatically resolve and install the exact versions required by the config:

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

```

### Method 2: Manual Installation

If you prefer to install dependencies manually, first check the required peer dependency versions for the latest release:

```bash
npm info "eslint-config-airbnb@latest" peerDependencies

```

Then install them individually based on the output. A typical [`package.json`](https://github.com/airbnb/javascript/blob/main/package.json) devDependencies section will include these packages:

```json
{
  "devDependencies": {
    "eslint": "^8.57.0",
    "eslint-config-airbnb": "^19.0.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-react": "^7.34.0",
    "eslint-plugin-react-hooks": "^4.6.0"
  }
}

```

## Configuring ESLint in Your Create React App Project

After installation, create or modify an [`.eslintrc.json`](https://github.com/airbnb/javascript/blob/main/.eslintrc.json) file in your project root. To properly use the Airbnb style guide with Create React App, extend both the `react-app` and `airbnb` presets:

```json
{
  "extends": [
    "react-app",
    "airbnb"
  ]
}

```

This configuration instructs ESLint to load CRA's base settings first, then apply Airbnb's comprehensive rule set. The order matters because ESLint merges configurations sequentially, meaning rules defined later in the array override identical rules defined earlier.

## Resolving Rule Conflicts Between CRA and Airbnb

Both the `react-app` and `airbnb` presets define overlapping rules for React development. For example, both specify settings for `react/jsx-filename-extension`. When you use the Airbnb style guide with Create React App, ESLint resolves conflicts by using the configuration that appears last in the `extends` array.

If you need to preserve a CRA-specific rule setting while using the Airbnb config, explicitly override it in the `rules` section of your ESLint configuration:

```json
{
  "extends": ["react-app", "airbnb"],
  "rules": {
    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }]
  }
}

```

This pattern allows you to maintain Create React App's zero-config philosophy for specific rules while adopting Airbnb's stricter standards elsewhere in your codebase.

## Customizing Rules for Your Project

The Airbnb configuration disables certain rules by default that you might want to enforce in your specific project context. For instance, if your team uses PropTypes for runtime type checking, you can re-enable the corresponding rule that Airbnb disables:

```json
{
  "extends": ["react-app", "airbnb"],
  "rules": {
    "react/prop-types": "error"
  }
}

```

Any rule defined explicitly in your project's ESLint configuration takes precedence over both the `react-app` and `airbnb` presets, giving you complete control over your linting standards while maintaining the underlying style guide structure.

## Summary

- The **Airbnb style guide** is packaged as `eslint-config-airbnb`, a shareable ESLint config that includes base JavaScript rules from `eslint-config-airbnb-base`, 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 accessibility standards.
- You can use the Airbnb style guide with Create React App without ejecting by extending both `"react-app"` and `"airbnb"` in your [`.eslintrc.json`](https://github.com/airbnb/javascript/blob/main/.eslintrc.json) file.
- Install peer dependencies using `npx install-peerdeps --dev eslint-config-airbnb` to ensure version compatibility with the rule definitions in [`packages/eslint-config-airbnb/index.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/index.js).
- ESLint merges configurations in the order they appear in the `extends` array, with later entries overriding earlier ones when rule definitions conflict.
- Override specific rules in your local config to resolve conflicts between CRA's defaults and Airbnb's stricter requirements.

## Frequently Asked Questions

### Do I need to eject from Create React App to use the Airbnb style guide?

No. You can integrate the Airbnb ESLint config without running `npm run eject` or modifying internal webpack configurations. Simply install the peer dependencies and update your [`.eslintrc.json`](https://github.com/airbnb/javascript/blob/main/.eslintrc.json) file to extend both `react-app` and `airbnb`. This approach keeps you within Create React App's supported configuration flow while adding the comprehensive linting rules defined in the `airbnb/javascript` repository.

### Which ESLint preset takes precedence when extending both react-app and airbnb?

The last preset listed in the `extends` array takes precedence. In the configuration `["react-app", "airbnb"]`, Airbnb's rules override any conflicting rules from Create React App because ESLint applies configurations sequentially. If you need to reverse a specific Airbnb rule to match CRA's behavior, add an explicit rule definition in your configuration file's `rules` object.

### How do I check which peer dependencies are required for eslint-config-airbnb?

Run the command `npm info "eslint-config-airbnb@latest" peerDependencies` to view the exact versions required by the current release. Alternatively, using `npx install-peerdeps --dev eslint-config-airbnb` automatically resolves and installs these dependencies without requiring manual version lookup, ensuring compatibility with the plugins referenced in [`packages/eslint-config-airbnb/index.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/index.js).

### Can I use the base Airbnb config without React rules in a CRA project?

Yes, though it is uncommon for React projects. Install `eslint-config-airbnb-base` instead of the full `eslint-config-airbnb` package, and extend `"airbnb-base"` rather than `"airbnb"` in your [`.eslintrc.json`](https://github.com/airbnb/javascript/blob/main/.eslintrc.json). This applies only the JavaScript style rules from `packages/eslint-config-airbnb-base/rules/` without the React-specific requirements from [`packages/eslint-config-airbnb/rules/react.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/rules/react.js).