Setting Up ESLint and Prettier in a React Project with Vite

Linting and code formatting are essential for maintaining a clean and consistent codebase. In this guide, we’ll walk through setting up ESLint and Prettier in a React project created with Vite.

1. Initialize the Project

If you haven’t already created a Vite project, start by doing so:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

2. Install ESLint and Prettier

To get started, install ESLint and Prettier along with their dependencies:

npm install eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import --save-dev

• eslint-config-prettier: Disables ESLint rules that might conflict with Prettier.
• eslint-plugin-react: Adds linting rules for React.
• eslint-plugin-react-hooks: Enforces rules for React Hooks.
• eslint-plugin-jsx-a11y: Helps enforce accessibility best practices.
• eslint-plugin-import: Ensures proper import/export syntax.

3. Configure ESLint