How to set up ESLint and Prettier with a React project?

To set up ESLint and Prettier with a React project, follow these steps:

Install ESLint and Prettier:

npm install eslint prettier

Install ESLint plugins and configurations for React:

npm install eslint-plugin-react eslint-config-react-app

Install the ESLint Prettier plugin and configuration:

npm install eslint-config-prettier eslint-plugin-prettier

Create an ESLint configuration file (.eslintrc) in the root of your project directory:

{
  "extends": [
    "react-app",
    "plugin:prettier/recommended"
  ]
}

Create a Prettier configuration file (.prettierrc) in the root of your project directory:

{
  "singleQuote": true,
}

Add ESLint and Prettier scripts to your package.json file:

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
  "format": "prettier --write ."
}

Run ESLint and Prettier on your project:

npm run lint
npm run lint:fix
npm run format

You have now successfully set up ESLint and Prettier with your React project. You can customize the ESLint and Prettier configurations to suit your project's needs.