跪拜 Guibai
← All articles
Frontend · Backend · Code Standards

ESLint Catches the Bugs Code Review Misses

By 东风破_ ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

A single assignment inside an if-condition deletes user accounts and throws no error. ESLint catches that class of bug at keystroke speed, not in production, and removes the cognitive churn of style arguments from code review so teams spend their attention on logic and architecture instead.

Summary

ESLint parses source into an AST and walks every node against configurable rules, catching mistakes like accidental assignments inside conditionals, unreachable code after return, and unused variables the moment they're typed. It eliminates style debates—tabs versus spaces, semicolons or not—by hardening those decisions into automated checks that run in the editor and at commit time.

TypeScript support comes through @typescript-eslint, which adds type-aware rules that flag explicit any, unsafe assertions, and non-null assertion abuse. Pairing ESLint with Prettier splits the work: ESLint owns code correctness and best practices, Prettier owns formatting, and eslint-config-prettier shuts off the overlapping rules.

A git hook setup with husky and lint-staged blocks commits that fail linting, scanning only staged files to keep the feedback loop fast. Flat config, the default in ESLint 9+, replaces inheritance chains with arrays, making it obvious where every rule originates.

Takeaways
ESLint parses JavaScript/TypeScript into an AST and checks every node against rules, reporting problems without executing the code.
Accidental assignment in a conditional (if (isAdmin = true)) runs silently; the no-cond-assign rule flags it immediately.
Style rules like indent, quotes, and semi turn subjective formatting debates into automated, enforceable checks.
@typescript-eslint adds type-aware linting that catches explicit any, unsafe type assertions, and non-null assertion overuse.
Prettier handles pure formatting; ESLint handles code quality. eslint-config-prettier disables the formatting rules that would conflict.
Flat config (eslint.config.js) replaces nested extends chains with a plain array, making rule provenance explicit.
Husky plus lint-staged runs ESLint only on staged files at commit time, blocking commits that fail and keeping scans fast.
Conclusions

ESLint's value is not just error detection but social: it removes an entire category of low-stakes, high-friction arguments from code review, letting teams reserve their attention for design and logic.

The flat config format solves a real discoverability problem—when rules come through multiple layers of extends, developers often can't tell why a rule is on or off, which erodes trust in the tool.

Pairing ESLint with Prettier is now the de facto standard, but the division of labor is still misunderstood; many teams duplicate formatting rules in ESLint and then fight the resulting conflicts.

Concepts & terms
AST (Abstract Syntax Tree)
A tree representation of source code structure that ESLint uses to walk and inspect every syntactic element—variables, function calls, conditionals—without executing the program.
Flat Config
ESLint's newer configuration format (eslint.config.js) that uses a flat array of config objects instead of nested extends chains, making rule sources and overrides easier to trace.
lint-staged
A tool that runs linters only on files currently staged in git, keeping pre-commit checks fast by avoiding a full-project scan on every commit.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