Introduction to Airbnb JavaScript Style Guide
Relevant source files
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:
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.md59airbnb/hooks: Enables React Hooks rules (requires v16.8+) packages/eslint-config-airbnb/README.md61-63airbnb/whitespace: Errors only on whitespace rules, sets others to warnings packages/eslint-config-airbnb/README.md65-67airbnb-base: Standard base config for non-React projects packages/eslint-config-airbnb-base/README.md63airbnb-base/legacy: Lints ES5 and below packages/eslint-config-airbnb-base/README.md65-67airbnb-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:
- Development-time: ESLint integrates with editors. For example,
SublimeLintersettings enforceindent: 2,quotmark: "single", andmaxlen: 80linters/SublimeLinter/SublimeLinter.sublime-settings46-68 - Pre-commit/Post-install: The root
package.jsonmanages installation of configurations across the monorepo usinginstall:configandinstall:config:basescripts package.json8-9 - CI/CD: Automated pipelines run
npm test, which triggerstest:configandtest:config:basepackage.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-airbnbor equivalent README.md5 - Shims/Polyfills: Requires
airbnb-browser-shimsor 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:
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
Refresh this wiki
On this page
- Introduction to Airbnb JavaScript Style Guide
- Purpose and Scope
- Repository Architecture
- Style Flow Architecture
- Component Overview
- Documentation Layer
- ESLint Configuration Packages
- Internal Package Structure
- Configuration Entry Points
- Enforcement Pipeline
- Package Dependencies and Tooling
- Assumed Build Tools
- Peer Dependency Management
- Repository Structure
- Directory Map
- Development and Testing
- Test Scripts
- Documentation Linting
