How can I intregate ESLint in a Vite+React project?

Question

When I create a React application using Create React App, ESLint is included by default. That's why we don't want to integrate ESLint manually. But when I create a React application using Vite there doesn't exist any kind of linting like ESLint or JSLint .

How can I install ESLint in a Vite+React project?

Answer 1

create-react-app has put their eslint rules into a dedicated package:

https://www.npmjs.com/package/eslint-config-react-app

Follow their instructions to set it up:

npm install --save-dev eslint-config-react-app eslint@^8.0.0

or

yarn add -D eslint-config-react-app eslint@^8.0.0

and then create an .eslintrc.json with this content:

{
  "extends": "react-app"
}

you can add this to the scripts part of your package.json

{
  "scripts": {
    "lint": "eslint --max-warnings=0 src"
  }
}

and run it via npm run lint or yarn lint.

You could also use vite-plugin-eslint to have vite give you feedback in the console.

Answer 2

If you want to have eslint installed globally in your machine, you can open a console and add npm istall -g eslint, this will allow you to use the eslint cli to initialize the eslint config file in your projects (you can still use the eslint cli without install it globally, so this step is optional)

For install it in a React project, if you have never done it before you can follow next steps: Do a npm istall eslint --save-dev or yarn add -D eslint and after it install the eslint plugin for React with npm install eslint-plugin-react --save-dev or yarn add -D eslint-plugin-react.

Once both dependencies are installed just open a terminal in the root of the project and run the command eslint --init (if you previously installed eslint globally, if not then use npx eslint --init), that will execute the eslint cli and create an .eslintrc.json file in your project with basic configs added already. You can check the doc for the eslint-plugin-react package to understand better how to add more rules to the file and the rules supported by that plugin. https://www.npmjs.com/package/eslint-plugin-react

And this article should also help you https://medium.com/@RossWhitehouse/setting-up-eslint-in-react-c20015ef35f7