eslint-config-flat-airbnb

Airbnb's ESLint style guide for ESLint 9+ flat config with TypeScript and React support.

1:1 rule parity with eslint-config-airbnb -- 350 rules audited against the Airbnb JavaScript Style Guide source, 207 kept with exact option parity, 104 dropped with documented rationale.

140 linting rules + 76 optional formatting rules + 15 optional import rules: 101 base JavaScript, 27 React + JSX-a11y, 12 TypeScript, 76 stylistic, 14+1 imports.

Why This Package?

• eslint-config-airbnb hasn't been updated since 2021 and doesn't support ESLint 9 flat config
• eslint-config-airbnb-typescript is archived
• ESLint 8 is end-of-life (Oct 2024), ESLint 10 dropped .eslintrc entirely
• 3.5 million weekly downloads with no upgrade path -- until now

Install

pnpm add -D eslint-config-flat-airbnb eslint

Usage

Full Stack (React + TypeScript)

// eslint.config.mjs
import airbnb from 'eslint-config-flat-airbnb'

export default airbnb({ typescript: true, react: true })

Base Only (JavaScript)

import airbnb from 'eslint-config-flat-airbnb'

export default airbnb()

TypeScript Only (No React)

import airbnb from 'eslint-config-flat-airbnb'

export default airbnb({ typescript: true })

With Custom Overrides

import airbnb from 'eslint-config-flat-airbnb'

export default airbnb(
  {
    typescript: true,
    react: true,
    overrides: {
      'no-console': ['warn', { allow: ['warn', 'error'] }],
    },
  },
  // Additional flat config objects as rest params
  {
    files: ['src/components/ui/**/*.tsx'],
    rules: {
      'react/jsx-props-no-spreading': 'off',
    },
  },
)

With Feature Overrides

import airbnb from 'eslint-config-flat-airbnb'

export default airbnb({
  typescript: {
    overrides: {
      '@typescript-eslint/naming-convention': 'off',
    },
  },
  react: {
    overrides: {
      'react/destructuring-assignment': 'off',
    },
  },
})

With Ignores

import airbnb from 'eslint-config-flat-airbnb'

export default airbnb(
  { typescript: true, react: true },
  { ignores: ['dist/', 'node_modules/', '.next/', '*.config.js'] },
)

With Next.js

import airbnb from 'eslint-config-flat-airbnb'
import nextPlugin from '@next/eslint-plugin-next'

export default airbnb(
  { typescript: true, react: true },
  nextPlugin.flatConfig.recommended,
)

With Stylistic Formatting (No Prettier)

import airbnb from 'eslint-config-flat-airbnb'

export default airbnb({
  typescript: true,
  react: true,
  stylistic: true,
})

With Stylistic Overrides

import airbnb from 'eslint-config-flat-airbnb'

export default airbnb({
  typescript: true,
  react: true,
  stylistic: {
    overrides: {
      '@stylistic/semi': ['error', 'never'],
    },
  },
})

With Import Rules

import airbnb from 'eslint-config-flat-airbnb'

export default airbnb({
  typescript: true,
  react: true,
  imports: true,
})

With Import Cycle Detection

import airbnb from 'eslint-config-flat-airbnb'

export default airbnb({
  typescript: true,
  react: true,
  imports: { cycle: true },
})

With ESLint 10 defineConfig()

import { defineConfig } from 'eslint/config'
import airbnb from 'eslint-config-flat-airbnb'

export default defineConfig(...airbnb({ typescript: true, react: true }))

What's Included

Base (always enabled)

• eslint:recommended (42 core rules)
• 101 Airbnb rules: best practices, ES6+, variables, style

Note: typescript-eslint:recommended and the TypeScript parser are only loaded when typescript: true is passed.

React (opt-in: react: true)

• eslint-plugin-react recommended + jsx-runtime
• eslint-plugin-react-hooks (rules-of-hooks, exhaustive-deps)
• eslint-plugin-jsx-a11y recommended
• 27 Airbnb React rules: self-closing-comp, jsx-boolean-value, no-array-index-key, jsx-props-no-spreading, etc.

