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. This is 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, and your progress syncs across the web and the CoddyKit app. The React Academy course includes 3 lessons in total.
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. 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. The React Academy course includes 3 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 3.
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