0PricingLogin▼
React Academy · Lesson

ESLint + React Rules; Prettier Integration

Set up ESLint with React rules and integrate Prettier for consistent formatting; run lint and fix commands.

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"

All lessons in this course

  1. ESLint + React Rules; Prettier Integration
  2. File Naming, Component Boundaries, Prop Naming
  3. Env Variables & Config Organization
← Back to React Academy