This document covers the integration of the Airbnb ESLint configurations with code editors, CI/CD pipelines, and development workflows. It explains how to set up real-time linting feedback in editors, configure automated checks in continuous integration systems, and integrate linting into various stages of the development lifecycle.
For information about installing the ESLint packages themselves, see 7.1 Peer Dependencies For configuration options and customization, see 7.2 Configuration and Customization
The Airbnb style guide enforcement operates at multiple stages of the development workflow. ESLint integrates with editors to provide immediate feedback during code writing, executes in CI/CD pipelines to prevent style violations from reaching production, and can be embedded in pre-commit hooks to catch issues before they enter version control.
Development Workflow Integration Points:
Sources: .github/workflows/node.yml1-164 packages/eslint-config-airbnb/README.md7-60 packages/eslint-config-airbnb-base/README.md11-63
While ESLint is the primary tool for modern Airbnb projects, the repository maintains legacy support for JSHint and JSHint-based editor integrations.
Editor Support Matrix:
| Editor | Integration Method | Real-time Linting | Configuration File |
|---|---|---|---|
| Visual Studio Code | ESLint Extension | ✓ | .eslintrc |
| Sublime Text | SublimeLinter-eslint / JSHint | ✓ | SublimeLinter.sublime-settings |
| WebStorm/IntelliJ | Built-in ESLint | ✓ | .eslintrc |
For users of Sublime Text 2/3, the repository provides specific settings for SublimeLinter at linters/SublimeLinter/SublimeLinter.sublime-settings1-73
Key JSHint Enforcements:
camelcase or UPPER_CASE variable names linters/SublimeLinter/SublimeLinter.sublime-settings38'use strict' at the top of function scopes linters/SublimeLinter/SublimeLinter.sublime-settings71quotmark: "single") linters/SublimeLinter/SublimeLinter.sublime-settings56Sources: linters/SublimeLinter/SublimeLinter.sublime-settings1-73 linters/.jshintrc1-62
The repository uses GitHub Actions for continuous integration, defined in .github/workflows/node.yml1-167 This workflow tests both the base and React configurations across multiple Node.js and ESLint versions.
CI Job Structure:
| Job Name | Purpose | File Reference |
|---|---|---|
base | Tests eslint-config-airbnb-base against ESLint 7 & 8 | .github/workflows/node.yml21-57 |
react | Tests eslint-config-airbnb with React hooks | .github/workflows/node.yml58-94 |
prepublish-base | Runs prepublishOnly checks for base config | .github/workflows/node.yml95-125 |
prepublish-react | Runs prepublishOnly checks for React config | .github/workflows/node.yml126-160 |
CI Workflow Logic:
Sources: .github/workflows/node.yml1-167 .github/workflows/node-pretest.yml1-30
Airbnb provides specialized entry points that tools can consume to differentiate between critical errors and formatting warnings.
The whitespace entry point errors only on whitespace rules and sets all other rules to warnings packages/eslint-config-airbnb/README.md74-76 This is useful for "format-only" CI passes or automated fixers.
Configuration Entry Points:
eslint-config-airbnb/whitespace: For React projects packages/eslint-config-airbnb/README.md74-76eslint-config-airbnb-base/whitespace: For non-React projects packages/eslint-config-airbnb-base/README.md103-105Sources: packages/eslint-config-airbnb/README.md74-76 packages/eslint-config-airbnb-base/README.md103-105
To simplify integration for new projects, the documentation recommends using install-peerdeps to handle the complex peer dependency tree packages/eslint-config-airbnb/README.md17-57
Automated Setup Commands:
npx install-peerdeps --dev eslint-config-airbnb packages/eslint-config-airbnb/README.md26peerDependencies via npm info and sed to install them alongside the config packages/eslint-config-airbnb/README.md35-39The packages are designed to be self-hosting. Developers can ensure the module lints with its own rules by running:
Tests are executed via npm test packages/eslint-config-airbnb/README.md94-96
For React projects, the airbnb/hooks entry point must be explicitly added to the editor's ESLint configuration to enable hook-specific linting (requires React v16.8+) packages/eslint-config-airbnb/README.md70-72
Example .eslintrc extension:
Sources: packages/eslint-config-airbnb/README.md70-72 packages/eslint-config-airbnb-base/README.md107-113
By default, ESLint only lints .js files. If an editor or CI tool is not reporting issues in .jsx or .mjs files, ensure the --ext flag is passed to the CLI packages/eslint-config-airbnb/README.md61-68
If an editor fails to load the Airbnb config, verify that all peer dependencies are present. The eslint-config-airbnb package requires:
eslinteslint-plugin-importeslint-plugin-reacteslint-plugin-react-hookseslint-plugin-jsx-a11ySources: packages/eslint-config-airbnb/README.md11-15 packages/eslint-config-airbnb/README.md61-68 packages/eslint-config-airbnb-base/README.md15-17
Refresh this wiki