JavaScript Style Guide Configurations for ESLint
eslint-config-airbnb, eslint-config-google, eslint-config-standard, and eslint-config-prettier are ESLint shareable configurations that enforce coding styles or resolve tooling conflicts. The first three are opinionated style guides from major organizations or communities, dictating rules for JavaScript syntax, spacing, and best practices. eslint-config-prettier, however, is not a style guide—it disables ESLint rules that conflict with Prettier’s code formatter, allowing the two tools to work together without overlap. These packages are typically extended in an ESLint configuration file to standardize code across teams and projects.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
ESLint Style Guide Configurations: Airbnb vs Google vs Standard vs Prettier
Choosing an ESLint configuration isn’t just about code formatting—it’s about adopting a team-wide contract for consistency, readability, and maintainability. The four packages you’re comparing—eslint-config-airbnb, eslint-config-google, eslint-config-standard, and eslint-config-prettier—serve different but sometimes overlapping roles in the JavaScript linting ecosystem. Let’s unpack what each does, how they differ technically, and when to use which.
🧩 Core Purpose: What Each Package Actually Does
eslint-config-airbnb, eslint-config-google, and eslint-config-standard are opinionated style guides. They enforce specific JavaScript coding conventions—from variable naming to brace placement—based on their respective organizations’ internal practices.
eslint-config-prettier, by contrast, is not a style guide. It’s a disabler: it turns off all ESLint rules that might conflict with Prettier’s code formatting. It assumes you’re already using Prettier for formatting and want ESLint to focus only on code quality (bugs, security, best practices), not stylistic choices like spacing or quotes.
This distinction is critical: mixing eslint-config-prettier with one of the others is common; using it alone is almost never sufficient.
📏 Code Style Enforcement: Real-World Rule Differences
Let’s compare how each style guide handles three common scenarios.
1. Quoting Strings
// eslint-config-airbnb
const message = 'Hello'; // ✅ Single quotes required
// eslint-config-google
const message = "Hello"; // ✅ Double quotes required
// eslint-config-standard
const message = 'Hello'; // ✅ Single quotes preferred
💡 Note:
eslint-config-prettierdoesn’t care—it disablesquotesrule entirely if Prettier is used.
2. Function Parentheses in Arrow Functions
// eslint-config-airbnb
const add = (a, b) => a + b; // ✅ Parens required for multiple params
// eslint-config-google
const add = (a, b) => a + b; // ✅ Same as Airbnb
// eslint-config-standard
const add = (a, b) => a + b; // ✅ Also requires parens
All three agree here—but differ elsewhere, like in object literal spacing or comma dangles.
3. Semicolons
// eslint-config-airbnb
const x = 1; // ✅ Semicolon required
// eslint-config-google
const x = 1; // ✅ Semicolon required
// eslint-config-standard
const x = 1 // ✅ No semicolon (ASI assumed)
Standard’s no-semicolon stance is one of its most visible differences—and a frequent source of team debates.
⚙️ Setup Complexity and Peer Dependencies
Each config has different installation requirements:
eslint-config-airbnb requires installing peer dependencies explicitly:
npx install-peerdeps --dev eslint-config-airbnb
It pulls in eslint-plugin-react, so it’s geared toward React projects—even if you’re not using JSX, you’ll get React-specific rules unless you override them.
eslint-config-google is simpler:
npm install --save-dev eslint-config-google
No mandatory peer deps. Works cleanly with plain JavaScript or TypeScript (with @typescript-eslint/parser).
eslint-config-standard also has peer dependencies, but fewer:
npm install --save-dev eslint-config-standard eslint-plugin-import
It avoids framework-specific assumptions, making it more neutral for vanilla JS or Node.js backends.
eslint-config-prettier is the lightest:
npm install --save-dev eslint-config-prettier
But remember: it must be combined with another config (or your own rules) to be useful. Typical usage:
{
"extends": [
"standard",
"prettier"
]
}
The order matters—prettier should come last to override conflicting rules.
🛠️ Integration with Prettier: The Critical Overlap
If your team uses Prettier (and most do), then eslint-config-prettier is non-negotiable—but not as a standalone.
Without it, ESLint and Prettier can fight:
- ESLint says: “Add a space before the function paren.”
- Prettier says: “Remove that space.”
Result: broken auto-fix loops and developer frustration.
So the real-world setup usually looks like this:
// .eslintrc.json
{
"extends": [
"airbnb-base", // or "google", or "standard"
"prettier" // disables conflicting rules
],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
Note: airbnb-base is used here instead of airbnb to skip React rules if you’re not in a React project.
🎯 When to Choose Which
Use eslint-config-airbnb if:
You’re building a React application and want a battle-tested, comprehensive style guide that enforces functional patterns, immutability, and component best practices. Be prepared to manage its React-centric defaults if you’re not using React.
Use eslint-config-google if:
You prefer a clean, minimal style that aligns with Google’s public JavaScript style guide—especially if you’re working on libraries, Node.js services, or mixed frontend/backend codebases without strong framework ties.
Use eslint-config-standard if:
Your team values simplicity, avoids semicolons, and wants a zero-configuration feel (despite requiring a few peer deps). It’s popular in open-source Node.js projects and works well when paired with Prettier.
Use eslint-config-prettier if:
You’re already using Prettier and need to prevent rule conflicts with ESLint. Never use it alone—it’s a companion, not a complete solution.
🔁 Common Misconceptions
-
Myth: “Prettier replaces ESLint.”
- Truth: Prettier handles formatting; ESLint catches bugs and logic errors. They’re complementary.
-
Myth: “Standard means no config.”
- Truth: It still requires installation and may need overrides for edge cases (e.g., disabling
no-unused-varsduring development).
- Truth: It still requires installation and may need overrides for edge cases (e.g., disabling
-
Myth: “Airbnb config is only for Airbnb employees.”
- Truth: It’s open and widely adopted—but its React bias can be a mismatch for non-React projects.
✅ Final Recommendation
For most modern teams:
- Pick one opinionated style guide (
airbnb,google, orstandard) based on your project type and team preferences. - Always add
eslint-config-prettierat the end of yourextendsarray. - Use
eslint-plugin-prettierto surface Prettier errors as ESLint errors during linting.
This combo gives you consistent formatting (via Prettier), strong code quality checks (via ESLint), and zero rule conflicts—without reinventing the wheel.
How to Choose: eslint-config-airbnb vs eslint-config-google vs eslint-config-prettier vs eslint-config-standard
- eslint-config-airbnb:
Choose
eslint-config-airbnbif you're working on a React project and want a comprehensive, widely adopted style guide that enforces functional programming patterns, strict variable scoping, and React best practices. Be aware it includes React-specific rules by default, so useeslint-config-airbnb-basefor non-React JavaScript projects. - eslint-config-google:
Choose
eslint-config-googleif you prefer a clean, minimal style aligned with Google's public JavaScript conventions, especially for libraries, Node.js services, or projects without heavy framework dependencies. It enforces double quotes, semicolons, and clear function signatures without assuming a specific UI framework. - eslint-config-prettier:
Choose
eslint-config-prettieronly as a companion to another ESLint config when you're using Prettier for code formatting. It disables all ESLint rules that could conflict with Prettier, ensuring the two tools don't fight over spacing, quotes, or line breaks. Never use it alone—it provides no style enforcement by itself. - eslint-config-standard:
Choose
eslint-config-standardif your team prefers a no-semi-colon style, minimal configuration overhead, and a community-driven standard popular in open-source Node.js projects. It avoids framework-specific assumptions and works well when paired with Prettier viaeslint-config-prettier.
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.