eslint-stylistic-airbnb

Airbnb-style ESLint config, updated for modern use with ESLint Stylistic formatting.

Why

The original eslint-config-airbnb is outdated. This config fixes that by:

• Replacing deprecated rules and plugins with modern alternatives.
• Supporting ESLint >=8.57 (including v9).
• Offering both flat and legacy config formats.
• Adding TypeScript support.
• Including Airbnb-inspired addons for JSX, React, and Vue.

It uses ESLint Stylistic instead of Prettier for formatting to match Airbnb's style closely.

Installation

Install the core packages:

# npm
npm install -D eslint @stylistic/eslint-plugin eslint-stylistic-airbnb globals

# pnpm
pnpm add -D eslint @stylistic/eslint-plugin eslint-stylistic-airbnb globals

# yarn
yarn add -D eslint @stylistic/eslint-plugin eslint-stylistic-airbnb globals

Usage

Just grab any of the ready-to-go presets:

// eslint.config.js
import airbnb from 'eslint-stylistic-airbnb';
import globals from 'globals';

export default [
  // global ignores
  { ignores: ['dist'] },

  airbnb.configs['flat/recommended'],
  
  {
    languageOptions: {
      globals: globals.browser,
    },
    linterOptions: {
      reportUnusedDisableDirectives: 'error',
    },
  },
];

// eslint.config.js
import airbnb from 'eslint-stylistic-airbnb';
import tseslint from 'typescript-eslint';
import globals from 'globals';

export default [
  // global ignores
  { ignores: ['dist'] },

  ...tseslint.configs.recommended,

  airbnb.configs['flat/recommended'],
  airbnb.configs['flat/addon-typescript'],

  {
    languageOptions: {
      globals: globals.browser,
    },
    linterOptions: {
      reportUnusedDisableDirectives: 'error',
    },
  },
];

// eslint.config.js
import airbnb from 'eslint-stylistic-airbnb';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import globals from 'globals';

export default [
  // global ignores
  { ignores: ['dist'] },

  react.configs.flat.recommended,
  reactHooks.configs.recommended,

  airbnb.configs['flat/recommended'],
  airbnb.configs['flat/addon-jsx'],
  airbnb.configs['flat/addon-react'],

  {
    languageOptions: {
      globals: globals.browser,
    },
    linterOptions: {
      reportUnusedDisableDirectives: 'error',
    },
  },
];

// eslint.config.js
import airbnb from 'eslint-stylistic-airbnb';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import tseslint from 'typescript-eslint';
import globals from 'globals';

export default [
  // global ignores
  { ignores: ['dist'] },

  ...tseslint.configs.recommended,
  react.configs.flat.recommended,
  reactHooks.configs.recommended,

  airbnb.configs['flat/recommended'],
  airbnb.configs['flat/addon-typescript'],
  airbnb.configs['flat/addon-jsx'],
  airbnb.configs['flat/addon-react'],
  
  {
    languageOptions: {
      globals: globals.browser,
    },
    linterOptions: {
      reportUnusedDisableDirectives: 'error',
    },
  },
];

// eslint.config.js
import airbnb from 'eslint-stylistic-airbnb';
import pluginVue from 'eslint-plugin-vue';
import globals from 'globals';

export default [
  // global ignores
  { ignores: ['dist'] },

  ...pluginVue.configs['flat/recommended'],

  airbnb.configs['flat/recommended'],
  airbnb.configs['flat/addon-vue'],

  {
    languageOptions: {
      globals: globals.browser,
    },
    linterOptions: {
      reportUnusedDisableDirectives: 'error',
    },
  }
];

// eslint.config.js
import airbnb from 'eslint-stylistic-airbnb';
import pluginVue from 'eslint-plugin-vue';
import tseslint from 'typescript-eslint';
import globals from 'globals';

export default [
  // global ignores
  { ignores: ['dist'] },

  ...tseslint.configs.recommended,
  ...pluginVue.configs['flat/recommended'],

  airbnb.configs['flat/recommended'],
  airbnb.configs['flat/addon-vue'],
  airbnb.configs['flat/addon-typescript'],
  airbnb.configs['flat/addon-vue-ts'],

  {
    languageOptions: {
      globals: globals.browser,
    },
    linterOptions: {
      reportUnusedDisableDirectives: 'error',
    },
  },
];

Customization

Your config should include at least one base config:

• flat/recommended
• flat/strict
• flat/compat

// eslint.config.mjs
import airbnb from 'eslint-stylistic-airbnb';
import globals from 'globals';

export default [
  // global ignores
  { ignores: ['dist'] },

  airbnb.configs['flat/recommended'],
  
  {
    languageOptions: {
      globals: globals.browser,
    },
    linterOptions: {
      reportUnusedDisableDirectives: 'error',
    },
  },
];

And any number of additional configs, based on the framework, language and plugins that you use, for example:

// eslint.config.js
import airbnb from 'eslint-stylistic-airbnb';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import tseslint from 'typescript-eslint';
import globals from 'globals';

