Why Use AirBnB’s ESLint Configuration? (21 Best Rules!)

Properly formatted code is a widely agreed-upon virtue in the craft of programming. There are sometimes differences of opinions on exactly what the right format is, but generally it is formatting that contributes to the readability of code and understanding of the intent of the code.

Perhaps the most common rules list for ESLint is the AirBnB style guide. As of mid-2021, it gets over 2.5 million downloads per week from NPM.

However, before adding something to our project, we should know what it is and what value it provides.

What is AirBnB’s ESLint Config Package?

A brief technical perspective:

AirBnB released a free downloadable package (eslint-config-airbnb) that contains an .eslintrc file with AirBnB’s recommended ESLint rules. This can easily be plugged into your project and AirBnB style rules are applied.

A Code Style perspective:

AirBnB’s team developed an in-house JavaScript code format guide (code style guide) that dictates rules about whitespace usage, naming conventions, proper caching, and more.

They also have a React style guide and a CSS-in-JavaScript style guide.

The eslint-config-airbnb package specifically contains JavaScript and React rules. Many of the rules in their Style Guides can be transformed to programmatic ESLint rules via .eslintrc, but not all.

To summarize, the package translates clean code and code formatting standards developed by AirBnB into rules enforced by ESLint.

Why use AirBnB’s ESLint Config and Style Guide?

1. The AirBnB rules list is an excellent platform for starting out and can save you many hours
   • You can modify and overwrite rules as you create your own standards and opinions
   • It’s especially helpful for new devs who otherwise might be inexperienced or unaware of the possibilities ESLint offers
   • Did I mention it saves time?
2. AirBnB is hiring some of the smartest devs in the world. I believe it is wise to learn from them.
   • I’m not saying you should surrender your curiosity or blindly follow the ‘experts’.
   • However, it is wise to learn from others and not reinvent the wheel.
3. If coding is a craft, there is art and beauty in perfection.
   • Reading the AirBnB style guide is an excellent reinforcement for all levels of devs
   • It’s like a concise version of Bob Martin’s book “Clean Code”.

The 21 Best Rules in AirBnB’s ESLint Rules List and Style Guide

These are style guide rules that caught my eye. Are they really the 21 best? Read the style guide and decide for yourself.

All of these rules are found in the style guide; most of them have a related .eslintrc rule in eslint-airbnb-config that enforces the recommended behavior. The style guide rules that don’t have related eslint rules are simply not programmatically enforceable.

1. Use less boilerplate code (rules 3.3 and 3.4). Drop reserved words where possible.
2. Eliminate quotes and improve optimization (3.6). This can actually improve performance.
3. Use prototype instead of calling object methods directly (3.7). I need some self-scrutiny here.
4. Usually we should use spread operators, but not when mapping over iterables (4.5). This avoids creating an unneeded extra array.
5. Please format arrays of objects nicely with new lines for each brace (4.7).
6. Avoid creating unneeded references when you can use object destructuring (5.1).
7. Don’t break strings into multiple lines (6.2)? I’m not sure I agree with this one…yes, it makes the code less searchable, but I think it’s harder to work with a one-line giant string.
8. Use well-named function expressions (7.1). Bob Martin would be proud.
9. Instead of pulling values from the arguments parameter, use rest syntax (7.5 and 7.6)
10. Always put default params last (7.9). A function is far more readable this way.
11. Don’t mutate parameters passed into a function (7.12). This can have unintended results.
12. Use higher-order functions instead of old-school loops (11.1).
13. Don’t use bracket notation to access properties (12.1).
14. Don’t declare multiple variables using const and commas (13.2). This is an important one: declaring one const or let for each variable lets you step through each line with the debugger.
15. This one is interesting: don’t use ++ (13.6). It can cause bugs due to automatic semicolon insertion. Who knew?
16. Use triple equals, not double equals (15.1). This is obvious…to most people. But then one day you find yourself transferred to a project with 30,000 lines of code using ==.
17. Put the else on the same line as the closing curly brace of the if (16.2). This one seems nit-picky…but it’s good to have everyone on a team formatting code the same way.
18. Don’t rely on the second half of an && statement to execute your code (17.2). This gives me something to consider…I like assigning variables this way.
19. Don’t use JavaScript getters and Setters (24.2). I personally think they are harder to read.
20. Cache any lookups (26.2). The style guide refers to jQuery, which I hope you don’t care about anymore. However, the concept is good.
21. Use /**/ for multi-line comments (18.1). When you decide a comment is necessary, make sure it’s easy to read.

These 20 rules are only from the JavaScript style guide, not the React guide. Rules from the React guide are incorporated into the AirBnB rules package as well.

Is TypeScript Compatible with eslint-config-airbnb ?

Yes, with eslint-config-airbnb-typescript. It doesn’t have TypeScript-specific rules, it is simply compatible.

Resources

Here’s how to fix the “Missing file extension ‘tsx'” error.

ESLint AirBnB package.

TypeScript-ESLint AirBnB package.

Since you like JavaScript, check out my list of 50 difficult JS questions.

Since you also like TypeScript, check out my list of 50 difficult TS questions.

Read this to learn how to use ESLint –fix in your project.

Now that you’ve learned about setting ESLint rules in your project, here’s how to disable those same rules.

Installing the AirBnB style guide also installs an accessibility plugin called jsx-a11y. Here’s how to use eslint-plugins-jsx-a11y to make your site more accessible.