How to add ESlint, Prettier, and Husky (Git Hook) in React JS 2022

Introduction

Today we are going to make our life easier a little bit! As developers, we have to work in a team (in most cases). Different person has different styles, so it’s hard to follow a specific coding pattern. Also, some people like four spaces as a tab, and some like 2. So code format also looks weird if there are no specific rules. Today we are going to fix the problem together. Let’s enforce a coding style using eslint and format our code automatically using prettier!

Motivation

There is a reason why I’m writing this blog. I learned to program from tutorials (mostly udemy ones)! I never saw anyone is showing how to add eslint/prettier anywhere. But I learned about it while working with a side project (as freelance work). Around 2020 I was getting a good amount of leads from Fiverr to work. But it was hard for me to work on the projects because I started my current full-time. So, I took the help of my friend, and honestly, the code he wrote looks bad formatted and does not properly follow any coding styles. I always used eslint & prettier in my vscode, so I never faced this issue about formatting & following coding styles. But I wasn’t really interested in setup his IDE because it’s not something I can force on someone. Then I learned about eslint & prettier more. I made a setup, which helped me gain what I was trying too hard to get. It made my life so easier. After setting up both, I never saw terrible formatting in the app, and minor issues like not using any variables are gone! This is why I’m showing this to you. Maybe it’ll save a lot of time for you! If this helps, share it with a person who needs this. Let’s make the dev team strong with knowledge sharing! But before that, lets jump into the next section –

Things I’m using

• Visual studio code
• nodejs
• create react app
• npm packages
• eslint
• prettier
• eslint-plugin-prettier
• husky
• lint-staged

Basic React app