DEV Community

Cover image for Adding ESLint and Prettier to a ViteJS React project
Marcos Dias
Marcos Dias

Posted on • Updated on

Adding ESLint and Prettier to a ViteJS React project

Recently, I decided to try ViteJS as an alternative to Create React App. Although ViteJS already offers a basic template for React applications it doesn't come shipped with ESLint and Prettier. In this post, we will briefly go through the installation and configuration of those two packages in a React project created with ViteJS.

Step 1: install dependencies

Beside ESLint and Prettier, we will install the following dependencies:

  • @typescript-eslint/eslint-plugin: a collection of linting rules for TypeScript projects.
  • @typescript-eslint/parser: a code parser for TypeScript.
  • eslint-config-prettier: an ESLint configuration to disable conflicting rules between ESLint and Prettier.
  • eslint-plugin-import: a plugin to enable ESLint to handle ES6+ import/export syntax.
  • eslint-plugin-jsx-a11y: a plugin with some accessibility rules.
  • eslint-plugin-react: a plugin with rules for React projects.
  • eslint-plugin-react-hooks: a plugin with rules for React hooks. It will ensure that you never use a React hook outside of a function component.

To install all of these dependencies, just run the following line:



yarn add -D eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks


Enter fullscreen mode Exit fullscreen mode

If you're using npm as a package manager, replace yarn add -D by npm install --dev.

Step 2: configure ESLint

With the dependencies already installed, it's time to create the configuration files for ESLint. First, we will create the .eslintrc, which will manage our ESLint configuration.

All the following files should be created in the project's root folder.

.eslintrc



{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:import/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:@typescript-eslint/recommended",
    "eslint-config-prettier"
  ],
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "paths": [
          "src"
        ],
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx"
        ]
      }
    }
  },
  "rules": {
    "no-unused-vars": [
      "error",
      {
        "vars": "all",
        "args": "after-used",
        "ignoreRestSiblings": true,
        "argsIgnorePattern": "^_"
      }
    ],
    "react/react-in-jsx-scope": "off"
  }
}


Enter fullscreen mode Exit fullscreen mode

With no-unused-vars we will ensure that any unused variable will trigger an error. The react/react-in-jsx-scope rule was disabled so ESLint won't enforce the import of React in files with JSX (import React from 'react'). Since React 17.0, importing React in JSX files is not required.

Now we will create the .eslintignore file, which will tell ESLint which files should not be linted:

.eslintignore



node_modules/
dist/
env.d.ts


Enter fullscreen mode Exit fullscreen mode

It's recommended that you add a lint script to your scripts section in your package.json, so you can run ESLint by executing yarn lint or npm run lint:



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


Enter fullscreen mode Exit fullscreen mode

Our lint script will be running eslint over all .ts and .tsx files starting from the project's root.

Step 3: configuring Prettier

Just like we did when configuring ESLint, we will now create the .prettierrc file, with our Prettier settings. To learn more about the available options, check Prettier docs.

.prettierrc



{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 120,
  "bracketSpacing": true,
  "endOfLine": "lf"
}


Enter fullscreen mode Exit fullscreen mode

And then, .prettierignore:

.prettierignore



node_modules/
dist/


Enter fullscreen mode Exit fullscreen mode

Step 4: integrating with VSCode

Ultimately, we will configure VSCode to use ESLint and Prettier to find problems and format our code, respectively. If you don't have the extensions installed yet, install them: Prettier - Code formatter and ESLint.

With the extensions already installed, we will have to configure VSCode to use Prettier to format our file on save. The ESLint extension should work automatically if there's a valid configuration file in (.eslintrc) the current workspace.

If you don't have a .vscode/settings.json file yet, create it with the following settings:



{
  ...
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}


Enter fullscreen mode Exit fullscreen mode

Well done! Now ESLint should highlight code problems while editing and Prettier should apply formatting on save when it's possible.

ESLint and Prettier on VSCode

Final thoughts

This post was inspired by Setting up ESLint & Prettier in ViteJS
by Cathal Mac Donnacha.

A repository with this configuration, including Storybook, Jest and React Testing Library is available at my GitHub: https://github.com/marcosdiasdev/react-vitejs-template.

Let's talk!

Top comments (12)

Collapse
 
elanizi43998 profile image
elanizi43998

Great and simple tutorial, thank you for the article Marcos!

Collapse
 
marcosdiasdev profile image
Marcos Dias

You're welcome! Thank you for the feedback! 🚀

Collapse
 
nixoncode profile image
Nixon Kosgei

if you're on webstorm like me, you'll need to configure actions on save. settings > tools > actions on save

Collapse
 
marcosdiasdev profile image
Marcos Dias

Thanks for the additional information, Nixon! 🚀

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
marcosdiasdev profile image
Info Comment hidden by post author - thread only accessible via permalink
Marcos Dias • Edited

Thanks for the comment. Useless articles like this one seem to be helping a lot of people though. But, getting down to the business, I'm wondering why I didn't just create an eslint.config.ts instead when I wrote this tutorial. Anyways, good luck on your journey.

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
marcosdiasdev profile image
Marcos Dias

Welcome to the World Wide Web. Sometimes people write stuff just for "learn in public" purposes and don't come back to update information 🤷🏽‍♂️

When someone gets to an article named "Adding ESLint and Prettier to a ViteJS React project" I guess they already know what ESLint and Prettier are and why to use them. There is a lot of good articles out there whose purposes is to explain the whys; this is not one of them.

You don't have to be so rude just because it doesn't match all of your expectations. After all, no one is getting paid for anything here. I could've spent my precious time to help you setting up your project the way you need, for free, if you were just a little more polite.

We have a great community here in DEV.to and it is because people built it based on respect and kindness. Let's just not ruin it. Peace! 🙏🏽

Collapse
 
zoranduric profile image
Zoran

Will you write article about adding story book and jest?

Collapse
 
marcosdiasdev profile image
Marcos Dias

Hey, Zoran! Thanks for reading.
I certainly can write about it in the future. In the meantime, you can use my template, which is already configured with Storybook and Jest: github.com/marcosdiasdev/react-vit...

Collapse
 
hemant_80555 profile image
Hemant Soni

my project already having .eslintrc.cjs
how to deal with it?

Collapse
 
marcosdiasdev profile image
Marcos Dias

I guess you can just skip the creation of the .eslintrc file and use the existing file to export the same content displayed in the .eslintrc example. Just remember to check for duplicated or conflicting rules.

Some comments have been hidden by the post's author - find out more