Level Up Your Code with Airbnb's Extended ESLint Configuration

Nisharg Shah — Sat, 26 Apr 2025 11:17:27 +0000

Writing clean and consistent code is super important, not just for you, but for your whole team. That’s why we use ESLint, a tool that checks your code and gives you helpful tips!

You’ve probably heard of the Airbnb ESLint Config — it’s super popular! But here’s the problem 😬 It hasn’t been updated in over 3 years, and it doesn’t work well with the new ESLint 9.

The Solution?

Say hello to eslint-config-airbnb-extended, a newer and smarter version of the Airbnb style guide that works perfectly with ESLint 9 and future versions.

Why Choose eslint-config-airbnb-extended?

eslint-config-airbnb-extended is designed exclusively for ESLint’s flat configuration system, moving away from legacy .eslintrc* files. That means it doesn't use old-style config files anymore and it also supports both JavaScript and TypeScript projects.

eslint-config-airbnb-extended builds upon the solid foundation of Airbnb's style guide, offering:

Airbnb Configuration: Built on top of Airbnb’s highly opinionated ESLint config.
Flat Configuration Support: Embraces ESLint’s flat configuration system, moving away from legacy .eslintrc files for a more streamlined setup.
TypeScript Support: Out-of-the-box TypeScript support for all your code.
Pre-configured Rules: Ready-to-go rules that enforce consistent coding practices.
Enhanced Customization: Provides additional rules and plugins to accommodate a broader range of coding standards and preferences.
Simplified Setup: Offers an automated configuration process to set up your project in seconds with a simple command-line tool.

Getting Started

To quickly integrate eslint-config-airbnb-extended into your project, use the following command:

npx create-airbnb-x-config

This script will guide you through the setup process, configuring ESLint with the extended Airbnb rules tailored to your project’s needs.

This tool will:

Ask you some quick questions
Auto-detect your package manager (npm/yarn/pnpm)
Install all the things you need (or give you commands if you want to do it yourself)
Give you a GitHub link with your custom config
You copy → paste the config into your eslint.config.mjs file

If you want to learn how to set up eslint-config-airbnb-extended the detailed way, check out the full guide. It will show you everything step by step, what you need to install, how to set it up, and how to use it in your code.

If you like doing things yourself, there’s also a part that shows you how to install it manually. That means you’ll get to install each piece one by one and make it work just the way you want.

Key Features

Modern JavaScript Ready: Supports all the cool new stuff in JavaScript, so your code is always up to date, with help from @stylistic/eslint-plugin.
React & JSX Support: Enforces best practices for building React components with clean and maintainable JSX, using eslint-plugin-react and eslint-plugin-jsx-a11y. These packages keep your React code in line with accessibility and best practices.
React Hooks Friendly: Prevents common mistakes with React hooks and enforces the rules of hooks, thanks to eslint-plugin-react-hooks. This ensures that you’re always using hooks in the right way.
Prettier Matching: Works alongside Prettier to keep your code formatting consistent and beautiful. eslint-config-prettier helps ensure that the ESLint rules and Prettier configurations match perfectly for flawless code formatting.
Accessibility First: Encourages accessible UI development with helpful lint rules for JSX accessibility, powered by eslint-plugin-jsx-a11y. It guides you in making your applications more inclusive for users with disabilities.
Smart Imports: Helps manage imports cleanly and correctly, including support for TypeScript paths, using eslint-import-x and eslint-import-resolver-typescript. These packages make sure your imports are well-organized and error-free.
Node.js Best Practices: Includes rules that improve the quality and performance of Node.js applications, with the help of eslint-plugin-n. This package makes sure your backend code follows best practices.
Modular Setup: Well-organized structure using modules like configs, plugins, and rules for easier customization and scalability.

Make it Stricter?

This package also comes with strict configuration options, but they’re not enabled by default. If you’re looking to take your linting game to the next level, you can turn on stricter rules for imports, React, and TypeScript.

For Import Statements

This rule set (rules.base.importsStrict) helps you keep your import statements well-organized and professional by

Making sure imports are always in a consistent order
Separating type imports (used by TypeScript) from regular imports
Follows patterns commonly used in production-level codebases

This makes your files easier to read and maintain, especially as your project grows.

For React Code

The React-specific strict rules (rules.react.strict) help improve your component quality by:

A check to make sure every element inside a list has a unique key prop (important for performance and avoiding bugs)
Automatic sorting of props in JSX (helps with consistency)
Disabling prop-types since you're using TypeScript, which already handles type checking

It encourages cleaner and more modern React practices.

For TypeScript Code

The TypeScript strict rules (rules.typescript.typescriptEslintStrict) are designed to make your code safer and more predictable. They:

Banning @ts-ignore, and instead requiring @ts-expect-error so you know exactly why an error is expected
Disallowing the use of any, which can hide potential bugs
Preventing the use of ! (non-null assertions), which can lead to unexpected crashes
Encouraging better alternatives like ?? (nullish coalescing) and optional chaining (?.) for safer access to values

If you’re passionate about writing clean and consistent code with ESLint, give these strict rules a try. Sure, it might feel a bit strict at first, but once you get used to it, you’ll wonder how you ever coded without it.

So, what are you waiting for? Enable it, explore the rules, and see the difference for yourself. For a complete guide and detailed rule descriptions, refer to the documentation.

Conclusion

Writing clean and consistent code is super important for you and your team. ESLint helps by checking your code and giving tips to make it better. The Airbnb ESLint Config was popular but hasn’t been updated in years, and it doesn’t work well with the newest version of ESLint.

So, we now have eslint-config-airbnb-extended It’s a better version that works perfectly with the latest ESLint and helps with both JavaScript and TypeScript projects. It’s easy to set up and comes with ready-made rules that keep your code clean and consistent.

With eslint-config-airbnb-extended, you get:

A setup that’s super easy and fast to use
Support for modern JavaScript & TypeScript features
Better rules for React, JSX, and accessibility
A perfect match with Prettier to keep your code looking great
Better organization for your imports and Node.js backend code
Strict configurations to make your code better and more reliable.

Now, you can write code that looks good, works well, and follows the best practices! For more details and to explore the full range of features, visit the GitHub repository.

DEV Community: Nisharg Shah