TypeScript (opt-in: typescript: true)

• 12 Airbnb TypeScript rule pairs: turns off base rule, enables @typescript-eslint equivalent
• naming-convention, dot-notation, no-shadow, no-use-before-define, no-loop-func, no-implied-eval, only-throw-error, no-unused-expressions, return-await, no-unused-vars, no-useless-constructor, no-array-constructor

Stylistic (opt-in: stylistic: true)

• 76 Airbnb formatting rules via @stylistic/eslint-plugin
• 63 base formatting (indent, semi, quotes, comma-dangle, arrow-parens, brace-style, and 57 more)
• 12 JSX formatting (jsx-quotes, jsx-indent-props, jsx-closing-bracket-location, etc.)
• 1 TypeScript override (lines-between-class-members with exceptAfterOverload)
• 5 deprecated rule migrations (max-len, spaced-comment, etc. → @stylistic equivalents)
• Replaces Prettier for projects that prefer linter-enforced formatting

Imports (opt-in: imports: true)

• 14 Airbnb import rules via eslint-plugin-import-x
• Import ordering, no duplicates, no self-imports, no mutable exports
• TypeScript resolver auto-configured when typescript: true
• Optional cycle detection: imports: { cycle: true } (expensive, uses maxDepth: 2)
• 9 Airbnb import rules dropped (TypeScript-redundant: no-unresolved, named, default, namespace)

Rule Audit

Every rule decision is documented in docs/rules.md with:

• Source file in the Airbnb repo (best-practices.js, es6.js, etc.)
• Exact options with parity verification
• Rationale for dropped rules (PropTypes, class components, formatting, TS-redundant, import plugin)

Dropped Rule Categories

| Category | Count | Reason | |----------|-------|--------| | Formatting / stylistic | ~60 | Dropped by default; opt-in via stylistic: true (see above) | | PropTypes | ~8 | TypeScript replaces runtime type checking | | Class components | ~10 | Modern React uses function components | | eslint-plugin-import | ~25 | 14 kept via imports: true; 9 dropped (TypeScript-redundant); 2 dropped (env-specific) | | TS-redundant | ~5 | Already enforced by typescript-eslint:recommended |

Migrating from eslint-config-airbnb

1. Remove old packages:

   pnpm remove eslint-config-airbnb eslint-config-airbnb-base eslint-config-airbnb-typescript \
     @typescript-eslint/eslint-plugin @typescript-eslint/parser \
     eslint-plugin-import

2. Install this package:

   pnpm add -D eslint-config-flat-airbnb eslint

3. Replace your .eslintrc.js with eslint.config.mjs:

   import airbnb from 'eslint-config-flat-airbnb'
   export default airbnb({ typescript: true, react: true })

4. Delete .eslintrc.js and .eslintignore (use ignores in flat config instead)

5. Update your lint script:

   { "lint": "eslint src/" }

Exports

| Export | Description | |--------|-------------| | default | Factory function airbnb(options, ...configs) | | baseRules | Raw base rules object (101 rules) | | reactRules | Raw React rules object (27 rules) | | ReactOptions | TypeScript type for React options | | TypeScriptOptions | TypeScript type for TypeScript options | | typescriptRules | Raw TypeScript rules object (9 pairs) | | stylisticRules | Raw base stylistic rules object (63 rules + 5 deprecated off) | | stylisticJsxRules | Raw JSX stylistic rules object (12 rules) | | stylisticTsRules | Raw TS stylistic override object (1 rule) | | StylisticOptions | TypeScript type for stylistic options | | importRules | Raw import rules object (14 rules) | | importCycleRules | Raw import cycle rules object (1 rule) | | ImportsOptions | TypeScript type for imports options | | AirbnbOptions | TypeScript type for options |

Peer Dependencies

• eslint ^9.0.0 (required)
• typescript >=4.8.4 (optional)

All plugins are bundled as dependencies -- you don't need to install them separately.

License

MIT. Based on eslint-config-airbnb, Copyright (c) 2012 Airbnb.