DEV Community

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

Adding ESLint and Prettier to a ViteJS React project

Marcos Dias on January 21, 2023

Recently, I decided to try ViteJS as an alternative to Create React App. Although ViteJS already offers a basic template for React applications it ...
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