ESLint — JavaScript and TypeScript Linting

ESLint reads your source code, applies a set of rules, and reports problems ranging from stylistic inconsistencies to genuine bugs. It catches unused variables, missing return statements, inconsistent naming, accessibility violations, and hundreds of other issues that slip past even careful code review.

This skill covers ESLint 9+ with the modern flat config format. If you're starting a new project or migrating from the legacy .eslintrc format, flat config is the way forward.

Installing ESLint

ESLint 9 ships as a single package. TypeScript and React support come from companion plugins.

# Install ESLint and common plugins for a TypeScript React project
npm install --save-dev eslint @eslint/js typescript-eslint eslint-plugin-react eslint-plugin-react-hooks

Flat Config Basics

The flat config lives in eslint.config.js (or .mjs, .ts) at your project root. Instead of deeply nested JSON with extends and overrides, flat config uses an array of configuration objects. Each object applies to files matching its files glob pattern.