How to Set Up Vite with ESLint and Prettier?

Integrating ESLint and Prettier is important to maintaining consistent code quality and style across a Vite project. Prettier ensures uniform code formatting, while ESLint assists in locating and resolving possible coding errors. Along with various methods and folder structures, this article will walk you through setting up ESLint and Prettier in a Vite project.

Steps to Manual Setup with ESLint and Prettier

To manually set up ESLint and Prettier in a Vite project, follow these steps:

Step 1: Initialize a Vite Project

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

Step 2: Install ESLint and Prettier

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

Project Structure:

Step 3: Configure ESLint

Create an .eslintrc.json file in the root directory:

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:prettier/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
        "prettier/prettier": [
            "error",
            {
                "singleQuote": true,
                "semi": false
            }
        ]
    }
}

Step 4: Configure Prettier

Create a .prettierrc file:

{
  "singleQuote": true,
  "semi": false
}

Step 5: Add Scripts to package.json

"scripts": {
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "format": "prettier --write ."
}

When you run:

npm run lint
npm run format

Output: ESLint will display any linting issues, while Prettier will automatically format the code according to the specified rules.