How to Set Up ESLint for JavaScript and TypeScript (2026)
Configure ESLint with modern flat config, presets, and IDE integration. Catch bugs and enforce standards automatically.
- Configure ESLint with modern flat config, presets, and IDE integration.
- What ESLint Does.
- Modern Setup (Flat Config).
- Essential Rules.
- IDE Integration and Auto-Fix.
What ESLint Does
ESLint catches JavaScript and TypeScript bugs, enforces coding standards, and prevents common mistakes before code runs. It flags: unused variables (typos), unreachable code, inconsistent comparisons (== vs ===), missing error handling, and hundreds of other patterns. The value compounds across teams — eliminating style debates in code reviews and catching bugs manual review would miss. Use alongside the Code Beautifier for formatting.
Modern Setup (Flat Config)
ESLint 9+ uses flat config (eslint.config.js) instead of .eslintrc. Minimal setup: install eslint, create config importing @eslint/js recommended config and globals. For TypeScript, add typescript-eslint. For React, add eslint-plugin-react and eslint-plugin-react-hooks. Run with npx eslint . or add to package.json scripts.
Essential Rules
Start with eslint:recommended (catches definite bugs) and add rules gradually. Essential: no-unused-vars (typos/dead code), eqeqeq (=== over ==), no-console (debug logs in production), no-var (use let/const), prefer-const (const when never reassigned). For TypeScript: @typescript-eslint/no-explicit-any. Don’t enable every rule at once — start strict on bugs, loose on style, tighten gradually.
IDE Integration and Auto-Fix
VS Code’s ESLint extension highlights errors as you type. Enable Fix on Save (editor.codeActionsOnSave: eslint.fixAll) for automatic fixing. Add ESLint to CI/CD so no PR merges with errors. Use --fix in scripts for batch fixing. ESLint handles logic/correctness; Prettier/Code Beautifier handles formatting. Use both.