Introduction to Airbnb JavaScript Style Guide

Relevant source files

• CODE_OF_CONDUCT.md
• LICENSE.md
• README.md
• css-in-javascript/README.md
• linters/.markdownlint.json
• linters/SublimeLinter/SublimeLinter.sublime-settings
• package.json
• packages/eslint-config-airbnb-base/README.md
• packages/eslint-config-airbnb/README.md

Purpose and Scope

The Airbnb JavaScript Style Guide repository provides a comprehensive JavaScript coding standard that is both documented and enforceable. It consists of three human-readable style guides (JavaScript, React/JSX, and CSS-in-JavaScript) alongside two npm packages (eslint-config-airbnb and eslint-config-airbnb-base) that encode these standards as executable ESLint configurations README.md1-20

This introduction covers the overall repository structure, component relationships, and how the documentation and enforcement mechanisms work together. For implementation details of the ESLint packages, see ESLint Package Architecture.

Sources: README.md1-6 packages/eslint-config-airbnb/README.md1-15 packages/eslint-config-airbnb-base/README.md1-9

---

Repository Architecture

The repository implements a three-layer architecture where style conventions flow from documentation through configuration packages to runtime enforcement:

Style Flow Architecture

Sources: README.md1-61 packages/eslint-config-airbnb/README.md6-15 packages/eslint-config-airbnb-base/README.md9-17 linters/SublimeLinter/SublimeLinter.sublime-settings1-14

---

Component Overview

Documentation Layer

The repository contains three style guide documents that define conventions in natural language with code examples:

Guide	Location	Purpose	Coverage
JavaScript Style Guide	README.md	Core JavaScript patterns and syntax	Types, references, objects, arrays, destructuring, strings, functions, arrow functions, classes, modules, iterators, comparison operators, control flow, whitespace, naming README.md21-61
React/JSX Style Guide	react/README.md	React-specific component patterns	Component structure, props, state, PropTypes, JSX formatting, accessibility, lifecycle methods, hooks README.md16
CSS-in-JavaScript Guide	css-in-javascript/README.md	Styling conventions for React	Naming, ordering, nesting, inline styles, themes css-in-javascript/README.md5-12

ESLint Configuration Packages

The repository publishes two npm packages that translate the documented conventions into executable ESLint rules:

Internal Package Structure

Key Package Characteristics:

Package	Peer Dependencies	Use Case
eslint-config-airbnb-base	eslint, eslint-plugin-import	Non-React JavaScript projects packages/eslint-config-airbnb-base/README.md15-17
eslint-config-airbnb	eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-jsx-a11y	React projects (extends base) packages/eslint-config-airbnb/README.md11-13

---

Configuration Entry Points

Both packages provide multiple entry points for different use cases via the extends property in a project's .eslintrc:

• airbnb: Full React + Base config packages/eslint-config-airbnb/README.md59
• airbnb/hooks: Enables React Hooks rules (requires v16.8+) packages/eslint-config-airbnb/README.md61-63
• airbnb/whitespace: Errors only on whitespace rules, sets others to warnings packages/eslint-config-airbnb/README.md65-67
• airbnb-base: Standard base config for non-React projects packages/eslint-config-airbnb-base/README.md63
• airbnb-base/legacy: Lints ES5 and below packages/eslint-config-airbnb-base/README.md65-67
• airbnb-base/whitespace: Whitespace-only variant for base config packages/eslint-config-airbnb-base/README.md93-95

Sources: packages/eslint-config-airbnb/README.md61-75 packages/eslint-config-airbnb-base/README.md65-95

---

Enforcement Pipeline

The style guide is enforced at multiple stages of the development workflow:

1. Development-time: ESLint integrates with editors. For example, SublimeLinter settings enforce indent: 2, quotmark: "single", and maxlen: 80 linters/SublimeLinter/SublimeLinter.sublime-settings46-68
2. Pre-commit/Post-install: The root package.json manages installation of configurations across the monorepo using install:config and install:config:base scripts package.json8-9
3. CI/CD: Automated pipelines run npm test, which triggers test:config and test:config:base package.json12-14

Sources: package.json5-18 linters/SublimeLinter/SublimeLinter.sublime-settings1-72

---

Package Dependencies and Tooling

The ESLint configurations require specific peer dependencies and assume certain build tools:

Assumed Build Tools

• Babel: The guide assumes usage of Babel and requires babel-preset-airbnb or equivalent README.md5
• Shims/Polyfills: Requires airbnb-browser-shims or equivalent for environment compatibility README.md5

Peer Dependency Management

Installation is typically handled via npx install-peerdeps --dev eslint-config-airbnb for npm 5+ users packages/eslint-config-airbnb/README.md23-26

Sources: README.md5 packages/eslint-config-airbnb/README.md17-30 packages/eslint-config-airbnb-base/README.md19-33

---

Repository Structure

Directory Map

Sources: package.json1-46 css-in-javascript/README.md1-4 linters/.markdownlint.json1-10

---

Development and Testing

The repository includes testing infrastructure to validate the ESLint configurations and documentation:

Test Scripts

From package.json package.json5-18:

Script	Command	Purpose
lint	markdownlint --config linters/.markdownlint.json README.md */README.md	Validates documentation style
test	npm run test:config && npm run test:config:base	Executes package-specific test suites
preinstall	npm run install:config && npm run install:config:base	Bootstraps package dependencies

Documentation Linting

The repository uses markdownlint to enforce documentation quality, with specific rules like ul-indent: 2 and no-hard-tabs linters/.markdownlint.json28-43

Sources: package.json5-18 linters/.markdownlint.json1-155