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

To use the Airbnb style guide with Create React App, extend both the react-app and airbnb ESLint presets in your .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 and 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: Contains React-specific rule definitions, including JSX quoting standards, component ordering requirements, and prop-type validations.
• packages/eslint-config-airbnb/index.js: The entry point that instructs ESLint to load the base config, React rules from 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 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:

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:

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

Then install them individually based on the output. A typical package.json devDependencies section will include these packages:

{
  "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 file in your project root. To properly use the Airbnb style guide with Create React App, extend both the react-app and airbnb presets:

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

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

{
  "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, 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 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.
• 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 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.

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

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