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…