ESLint Config Airbnb

ESLint Config Airbnb provides Airbnb's comprehensive ESLint configuration as an extensible shared config for JavaScript and React projects. It includes ESLint rules for ECMAScript 6+ features, React components, JSX accessibility, and modern JavaScript patterns, requiring several peer dependencies including eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y.

Package Information

• Package Name: eslint-config-airbnb
• Package Type: npm
• Language: JavaScript
• Installation: npm install --save-dev eslint-config-airbnb

Core Imports

ESLint Config Airbnb is used in ESLint configuration files rather than imported directly in JavaScript code:

// .eslintrc.js
module.exports = {
  extends: ['airbnb']
};

JSON format:

{
  "extends": ["airbnb"]
}

Basic Usage

After installing the package and its peer dependencies, extend your ESLint configuration:

// .eslintrc.js
module.exports = {
  extends: ['airbnb'],
  // Additional customizations
  rules: {
    // Override specific rules if needed
  }
};

For React projects with hooks:

// .eslintrc.js
module.exports = {
  extends: ['airbnb', 'airbnb/hooks']
};

Architecture

ESLint Config Airbnb is built around several key components:

• Main Configuration: Complete React + ES6+ ruleset extending airbnb-base
• Modular Rule Sets: Separate configurations for React, accessibility, and hooks
• Dynamic Whitespace Config: Special configuration that modifies rule severities
• Export System: Multiple entry points accessible via package.json exports field
• Peer Dependencies: Relies on ESLint plugins for rule implementations

Capabilities

Main Configuration

Default ESLint configuration with React support, ECMAScript 6+ rules, and accessibility guidelines. Suitable for most React applications.

// Usage in .eslintrc.js
module.exports = {
  extends: ['airbnb']
};

// Configuration object structure
interface ESLintConfig {
  extends: string[];
  rules: Record<string, any>;
}

Main Configuration

React Hooks Configuration

Additional ESLint rules specifically for React Hooks, enforcing Rules of Hooks and exhaustive dependencies.

// Usage in .eslintrc.js
module.exports = {
  extends: ['airbnb', 'airbnb/hooks']
};

React Hooks Configuration

Whitespace Configuration

Special configuration that errors only on whitespace/formatting rules while converting other rule violations to warnings.

// Usage in .eslintrc.js
module.exports = {
  extends: ['airbnb/whitespace']
};

Whitespace Configuration

Base Configuration

Base configuration without React-specific rules (deprecated - use eslint-config-airbnb-base instead).

// Usage in .eslintrc.js (deprecated)
module.exports = {
  extends: ['airbnb/base']
};

Base Configuration

Legacy Configuration

Legacy ES5 configuration without modern ES6+ features (deprecated - use eslint-config-airbnb-base/legacy instead).

// Usage in .eslintrc.js (deprecated)
module.exports = {
  extends: ['airbnb/legacy']
};

Legacy Configuration

Individual Rule Modules

Direct access to specific rule modules for custom configuration assembly.

// Usage in .eslintrc.js
module.exports = {
  extends: [
    'airbnb-base',
    'eslint-config-airbnb/rules/react',
    'eslint-config-airbnb/rules/react-a11y'
  ]
};

Rule Modules

Types

interface ESLintConfig {
  extends?: string[];
  rules?: Record<string, ESLintRuleConfig>;
  plugins?: string[];
  parserOptions?: {
    ecmaFeatures?: {
      jsx?: boolean;
    };
  };
  settings?: Record<string, any>;
}

type ESLintRuleConfig = 
  | 'off' | 'warn' | 'error'
  | 0 | 1 | 2
  | ['off' | 'warn' | 'error' | 0 | 1 | 2, ...any[]];