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:

JavaScript

// 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',
    },
  },
];

TypeScript

// 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',
    },
  },
];

JavaScript +

React

// 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',
    },
  },
];

TypeScript +

React

// 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',
    },
  },
];

JavaScript +

Vue

// 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',
    },
  }
];

TypeScript +

Vue

// 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.

Usage:

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.

Usage:

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.

Usage:

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.

Usage:

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).

Usage:

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.

Usage:

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.

Usage:

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.

Usage:

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).

Usage:

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.

Usage:

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.

Usage:

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`

Uninstall old packages:

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

Install this package (see Installation).
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'

Remove Prettier if using:

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

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'],
};

Name		Name	Last commit message	Last commit date
Latest commit History 40 Commits
.github/workflows		.github/workflows
configs		configs
rules		rules
tests		tests
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
index.d.ts		index.d.ts
index.js		index.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml

Folders and files

Latest commit

History

Repository files navigation

eslint-stylistic-airbnb

Why

Installation

Usage

Customization

TypeScript

Legacy Config (.eslintrc)

Configuration Reference

Base configs

flat/recommended

flat/strict

flat/compat

Addon configs

flat/addon-import

flat/addon-import-esm

flat/addon-typescript

flat/addon-iterators

flat/addon-jsx

flat/addon-react

flat/addon-vue

flat/addon-vue-ts

IDE Configuration

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

Troubleshooting

Conflicts with Prettier

Incorrect errors in TypeScript

no-undef errors

FAQ

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

Migration Guide

From eslint-config-airbnb

From v2.x of this package

Contributing

License

Credits

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 9

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

`flat/recommended`

`flat/strict`

`flat/compat`

`flat/addon-import`

`flat/addon-import-esm`

`flat/addon-typescript`

`flat/addon-iterators`

`flat/addon-jsx`

`flat/addon-react`

`flat/addon-vue`

`flat/addon-vue-ts`

`no-undef` errors

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

From `eslint-config-airbnb`

Packages