DOCSEARCHbyAlgolia
Submit Docs

eslint-config-airbnb-extended

website·Indexed 32 days ago

https://eslint-airbnb-extended.nishargshah.dev/

A modern ESLint configuration that extends the Airbnb style guide. It provides support for Flat Config, TypeScript integration via typescript-eslint, and includes a CLI tool called create-airbnb-x-config for automated setup. The package offers both Extended and Legacy configurations to help teams migrate and maintain consistent code quality.

Tokens
7.5K
Snippets
31
Records
63
Agent score
53%

What's inside eslint-config-airbnb-extended

  1. Overview of Legacy Config rule groups

    The Legacy Config is composed of several rule groups that map to the original Airbnb family.

    Base Rules:

    • Best Practices: Code quality and maintainability.
    • Errors: Runtime errors and unsafe patterns.
    • ES6: ES6+ syntax.
    • Imports: eslint-plugin-import usage.
    • Node: Server-side development rules.
    • Strict: Strict mode enforcement.
    • Style: Spacing, quotes, and semicolons.
    • Variables: Declarations and scoping.

    React Rules:

    • Base: JSX and component structure.
    • JSX Accessibility: eslint-plugin-jsx-a11y rules.
    • Hooks: eslint-plugin-react-hooks usage.

    TypeScript Rules:

    • Base: Core TS linting.
    • Overrides: Disables rules covered by TS and enables type-checking rules.
    • Settings: TS resolver and parser options.

  2. Overview of eslint-config-airbnb-extended Extended Config

    The Extended config is a modern adaptation of Airbnb's ESLint setup designed for TypeScript and JavaScript projects. It is fully compatible with ESLint 9+ and utilizes the Flat Config format. Key improvements include updated import handling via eslint-plugin-import-x, style enforcement via @stylistic/eslint-plugin, and modern Node.js support using eslint-plugin-n.

  3. Overview of plugins used in eslint-config-airbnb-extended

    The eslint-config-airbnb-extended configuration integrates several specialized ESLint plugins to extend Airbnb's base rules for modern web development. These include support for styling, import validation, Node.js best practices, React and Hooks, accessibility (a11y), Next.js framework standards, and TypeScript type-aware linting.

  5. Understand and use Extensions in eslint-config-airbnb-extended

    Extensions in eslint-config-airbnb-extended are reusable layers that combine rules, parsers, and settings. They allow developers to build a custom base configuration by composing specific environment or framework extensions rather than manually configuring every plugin. An Extended config is essentially the sum of rules + extension = config.

  6. Understand the purpose of eslint-airbnb-extended

    The eslint-airbnb-extended configuration is designed to modernize the Airbnb ESLint style guide. While the original Airbnb config was a community standard, it has not been updated in over four years, leading to several critical gaps: it lacks native TypeScript support, is incompatible with ESLint 9+, and contains outdated rules that create unnecessary friction for modern development workflows.

  7. Install eslint-config-airbnb-extended using the CLI

    The recommended way to set up eslint-config-airbnb-extended is via the create-airbnb-x-config CLI tool. This tool automates the configuration process and ensures the latest version is installed, reducing manual setup errors.
    # Using npm
npx create-airbnb-x-config

# Using yarn
yarn dlx create-airbnb-x-config

# Using pnpm
pnpx create-airbnb-x-config

# Using bun
bunx create-airbnb-x-config

  9. Configure ESLint using the create-airbnb-x-config prompts

    The CLI guides you through a series of prompts to generate a tailored ESLint config.

    Core Configuration Choices:

    • Config Type:
      • Legacy: A drop-in replacement for original Airbnb configs in flat config format. Automatically includes eslint-plugin-import.
      • Extended: Modern, TypeScript-friendly setup. Automatically includes @stylistic/eslint-plugin and eslint-plugin-import-x.
    • TypeScript: Enabling this adds typescript-eslint and eslint-import-resolver-typescript.
    • Prettier: Enabling this integrates eslint-plugin-prettier and eslint-config-prettier.

    Extended Config Specifics:

    • Environment: Choose between React/React Router (installs eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-jsx-a11y), Next.js (adds @next/eslint-plugin-next), or Node (installs eslint-plugin-n).
    • Strict Configs: Option to apply strict rule sets for Import, React, or TypeScript.

    Legacy Config Specifics:

    • Base Config: Minimal setup using eslint-plugin-import.
    • React Config: Installs eslint-plugin-react and eslint-plugin-jsx-a11y.
    • Hooks: Option to install eslint-plugin-react-hooks.

    Finalization:

    • The tool can automatically create the eslint.config.mjs file.
    • The tool can automatically install the required npm packages or provide the commands for manual installation.

  10. Configure eslint-config-airbnb-extended for a monorepo

    Depending on your project structure, you can apply the ESLint configuration in a monorepo using one of two strategies:

    1. Per-package installation: Run the installation command inside each sub-folder (e.g., /apps/web, /apps/api) to keep configurations isolated.
    2. Root installation: Install the config at the repository root and share it across packages by customizing the eslint.config.mjs file with overrides for specific folders.

  12. Set up the eslint-config-airbnb-extended development environment

    To contribute to eslint-config-airbnb-extended, fork and clone the repository, then install dependencies using pnpm. Ensure you are using the Node.js version specified in the .nvmrc file and the pnpm version specified in the packageManager field of package.json.
    # Clone via SSH
git clone git@github.com:eslint-config/airbnb-extended.git
cd eslint-config-airbnb-extended

# OR Clone via HTTPS
git clone https://github.com/eslint-config/airbnb-extended.git
cd eslint-config-airbnb-extended

# Install dependencies
pnpm install