Chapter 8: Editor Setup
Core Idea
A correctly configured editor catches bugs before they run — the two must-have pieces are a linter (ESLint, with eslint-plugin-react-hooks enabled) and a formatter (Prettier) wired to run automatically.
Key Concepts
- Editor choice: VS Code is the most common in the React community (large extension marketplace, good GitHub integration); WebStorm, Sublime Text, and Vim are named alternatives.
- Linting: ESLint catches problems as you write.
eslint-config-react-app is the recommended preset and already bundles eslint-plugin-react-hooks.
eslint-plugin-react-hooks is not optional. The docs call it out explicitly: enable all its rules — it catches the most severe class of bugs (broken Hook rules) early.- Formatting: Prettier auto-reformats on save, eliminating tabs-vs-spaces and quote-style debates. Configure "format on save" in the editor rather than relying on manual runs.
- ESLint/Prettier conflicts: if your ESLint preset carries its own formatting rules, they can fight Prettier — disable them via
eslint-config-prettier so ESLint stays scoped to logic bugs and Prettier owns formatting; enforce formatting in CI with prettier --check.
Key Takeaways
- Treat
eslint-plugin-react-hooks as required, not optional tooling — it's the single highest-leverage lint config for avoiding Hook-rule bugs.
- Split responsibilities: ESLint for logic correctness, Prettier for formatting; disable overlapping ESLint formatting rules via
eslint-config-prettier to avoid the two fighting each other.
- Wire "format on save" once at the editor level rather than remembering to run Prettier manually.
Connects To
- Ch 46-47 (ESLint Plugin React Hooks): full rule-by-rule reference for what this plugin catches.
- Ch 116 (Rules of Hooks): the underlying rules the lint plugin enforces mechanically.