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
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"
}
}
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
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"
}
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"
}
And then, .prettierignore
:
.prettierignore
node_modules/
dist/
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"
}
Well done! Now ESLint should highlight code problems while editing and Prettier should apply formatting on save when it's possible.
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)
Great and simple tutorial, thank you for the article Marcos!
You're welcome! Thank you for the feedback! 🚀
if you're on webstorm like me, you'll need to configure actions on save. settings > tools > actions on save
Thanks for the additional information, Nixon! 🚀
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.
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! 🙏🏽
Will you write article about adding story book and jest?
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...
my project already having .eslintrc.cjs
how to deal with it?
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