Guide · Open source
How to use the Airbnb JavaScript Style Guide (with examples)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Airbnb JavaScript Style Guide is a written set of conventions for naming, formatting and using modern JavaScript features. Each rule comes with 'bad' and 'good' code examples and often a short explanation of why. This guide shows you how to read the rules, apply the most common ones, and connect them to the ESLint configs that can enforce them automatically.
Airbnb JavaScript Style Guideairbnb/javascript · ★ 148k · MIT Install options & downloads Quick start
- 1Read the table of contents. Scan the numbered sections to find the topics you care about, such as references, objects or naming conventions.
- 2Check your environment. Confirm that your project uses Babel and the polyfills the guide assumes, or an equivalent setup.
- 3Adopt the reference rules first. Start with const for all references and let where you must reassign, as described in rules 2.1 and 2.2.
- 4Compare bad and good examples. For each rule you adopt, read the bad example and the good example side by side so the change is clear to the whole team.
- 5Enable the ESLint configs. If your project uses ESLint and Node.js, add eslint-config-airbnb or eslint-config-airbnb-base so the rules are checked automatically.
What the Airbnb JavaScript Style Guide covers
The README is organised as a numbered table of contents. It covers types, references, objects, arrays, destructuring, strings, functions, arrow functions, classes and constructors, modules, variables, comparison operators and equality, comments, whitespace, semicolons, naming conventions, and ECMAScript 6+ (ES 2015+) styles, among other topics.
Each rule has a number, such as 1.1 or 2.1, and a link to its own anchor, so you can cite a specific rule in a code review.
- Types: primitives and complex types, such as object, array and function
- References: use const for all references and avoid var
- Objects: literal syntax, computed property names, method and property shorthand
- Naming Conventions, Comments, Whitespace and Semicolons
Read a rule and apply its good example
Rule 2.1 says to use const for all of your references and to avoid var. The README explains that this makes it harder to reassign a reference by accident, which can lead to bugs and code that is hard to follow.
If you must reassign a reference, rule 2.2 says to use let instead of var, because let is block-scoped rather than function-scoped.
// bad
var a = 1;
var b = 2;
// good
const a = 1;
const b = 2;Understand block scope with let, const and var
Rule 2.3 notes that both let and const are block-scoped, whereas var is function-scoped. In the README example, referencing a or b outside the block throws a ReferenceError, while c, declared with var, is still visible and prints 1.
Keeping this difference in mind explains most of the reference rules above.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1Write object literals with shorthand properties
Rule 3.1 asks you to use literal syntax for object creation, so you write {} instead of new Object(). Rule 3.4 asks for property value shorthand when a variable has the same name as its key.
Rule 3.5 says to group shorthand properties at the start of an object declaration, which makes them easier to spot.
- Rule 3.1: use {} rather than new Object()
- Rule 3.3: use method shorthand, such as addValue(value) { ... }
- Rule 3.6: only quote property names that are invalid identifiers
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
lukeSkywalker: lukeSkywalker,
};
// good
const obj = {
lukeSkywalker,
};Enforce the rules with the ESLint configs
The README points to two ESLint configs, eslint-config-airbnb and eslint-config-airbnb-base, which automatically enforce many of the guide's rules in a project. Many rules in the guide name the matching ESLint rule, such as prefer-const, no-var and object-shorthand.
Node.js is required if you use these configs. The README provided here does not state a Node.js version or give install commands, so check the package pages and the README for setup steps.
- Use eslint-config-airbnb for the full rule set
- Use eslint-config-airbnb-base for the base rule set
- Rules with an eslint: label in the guide map to a specific ESLint rule
Check the assumptions before you adopt it
The guide assumes you are using Babel, and it requires babel-preset-airbnb or an equivalent. It also assumes you install shims and polyfills in your app, for example with airbnb-browser-shims or an equivalent.
The guide also notes that Symbols and BigInts cannot be faithfully polyfilled, so avoid them when targeting browsers or environments that do not support them natively.
- Babel and babel-preset-airbnb (or equivalent)
- airbnb-browser-shims (or equivalent) for shims and polyfills
- Avoid Symbol and BigInt when targeting environments without native support
What people use it for
- Give a team one shared JavaScript style so code reviews focus on logic instead of formatting choices.
- Add a ready-made rule set to an existing ESLint project.
- Learn ES2015+ syntax from the bad and good examples for each rule.
- Look up the reason behind a convention when a reviewer asks why a rule exists.
Frequently asked questions
Is the Airbnb JavaScript Style Guide free to use?
Yes. The project is licensed under the MIT licence, as stated in the source. You can read the guide and use it in your own projects under that licence.
What do I need to use the Airbnb JavaScript Style Guide?
The guide itself is a document you can read with no setup. If you want the ESLint configs to enforce the rules, you need Node.js. The guide also assumes Babel and polyfills are in use, as described in the README.
Do I have to install anything to follow the guide?
No. You can read the rules and copy the good examples without installing anything. Installing the eslint-config-airbnb or eslint-config-airbnb-base packages is only needed if you want automatic enforcement.
Is Airbnb's style guide the same as the Google JavaScript Style Guide, StandardJS or Prettier?
No. Google JavaScript Style Guide, StandardJS and Prettier are comparable projects with their own rules. The Airbnb guide is a written set of conventions with examples and reasons, and it pairs with ESLint configs for enforcement.
Does the Airbnb JavaScript Style Guide cover React or CSS?
No. The README links separate guides for React, CSS-in-JavaScript, CSS and Sass, and Ruby. This guide covers plain JavaScript.
Why does the guide say to avoid var?
Rule 2.1 says const prevents accidental reassignment, and rule 2.3 explains that let and const are block-scoped while var is function-scoped, which can make code harder to follow.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Choose the Airbnb JavaScript Style Guide if your team wants one documented set of modern JavaScript conventions, or if you already use ESLint and want a ready-made rule set. Pick something else if your project already follows a different style and you do not want to make many edits, or if you need guidance for React, CSS or Ruby, which the README covers in separate guides.
Install options & downloads