21

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?

Henke
  • 4,445
  • 3
  • 31
  • 44
H Nazmul Hassan
  • 631
  • 2
  • 8
  • 17

2 Answers2

25

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"
}

This is already sufficient for VSCode to start linting in the editor. (provided you have an eslint plugin installed)

To manually trigger the linting process, 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.

Daniel
  • 2,642
  • 1
  • 26
  • 28
  • I had to change the script to `"lint": "eslint --max-warnings=0 \"src/**/*.{js,jsx}\""` to not get a `No files matching the pattern "src" were found. Please check for typing mistakes in the pattern.` error – CyclingSir Feb 20 '23 at 19:15
3

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

Khorne07
  • 199
  • 3
  • 12
  • 3
    You might prefer to not install eslint globally. Different projects of different ages might be setup with different versions of eslint (at the time of writing there's been 8 different major versions already). So it might be best to either use `npx eslint` for one-off linting, or install eslint for your project and run it via the `scripts` part in your `package.json`. – Daniel Feb 12 '22 at 20:57
  • 1
    Already edited the answer, you are right about that, my bad for no mention the npx option before. Thanks – Khorne07 Apr 01 '22 at 08:35