export default [
  // global ignores
  { ignores: ['dist'] },

  ...tseslint.configs.recommended,
  react.configs.flat.recommended,
  reactHooks.configs.recommended,

  airbnb.configs['flat/recommended'],
  airbnb.configs['flat/addon-typescript'],
  airbnb.configs['flat/addon-jsx'],
  airbnb.configs['flat/addon-react'],
  
  {
    languageOptions: {
      globals: globals.browser,
    },
    linterOptions: {
      reportUnusedDisableDirectives: 'error',
    },
  },
];

[!WARNING] When building your own config file, always make sure to:

• Insert all Airbnb configs after all other configs, but before any overrides
• Always use at least the recommended preset for all plugins that you use

You can edit any rules just like in any other ESLint config:

// eslint.config.js
import airbnb from 'eslint-stylistic-airbnb';

export default [
  airbnb.configs['flat/recommended'],
  {
    rules: {
      // Use 4 spaces instead of 2
      '@stylistic/indent': ['error', 4],
    },
  },
];

TypeScript

All base styling rules are compatible with TypeScript out of the box, but you still need to configure the parser. The preferred way is to use the typescript-eslint config.

Flat Config:

// eslint.config.js
import airbnb from 'eslint-stylistic-airbnb';
import tseslint from 'typescript-eslint';

export default [
  ...tseslint.configs.recommended,
  airbnb.configs['flat/recommended'],
  airbnb.configs['flat/addon-typescript'],
];

Make sure to include addon-typescript to prevent incorrect errors for extension rules in TypeScript files.

Legacy Config (.eslintrc)

For older setups:

// .eslintrc.js
module.exports = {
  extends: [
    './node_modules/eslint-stylistic-airbnb/configs/recommended',
    './node_modules/eslint-stylistic-airbnb/configs/addon-jsx',
  ],
};

Note: Prefer flat config for new projects—it's the future-proof choice.

Configuration Reference

Base configs

flat/recommended

Base Airbnb styles. All deprecated rules have been removed or replaced with modern alternatives. Some of the rules that were not enabled by default in the original Airbnb config due to semver versioning have been enabled.

import airbnb from 'eslint-stylistic-airbnb';

export default [
  airbnb.configs['flat/recommended'],
];

flat/strict

Same as flat/recommended but with stricter rules that were not enabled in the original Airbnb config, though mentioned in the Airbnb Style Guide.

import airbnb from 'eslint-stylistic-airbnb';

export default [
  airbnb.configs['flat/strict'],
];

flat/compat

The original Airbnb config but without deprecated rules, for gradual migration purposes.

import airbnb from 'eslint-stylistic-airbnb';

export default [
  airbnb.configs['flat/compat'],
];

Addon configs

flat/addon-import

Import-related Airbnb rules. Requires eslint-plugin-import-x.

Install additional dependencies:

# npm
npm install -D eslint-plugin-import-x

# pnpm
pnpm add -D eslint-plugin-import-x

# yarn
yarn add -D eslint-plugin-import-x

Update eslint config:

import airbnb from 'eslint-stylistic-airbnb';
import importX from 'eslint-plugin-import-x';

export default [
  importX.configs['flat/recommended'],
  
  airbnb.configs['flat/recommended'],
  airbnb.configs['flat/addon-import'],
];

flat/addon-import-esm

Addition to the flat/addon-import, makes all imports ESM-style (with extension).

Install additional dependencies:

# npm
npm install -D eslint-plugin-import-x

# pnpm
pnpm add -D eslint-plugin-import-x

# yarn
yarn add -D eslint-plugin-import-x

Update eslint config:

import airbnb from 'eslint-stylistic-airbnb';
import importX from 'eslint-plugin-import-x';

export default [
  importX.configs['flat/recommended'],
  
  airbnb.configs['flat/recommended'],
  airbnb.configs['flat/addon-import'],
  airbnb.configs['flat/addon-import-esm'],
];

flat/addon-typescript

Contains only Airbnb-specific replacements for typescript-eslint extension rules. All the base TypeScript styling is handled by the base config using ESLint Stylistic. Requires typescript-eslint to be installed. Should always be enabled if using TypeScript to prevent parser errors.

Install additional dependencies:

# npm
npm install -D typescript-eslint

# pnpm
pnpm add -D typescript-eslint

# yarn
yarn add -D typescript-eslint

Update eslint config:

import airbnb from 'eslint-stylistic-airbnb';
import tseslint from 'typescript-eslint';

export default [
  ...tseslint.configs['flat/recommended'],

  airbnb.configs['flat/recommended'],
  airbnb.configs['flat/addon-typescript'],
];

flat/addon-iterators

Allows for...of loops. Still disallows for...in, with statements, and labeled statements.

import airbnb from 'eslint-stylistic-airbnb';

export default [
  airbnb.configs['flat/recommended'],
  airbnb.configs['flat/addon-iterators'],
];

flat/addon-jsx

Stylistic rules for jsx and tsx files.

import airbnb from 'eslint-stylistic-airbnb';

export default [
  airbnb.configs['flat/recommended'],
  airbnb.configs['flat/addon-jsx'],
];

flat/addon-react

React-specific rules. Pair with flat/addon-jsx. Requires eslint-plugin-react (must-have) and eslint-plugin-react-hooks (highly recommended).

