Enforcing Code Quality and Style Consistency in JavaScript Projects
eslint-config-airbnb, eslint-config-google, and eslint-config-standard are shared configuration packages for ESLint that enforce specific coding styles and best practices. eslint-config-airbnb is known for its comprehensive rule set tailored for React applications, including strict accessibility and import order checks. eslint-config-google implements the Google JavaScript Style Guide, focusing on readability and simplicity with fewer dependencies. eslint-config-standard promotes a no-configuration approach, enforcing a specific style automatically without requiring an ESLint config file.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
ESLint Config Showdown: Airbnb vs Google vs Standard
Choosing the right ESLint configuration is a critical architectural decision that impacts code consistency, developer onboarding, and long-term maintenance. eslint-config-airbnb, eslint-config-google, and eslint-config-standard represent three distinct philosophies on how JavaScript code should look and behave. Let's break down how they handle setup, framework support, and rule enforcement.
🛠️ Setup & Dependencies: Heavy vs Light vs None
eslint-config-airbnb requires a significant number of peer dependencies to function correctly.
- You must install plugins for React, imports, and accessibility manually.
- This ensures all rules work but increases initial setup time.
// .eslintrc.json for Airbnb
{
"extends": ["airbnb", "airbnb/hooks"],
"plugins": ["react", "jsx-a11y", "import"]
}
eslint-config-google has a lighter dependency tree.
- It primarily relies on
eslint-plugin-import. - Setup is faster with fewer packages to manage.
// .eslintrc.json for Google
{
"extends": ["google"],
"plugins": ["import"]
}
eslint-config-standard aims for zero configuration.
- It often works best when using the
standardCLI tool instead of ESLint directly. - If used as a config, it still requires specific plugins like
eslint-plugin-promise.
// .eslintrc.json for Standard
{
"extends": ["standard"],
"plugins": ["promise", "node"]
}
⚛️ React & JSX Support: Built-In vs Add-On vs Minimal
eslint-config-airbnb is built specifically for React development.
- It includes extensive rules for JSX syntax and component structure.
- Accessibility rules are enabled by default to enforce inclusive code.
// Airbnb: Enforces alt text on images
// <img src="logo.png" /> ❌ Error: Missing alt prop
<img src="logo.png" alt="Company Logo" /> ✅ Pass
eslint-config-google treats React as standard JavaScript.
- It does not enforce React-specific best practices out of the box.
- You may need additional plugins to catch common React mistakes.
// Google: No specific React JSX rules by default
// <img src="logo.png" /> ✅ Passes (unless custom rules added)
<img src="logo.png" alt="Company Logo" /> ✅ Pass
eslint-config-standard focuses on general JavaScript style.
- It does not prioritize React or JSX conventions.
- Teams building React apps often need to extend it with React-specific configs.
// Standard: Focuses on JS syntax, not JSX semantics
// <img src="logo.png" /> ✅ Passes standard JS checks
<img src="logo.png" alt="Company Logo" /> ✅ Pass
📘 TypeScript Compatibility: Official vs Community vs None
eslint-config-airbnb offers an official TypeScript variant.
- Use
eslint-config-airbnb-typescriptfor full support. - This ensures type-aware rules work alongside style rules.
// Airbnb TypeScript setup
{
"extends": ["airbnb-typescript"]
}
eslint-config-google lacks an official TypeScript configuration.
- Teams must rely on community-maintained versions or manual overrides.
- This can lead to inconsistencies when mixing JS and TS files.
// Google TypeScript setup (Community maintained)
{
"extends": ["google", "plugin:@typescript-eslint/recommended"]
}
eslint-config-standard provides a dedicated TypeScript package.
- Use
eslint-config-standard-with-typescriptfor proper integration. - It aligns Standard style rules with TypeScript compiler checks.
// Standard TypeScript setup
{
"extends": ["standard-with-typescript"]
}
📏 Rule Philosophy: Strict vs Readable vs Opinionated
eslint-config-airbnb prioritizes safety and consistency.
- It forbids unused variables and requires explicit return types in some cases.
- This reduces bugs but can feel restrictive during rapid prototyping.
// Airbnb: Disallows unused variables
const unused = 1; ❌ Error: 'unused' is assigned a value but never used
eslint-config-google prioritizes human readability.
- It enforces semicolons and specific quote styles strictly.
- The goal is to make code look uniform across large teams.
// Google: Requires semicolons
const value = 1 ❌ Error: Missing semicolon
const value = 1; ✅ Pass
eslint-config-standard prioritizes developer comfort.
- It omits semicolons and uses single quotes by default.
- This reduces typing but may clash with other team conventions.
// Standard: Omits semicolons
const value = 1 ✅ Pass
const value = 1; ❌ Error: Extra semicolon
📊 Summary: Key Differences
| Feature | eslint-config-airbnb | eslint-config-google | eslint-config-standard |
|---|---|---|---|
| Primary Focus | React & Safety | Readability & Simplicity | Zero Config & Speed |
| Setup Effort | High (Many deps) | Low (Few deps) | None (CLI preferred) |
| React Support | ✅ Extensive | ⚠️ Minimal | ⚠️ Minimal |
| TypeScript | ✅ Official Config | ❌ Community Only | ✅ Official Config |
| Semicolons | ✅ Required | ✅ Required | ❌ Omitted |
| Quotes | Single | Single | Single |
💡 The Big Picture
eslint-config-airbnb is the enterprise choice 🏢 — best for large React teams that need strict guardrails and accessibility enforcement. It requires more setup but pays off in code safety.
eslint-config-google is the minimalist choice 📄 — ideal for libraries or teams that want a clean, readable style without React-specific overhead. It is stable but less feature-rich for modern frameworks.
eslint-config-standard is the speed choice 🏎️ — perfect for small teams or prototypes that want to skip configuration entirely. Consider using the standard CLI tool for the best experience.
Final Thought: All three tools aim to reduce debate about code style. Your choice should depend on your framework needs and how much control you want over the rules.
How to Choose: eslint-config-airbnb vs eslint-config-standard vs eslint-config-google
- eslint-config-airbnb:
Choose
eslint-config-airbnbif you are building React applications and want a battle-tested, strict rule set that covers accessibility and import hygiene. It is ideal for teams that prefer explicit configuration and need strong community support for modern JavaScript features. Be prepared to install several peer dependencies to satisfy its requirements. - eslint-config-standard:
Choose
eslint-config-standardif you want to avoid maintaining an ESLint configuration file entirely. It is perfect for teams that agree on the Standard style rules and want to focus on logic rather than style debates. Note that using thestandardCLI tool is often recommended over installing the config package directly. - eslint-config-google:
Choose
eslint-config-googleif your team values simplicity and aligns with the Google JavaScript Style Guide. It works well for projects that want clear, readable code without the heavy overhead of React-specific rules. This option is suitable for libraries or backend services where minimal configuration is preferred.
Popular Comparisons
README for eslint-config-airbnb
eslint-config-airbnb
This package provides Airbnb's .eslintrc as an extensible shared config.
Usage
We export three ESLint configurations for your usage.
eslint-config-airbnb
Our default export contains most of our ESLint rules, including ECMAScript 6+ and React. It requires eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y. Note that it does not enable our React Hooks rules. To enable those, see the eslint-config-airbnb/hooks section.
If you don't need React, see eslint-config-airbnb-base.
- Install the correct versions of each package, which are listed by the command:
npm info "eslint-config-airbnb@latest" peerDependencies
If using npm 5+, use this shortcut
npx install-peerdeps --dev eslint-config-airbnb
If using yarn, you can also use the shortcut described above if you have npm 5+ installed on your machine, as the command will detect that you are using yarn and will act accordingly.
Otherwise, run npm info "eslint-config-airbnb@latest" peerDependencies to list the peer dependencies and versions, then run yarn add --dev <dependency>@<version> for each listed peer dependency.
If using npm < 5, Linux/OSX users can run
(
export PKG=eslint-config-airbnb;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)
Which produces and runs a command like:
npm install --save-dev eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# eslint-plugin-react-hooks@^#.#.#
If using npm < 5, Windows users can either install all the peer dependencies manually, or use the install-peerdeps cli tool.
npm install -g install-peerdeps
install-peerdeps --dev eslint-config-airbnb
The cli will produce and run a command like:
npm install --save-dev eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# eslint-plugin-react-hooks@^#.#.#
- Add
"extends": "airbnb"to your.eslintrc
eslint-config-airbnb/hooks
This entry point enables the linting rules for React hooks (requires v16.8+). To use, add "extends": ["airbnb", "airbnb/hooks"] to your .eslintrc.
eslint-config-airbnb/whitespace
This entry point only errors on whitespace rules and sets all other rules to warnings. View the list of whitespace rules here.
eslint-config-airbnb/base
This entry point is deprecated. See eslint-config-airbnb-base.
eslint-config-airbnb/legacy
This entry point is deprecated. See eslint-config-airbnb-base.
See Airbnb's JavaScript styleguide and the ESlint config docs for more information.
Improving this config
Consider adding test cases if you're making complicated rules changes, like anything involving regexes. Perhaps in a distant future, we could use literate programming to structure our README as test cases for our .eslintrc?
You can run tests with npm test.
You can make sure this module lints with itself using npm run lint.