Member-only story

Setting Up ESLint and Prettier in a React Project with Vite

Leandro A. Siqueira
3 min readJan 20, 2025

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

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Leandro A. Siqueira
Leandro A. Siqueira

Written by Leandro A. Siqueira

Well, I woke up this morning and I got myself a beer!

No responses yet

What are your thoughts?