How to Override Specific Airbnb ESLint Rules: A Complete Guide

Question

Easily override specific Airbnb ESLint rules in your .eslintrc or eslint.config.js file. Learn how to customize your JavaScript linting configuration for better code quality and consistency.

Accepted Answer

You can override any Airbnb ESLint rule by extending the config in your .eslintrc or eslint.config.js file and adding a rules object that specifies the new severity or options for specific rule names.

Learning how to override specific Airbnb ESLint rules is essential when adopting the popular airbnb/javascript style guide in real-world projects that require exceptions. While the Airbnb config provides battle-tested defaults for React and vanilla JavaScript, you will often need to disable or modify specific rules to match your team's conventions. This guide walks through the exact file structure of the ESLint configs and provides concrete examples for customizing rules at the project or file level.

Understanding the Airbnb ESLint Config Architecture

The airbnb/javascript repository publishes two main shareable configs: eslint-config-airbnb (includes React rules) and eslint-config-airbnb-base (vanilla JavaScript only). These configs expose rules through JavaScript objects that are merged into your project's ESLint configuration.

The architecture breaks down as follows:

packages/eslint-config-airbnb-base/rules/style.js: Contains base style rules like no-underscore-dangle, semi, and quotes. This file exports module.exports = { rules: { … } }.
packages/eslint-config-airbnb/rules/react.js: Houses React-specific rules such as jsx-quotes. This exports module.exports = { plugins: […], rules: { … } }.
packages/eslint-config-airbnb-base/index.js: The entry point for the base config that extends the rules defined in style.js.
packages/eslint-config-airbnb/index.js: The entry point for the full config that extends both the base and React rules.
packages/eslint-config-airbnb/base.js: An alternative entry point referenced in the source that maps to the base configuration.

How to Override Specific Airbnb ESLint Rules

Follow these steps to customize any rule from the Airbnb style guide.

Step 1: Install the Config and Peer Dependencies

First, install the Airbnb config along with its required peer dependencies:

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

Step 2: Extend the Base or Full Config

Create or edit your ESLint configuration file. Use airbnb for React projects or airbnb-base for plain JavaScript:

{
  "extends": ["airbnb"]
}

Step 3: Override Rules in Your ESLint Configuration

Add a rules object where each key is the ESLint rule name and the value is the new configuration:

"off": Disables the rule entirely
"warn": Reports as a warning instead of error
"error": Reports as an error (Airbnb default)
["error", option1, option2]: Array format for rules accepting specific options

Practical Examples of Overriding Airbnb ESLint Rules

Disable the no-underscore-dangle Rule

The no-underscore-dangle rule is defined in packages/eslint-config-airbnb-base/rules/style.js. To disable it:

{
  "extends": ["airbnb"],
  "rules": {
    "no-underscore-dangle": "off"
  }
}

This overrides the default ["error", { … }] value set in the base config.

Change Semicolon Requirements

The semi rule defaults to ['error', 'always'] in style.js. To enforce no semicolons instead:

{
  "extends": ["airbnb-base"],
  "rules": {
    "semi": ["error", "never"]
  }
}

Modify React JSX Quote Rules

The jsx-quotes rule is defined in packages/eslint-config-airbnb/rules/react.js and defaults to 'off'. To require double quotes in JSX attributes:

{
  "extends": ["airbnb"],
  "rules": {
    "jsx-quotes": ["error", "prefer-double"]
  }
}

Target Specific Files with Overrides

Use the native ESLint overrides feature to apply different rules to specific file patterns, such as test files:

{
  "extends": ["airbnb"],
  "overrides": [
    {
      "files": ["*.test.js", "*.spec.js"],
      "rules": {
        "max-lines": "off"
      }
    }
  ]
}

Where to Find Airbnb ESLint Rule Definitions

To identify which rules to override, examine the source files in the airbnb/javascript repository:

Base style rules: Browse packages/eslint-config-airbnb-base/rules/style.js for rules like semi, quotes, and no-underscore-dangle.
React-specific rules: Check packages/eslint-config-airbnb/rules/react.js for JSX and React-specific configurations.
Entry points: Review packages/eslint-config-airbnb-base/index.js and packages/eslint-config-airbnb/index.js to understand the inheritance chain.

Summary

Extend airbnb for React projects or airbnb-base for vanilla JavaScript to inherit the style guide rules.
Override specific rules by adding a rules object to your ESLint config with the rule name as the key and "off", "warn", or ["error", options] as the value.
Reference packages/eslint-config-airbnb-base/rules/style.js for base rules and packages/eslint-config-airbnb/rules/react.js for React-specific rules.
Use the overrides array in your ESLint config to apply exceptions only to specific file patterns like test files.

Frequently Asked Questions

Can I override multiple Airbnb ESLint rules at once?

Yes. Simply include multiple entries in the rules object of your ESLint configuration. Each key-value pair represents one rule override, allowing you to disable, warn, or reconfigure any number of rules from the Airbnb config simultaneously.

How do I completely disable the Airbnb config for specific files?

Use the overrides property in your ESLint config with a files glob pattern. Set the specific rules you want to disable to "off", or extend a different config for those files. This is commonly used for configuration files, build scripts, or test files that don't need to follow the strict application code standards.

What's the difference between eslint-config-airbnb and eslint-config-airbnb-base?

eslint-config-airbnb-base contains only vanilla JavaScript rules defined primarily in packages/eslint-config-airbnb-base/rules/style.js. eslint-config-airbnb extends the base config and adds React-specific rules from packages/eslint-config-airbnb/rules/react.js. Use the base config for Node.js or non-React projects to avoid installing React-specific dependencies.

Do overrides in ESLint replace or merge with Airbnb rules?

ESLint merges your rules object with the extended Airbnb configuration. When you specify a rule that exists in the Airbnb config, your value completely replaces the Airbnb setting for that rule. Rules you don't specify remain unchanged from the extended configuration.