JS Style Guide
Pick a style guide once. Configure a linter and a formatter. Then never argue about it again.
The popular ones
| Guide | Stance | Tooling |
|---|---|---|
| Airbnb | Opinionated, comprehensive. | eslint-config-airbnb |
| StandardJS | No semicolons, simple rules. | standard CLI |
| Conservative, used in Closure. | eslint-config-google | |
| Prettier | Formatting only — no logic rules. | prettier CLI / editor plugin |
Rules most guides agree on
- 2 spaces for indent (no tabs).
- Single quotes for strings, backticks for templates.
- Semicolons or not — pick one and lint.
- One
constper declaration. - Trailing commas on multi-line literals (cleaner diffs).
- No trailing whitespace.
- Final newline at end of file.
- Always use braces around
if/forbodies, even single lines. - Prefer arrow functions for callbacks.
- One export per concept; prefer named over default.
Setup recipe
CLI
npm i -D eslint prettier eslint-config-prettier npx eslint --init # answer the prompts
.prettierrc
{
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 100
}
Editor + git integration
- Format on save — your editor runs Prettier every save.
- Pre-commit hook —
lint-stagedruns ESLint on changed files only. - CI check — fail the build if lint or format isn't clean.
Tip: Pair ESLint (catches bugs) with Prettier (handles formatting). Use
eslint-config-prettier to disable ESLint rules that conflict with Prettier so they don't fight.Example
Example
<!DOCTYPE html>
<html>
<body>
<p id="out"></p>
<script>
document.getElementById("out").textContent = "Hello from JS Style Guide!";
</script>
</body>
</html>
Try it Yourself »
Exercise
Install the formatter recommended in most JS style guides.
npm i -D
Eight-letter package name.
Discussion
Loading…