ESLint + React Rules; Prettier Integration
Set up ESLint with React rules and integrate Prettier for consistent formatting; run lint and fix commands.
ESLint + React Rules; Prettier Integration is a free React Academy lesson on CoddyKit — lesson 1 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why ESLint + Prettier
Goal: Catch code issues with ESLint and keep style consistent with Prettier.
- ESLint: rules, plugins, fix
- Prettier: opinionated formatter
- Run in dev & CI
Install & plugins
- ESLint: eslint, @typescript-eslint/* (if TS), eslint-plugin-react, eslint-plugin-react-hooks
- Prettier: prettier, eslint-config-prettier
- Scripts: "lint", "lint:fix", "format"
Demo: lint output & fixes
ESLint flags issues; Prettier fixes style. Compare bad vs good and see sample output.
<div id="root"></div>
Demo: simulate Prettier format
Toggle to simulate a Prettier run; code becomes consistently formatted.
<div id="root"></div>
Tips & package scripts
- Scripts: "lint", "lint:fix", "format"
- Use eslint-config-prettier to disable style rules
- Enable react-hooks rules: exhaustive-deps & rules-of-hooks
React rules to know
React rules:
- react/jsx-key — add key in lists
- react-hooks/rules-of-hooks — only call hooks at top level
- react-hooks/exhaustive-deps — keep effect deps correct
ESLint vs Prettier roles
Recap
Recap: ESLint finds problems; Prettier formats. Add React plugins and hooks rules, and wire scripts to lint, fix, and format.
Frequently asked questions
Is the “ESLint + React Rules; Prettier Integration” lesson free?
Yes — the full text of “ESLint + React Rules; Prettier Integration” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “ESLint + React Rules; Prettier Integration”?
Set up ESLint with React rules and integrate Prettier for consistent formatting; run lint and fix commands. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “ESLint + React Rules; Prettier Integration” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- ESLint + React Rules; Prettier Integration
- File Naming, Component Boundaries, Prop Naming
- Env Variables & Config Organization