Linting, Formatting & ESLint
Clean, consistent code is the foundation of a maintainable codebase. This lesson sets up ESLint for linting, Prettier for formatting, and wires them into VS Code for automatic enforcement.
1ESLint vs Prettier — What's the Difference?
ESLint catches code-quality issues (unused vars, wrong comparisons, missing awaits). Prettier handles pure style (indentation, quotes, semi-colons). They complement each other — ESLint catches bugs, Prettier enforces style. Use eslint-config-prettier to disable ESLint's formatting rules and let Prettier own formatting.
2Setting Up ESLint
npm init @eslint/config # Follow the prompts to pick JS/TS, module type, framework
3Formatting on Save with Prettier
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }
4The Problems Panel
All lint errors and warnings appear in the Problems panel (Ctrl+Shift+M). They're also shown inline with red/yellow squiggles, and in the file's gutter. Click any issue to jump to it.
5Pre-commit Hooks with lint-staged
"lint-staged": { "*.{ts,tsx}": ["eslint --fix", "prettier --write"] }
Combine with husky to run lint-staged automatically on every git commit.