How can I integrate 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"
}

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.