Install additional dependencies:

# npm
npm install -D eslint-plugin-react eslint-plugin-react-hooks

# pnpm
pnpm add -D eslint-plugin-react eslint-plugin-react-hooks

# yarn
yarn add -D eslint-plugin-react eslint-plugin-react-hooks

Update eslint config:

import airbnb from 'eslint-stylistic-airbnb';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';

export default [
  react.configs.flat.recommended,
  reactHooks.configs.recommended,
  
  airbnb.configs['flat/recommended'],
  airbnb.configs['flat/addon-jsx'],
  airbnb.configs['flat/addon-react'],
];

flat/addon-vue

Stylistic rules for .vue files. Requires eslint-plugin-vue. These rules are not part of the Airbnb style guide; instead, they are based on the base and React-specific style guides.

Install additional dependencies:

# npm
npm install -D eslint-plugin-vue

# pnpm
pnpm add -D eslint-plugin-vue

# yarn
yarn add -D eslint-plugin-vue

Update eslint config:

import airbnb from 'eslint-stylistic-airbnb';
import pluginVue from 'eslint-plugin-vue';

export default [
  ...pluginVue.configs['flat/recommended'],

  airbnb.configs['flat/recommended'],
  airbnb.configs['flat/addon-vue'],
];

flat/addon-vue-ts

TypeScript-specific rules for .vue files. Use it together with flat/addon-vue and flat/addon-typescript. Requires typescript-eslint and eslint-plugin-vue.

Install additional dependencies:

# npm
npm install -D typescript-eslint eslint-plugin-vue

# pnpm
pnpm add -D typescript-eslint eslint-plugin-vue

# yarn
yarn add -D typescript-eslint eslint-plugin-vue

Update eslint config:

import airbnb from 'eslint-stylistic-airbnb';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';

export default [
  ...tseslint.configs['flat/recommended'],
  ...pluginVue.configs['flat/recommended'],

  airbnb.configs['flat/recommended'],
  airbnb.configs['flat/addon-typescript'],
  airbnb.configs['flat/addon-vue'],
  airbnb.configs['flat/addon-vue-ts'],
];

IDE Configuration

IDE might require additional configuration to apply proper formatting on save. You can use the guide from @antfu/eslint-config for VS Code, Zed, and Neovim. When applying those configs, make sure to:

• Use original plugin prefixes instead of renamed. Otherwise, format on save won't work properly.
• Remove unnecessary languages and rule groups

Formatting other file types (css, scss, html, and others)

For files that are not supported by ESLint, use eslint-plugin-format.

Troubleshooting

Conflicts with Prettier

This config replaces Prettier. If conflicts arise:

• Remove Prettier, eslint-config-prettier, and eslint-plugin-prettier.
• Delete .prettierrc or prettier.config.js.
• Configure your editor to format with ESLint instead.

Incorrect errors in TypeScript

Make sure to add addon-typescript.

no-undef errors

Make sure to specify globals via the languageOptions.globals property in your flat config. For example, to enable browser globals:

// eslint.config.js
import airbnb from 'eslint-stylistic-airbnb';
import globals from 'globals';

export default [
  airbnb.configs['flat/recommended'],
  
  {
    languageOptions: {
      globals: globals.browser,
    },
  },
];

You can also combine multiple environments: { ...globals.browser, ...globals.node }. See the globals package for available options.

FAQ

Do I need to use a recommended config from @eslint/js?

No, all recommended rules are already included in the base airbnb config. You don't need to add @eslint/js recommended preset separately.

Migration Guide

From eslint-config-airbnb

1. Uninstall old packages:

   npm uninstall eslint-config-airbnb eslint-config-airbnb-base eslint-config-airbnb-typescript

2. Install this package (see Installation).

3. Update your config:

   • Replace 'airbnb' in the extends array with './node_modules/eslint-stylistic-airbnb/configs/recommended' (or compat, if you want to minimize the number of changes)
   • Replace 'airbnb-typescript' in the extends array with './node_modules/eslint-stylistic-airbnb/configs/addon-typescript'
   • Replace 'airbnb/hooks' with 'plugin:react-hooks/recommended'

4. Remove Prettier if using:

   npm uninstall prettier eslint-config-prettier eslint-plugin-prettier

5. Depending on the version of eslint-config-airbnb, you might get a different number of changes. Tweak rules as needed.

[!WARNING] If you encounter an error like TypeError: Cannot read properties of undefined (reading 'length') in rule like @stylistic/.... try downgrading the @stylistic/eslint-plugin package to version 2.1.0.

From v2.x of this package

Use the flat/compat or compat config to maintain v2.x behavior:

// eslint.config.js (flat config)
import airbnb from 'eslint-stylistic-airbnb';

export default [
  airbnb.configs['flat/compat'],
];

// .eslintrc.js (legacy config)
module.exports = {
  extends: ['./node_modules/eslint-stylistic-airbnb/configs/compat'],
};

Contributing

Contributions welcome! Open an issue to discuss ideas first.

License

MIT

Credits

• Airbnb JavaScript Style Guide
• ESLint Stylistic