Difference Between eslint-config-airbnb and eslint-config-airbnb-base: Complete Guide

eslint-config-airbnb extends eslint-config-airbnb-base to add React, JSX, and accessibility rules, while the base package provides only core JavaScript linting for Node.js or vanilla JS projects.

Both packages are official ESLint configurations maintained by Airbnb's JavaScript style guide repository. Understanding the architectural split between these two npm packages helps you install only the dependencies your project actually needs, avoiding unnecessary React plugins in non-React codebases.

What is eslint-config-airbnb-base?

The eslint-config-airbnb-base package provides the foundational JavaScript rule set without any framework-specific configurations. According to the source code in packages/eslint-config-airbnb-base/index.js, it aggregates core rule collections including best-practices, errors, node, style, variables, ES6, imports, and strict mode rules.

This configuration requires only two peer dependencies: eslint and eslint-plugin-import (as declared in packages/eslint-config-airbnb-base/package.json). It is the appropriate choice for Node.js applications, vanilla JavaScript projects, or any environment where React is not used.

What is eslint-config-airbnb?

The eslint-config-airbnb package is a React-specific superset that layers additional rules on top of the base configuration. In packages/eslint-config-airbnb/index.js, the configuration explicitly requires eslint-config-airbnb-base and extends it with React-related rule sets located in packages/eslint-config-airbnb/rules/—specifically react, react-a11y, and react-hooks.

This package includes three entry points:

• airbnb – The default config combining base rules with React and JSX linting
• airbnb/hooks – Adds React Hooks-specific rules (requires React ≥ 16.8)
• airbnb/whitespace – A variant focusing on whitespace rules (deprecated alternatives like airbnb/base also exist)

Key Differences

Peer Dependencies

The dependency requirements reveal the architectural scope of each package:

eslint-config-airbnb-base requires only:

• eslint
• eslint-plugin-import

eslint-config-airbnb requires the base config plus React-specific plugins (as listed in packages/eslint-config-airbnb/package.json):

• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-jsx-a11y
• eslint-plugin-import
• eslint

Configuration Extension Chain

The inheritance chain differs fundamentally:

• eslint-config-airbnb-base extends internal core rule collections directly (best-practices, errors, ES6, etc.)
• eslint-config-airbnb extends eslint-config-airbnb-base and then adds the React rule sets from packages/eslint-config-airbnb/rules/react.js, react-a11y.js, and react-hooks.js

Use Cases

Choose the configuration based on your project type:

• Use eslint-config-airbnb-base for Node.js servers, CLI tools, or libraries that do not use React
• Use eslint-config-airbnb for React applications, Next.js projects, or any codebase utilizing JSX

Installation and Configuration

Installing the Base Configuration

For Node.js or vanilla JavaScript projects, install only the core dependencies:

npm install --save-dev eslint-config-airbnb-base eslint@^8.0.0 eslint-plugin-import

Then extend it in your .eslintrc.json:

{
  "extends": ["airbnb-base"]
}

Installing the Full React Configuration

For React projects, you must install the additional React plugins:

npm install --save-dev eslint-config-airbnb eslint@^8.0.0 eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Configure your project to use the React rules:

{
  "extends": ["airbnb", "airbnb/hooks"]
}

The "airbnb" entry point pulls in the base rules plus React and accessibility checks, while "airbnb/hooks" specifically enables the React Hooks rule set defined in packages/eslint-config-airbnb/rules/react-hooks.js.

Verifying Peer Dependencies

To check the exact peer dependency versions required for the latest release, run:

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

This command queries the package.json metadata to ensure compatibility with your ESLint version.

Summary

• eslint-config-airbnb-base provides core JavaScript linting rules suitable for Node.js and vanilla JS projects without React dependencies
• eslint-config-airbnb extends the base configuration to include React, JSX, and accessibility rules via the inheritance chain in packages/eslint-config-airbnb/index.js
• The base package requires only eslint and eslint-plugin-import, while the full package requires additional React-specific plugins (eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-jsx-a11y)
• Use extends: ["airbnb-base"] for non-React code and extends: ["airbnb", "airbnb/hooks"] for React applications

Frequently Asked Questions

Can I use eslint-config-airbnb without React?

No, eslint-config-airbnb is specifically designed for React projects and will fail if you do not install the required React plugins (eslint-plugin-react, eslint-plugin-jsx-a11y, etc.). For non-React projects, use eslint-config-airbnb-base to avoid installing unnecessary dependencies.

Does eslint-config-airbnb-base include ES6 rules?

Yes, the base configuration includes ES6-specific rules as part of its core rule collections. In packages/eslint-config-airbnb-base/index.js, the configuration explicitly extends the ES6 rules located in the internal rules directory, making it suitable for modern JavaScript development without React.

What is the airbnb/hooks entry point?

The airbnb/hooks entry point is a secondary configuration exported by eslint-config-airbnb that specifically enables React Hooks linting rules. It extends the base Airbnb config to include rules from packages/eslint-config-airbnb/rules/react-hooks.js, enforcing best practices for the useState, useEffect, and other React Hook APIs.

Why does eslint-config-airbnb have eslint-config-airbnb-base as a dependency?

eslint-config-airbnb treats the base configuration as a foundation to avoid duplicating core JavaScript rules. By requiring eslint-config-airbnb-base in its package.json and extending it in index.js, the React-specific package inherits all base rules and only adds the React, JSX, and accessibility layers on top, maintaining a DRY (Don't Repeat Yourself) architecture across both packages.

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