How to Add ESLint, Prettier, and Husky (Git Hooks) to Your React Application

A complete guide on adding Eslint with Prettier to a TypeScript React project and running pre-commit command on each Git commit command.

Here we will cover all you need to know about adding ESLint with Prettier to a TypeScript React project and run pre-commit command on each Git commit command.

What will be covered in this article

• Prerequisites;
• ESLint and Prettier installation;
• ESLint and Prettier installation (Typescript, optional) to JS project;
• Configuration files;
• What is Husky;
• Husky and lint-stagged installation;
• Husky configuration;

Prerequisites

I will be using the React project that was started from scratch, using create-react-app with TypeScript.

npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript

I have deleted all unnecessary files like: CSS files, logo.svgand cleaned up App.tsx file. In all other ways → I will be using a…