跪拜 Guibai
← All articles
Frontend · JavaScript

ESLint's First Five Rules: A Beginner's Confrontation with the Code Security Guard

By 默_笙 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

These five rules are the first gate a new team member hits, and they eliminate the most common friction in code review—stylistic nitpicking. Getting them right in a flat config from day one means reviewers spend time on logic, not on quote-style arguments.

Summary

A first encounter with ESLint quickly turns into a tour of the five rules that define a team's baseline code hygiene. The `no-var` rule blocks a whole class of scope and hoisting bugs at the source. The `quotes` and `semi` rules enforce double quotes and mandatory semicolons, making code from multiple contributors read as if written by one person. The `indent` rule locks spacing to two spaces, preventing the visual chaos of mixed preferences. Finally, `no-console` set to warn level allows logging during development but flags it before production, treating leftover console statements as a cleanup task rather than a build-breaking error. The configuration layers a flat config file with JS and TS recommended rule sets, Node globals, and a handful of custom overrides.

Takeaways
`no-var` set to error level (2) blocks var declarations entirely, preventing scope leaks and hoisting bugs.
`quotes` and `semi` enforce double quotes and mandatory semicolons, making multi-author code visually consistent.
`indent` locked to two spaces removes indentation debates and keeps diffs clean across editors.
`no-console` at warn level (1) allows logging during development but flags leftover statements before production.
Rule severity uses three levels: 0 (off), 1 (warn, does not block), and 2 (error, must be fixed).
A flat ESLint config layers JS recommended rules, TS recommended rules, environment globals, and custom overrides in a single array.
Conclusions

Stylistic rules like quotes and semicolons are not about correctness—they are about reducing the cognitive tax of reading code written by multiple people.

Setting no-console to warn rather than error is a practical compromise: it keeps the build green during development while still surfacing cleanup work before a release.

The flat config format shown here bundles JS and TS rule sets together, which means a single configuration file covers both languages without separate overrides.

Concepts & terms
Flat ESLint config (eslint.config.mjs)
The newer configuration format for ESLint that uses an array of configuration objects instead of the legacy .eslintrc format. It supports ES modules and merges rules, plugins, and language options in a single file.
Rule severity levels (0, 1, 2)
ESLint's numeric system for rule enforcement: 0 turns a rule off, 1 reports a warning that does not block compilation, and 2 reports an error that must be fixed before the build passes.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