ESLint: Setting Up in a React Vite Project

In order to detect errors, enforce coding standards, and preserve code integrity, linting is a crucial step in contemporary frontend development. One of the most widely used linting tools for TypeScript and JavaScript applications is ESLint. We’ll walk you through configuring in a Vite-built React project in this article.

Why Use ESLint?

• Catches errors early: Helps identify issues before runtime.
• Improves code quality: Enforces best practices and consistency.
• Enhances team collaboration: Ensures a standardized coding style across the project.

Prerequisites

Before setting up ESLint, ensure that you have the following installed:

• Node.js (LTS version recommended)
• Vite
• A React project set up with Vite

Step 1: Initialize a React Vite Project

If you don’t have a React project set up with Vite, create one using:

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

Step 2: Installation

Next, install ESLint as a development dependency:

npm install --save-dev eslint

Step 3: Configuration

Run the following command to initialize an ESLint configuration:

npx eslint --init

This command will prompt you with several options:

1. How would you like to use? – Choose “To check syntax, find problems, and enforce code style.”
2. What type of modules does your project use? – Select “ES modules.”
3. Which framework does your project use? – Choose “React.”
4. Does your project use TypeScript? – Choose based on your project setup.
5. Where does your code run? – Select “Browser.”
6. What format do you want your config file to be in? – Choose “JSON” (or another preferred format).

After completion, an .eslintrc.json file will be generated.

Step 4: Add ESLint Rules

Modify your .eslintrc.json file to include additional rules and plugins:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "no-unused-vars": "warn",
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

Step 5: Add ESLint Scripts

Update the package.json file to include an ESLint script:

"scripts": {
  "lint": "eslint src --ext .js,.jsx,.ts,.tsx"
}

Run using:

npm run lint

Step 6: Integrate with VS Code

Install the ESLint extension in Visual Studio Code for a smooth experience. As you code, this will point out linting mistakes and offer auto-fixes.

Step 7: Enable Auto-fixing on Save (Optional)

To automatically fix lint errors on save, create a .vscode/settings.json file with:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Conclusion

You can assure better, more maintainable code and identify mistakes early in the development process by using ESLint into your React Vite project. This configuration is adaptable and can be further altered to adhere to the coding requirements of your project.

Finally, for more such updates and to read more about such topics, please follow our LinkedIn page Frontend Competency.