How to configure ESLint and Prettier for React projects

· Category: React

Short answer

ESLint analyzes code for potential errors and style violations, while Prettier formats code automatically. Together they enforce consistency across a React codebase.

Steps

  1. Install eslint, prettier, eslint-config-prettier, and eslint-plugin-react.
  2. Create .eslintrc.cjs extending recommended React and Prettier rules.
  3. Create .prettierrc with formatting preferences.
  4. Add lint and format scripts to package.json.

Example

{
  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

Tips

  • Use the VS Code extensions for real-time feedback.
  • Run Prettier in a pre-commit hook with Husky to keep the repo clean.
  • Separate concerns: ESLint for logic, Prettier for formatting.