How to Setup Git Commit Hooks with Husky in a React App

Git hooks are scripts that run automatically every time a particular event occurs in a Git repository. They let you customize Git’s internal behaviour and trigger customizable actions at key points in the development life cycle.

When I was setting up the Hooks, it was a bit confusing because the library had two options depending on the version. In this article, we will use the latest version (7.0.0).

This article is an attempt to help you set up Git Hooks in a few minutes.

Requirements

If you want to follow this tutorial, you must have installed and configured:

  • React App with TypeScript
  • ESLint and Prettier
  • Jest

I have already created a template that you can use: react-template

Let’s do it!

Install Commit lint conventional:

npm i @commitlint/config-conventional --save-dev

Install Commit lint CLI:

npm i @commitlint/cli --save-dev

Create a file in the base of your project:

File name:

.commitlintrc.json

Config:

{
“extends”: [“@commitlint/config-conventional”]
}

Install lint-staged:

npm i lint-staged --save-dev

add the lint-staged config in the package.json

“lint-staged”: {
“*.{ts,tsx,json,md}”: [
“eslint — fix”
],
“**/*”: “prettier — write — ignore-unknown”
}

Install husky:

npm install husky --save-dev

Edit package.json > prepare script and run it once:

npx husky-init && npm install

It will setup husky, modify package.json and create a sample pre-commit hook that you can edit. By default, it will run npm test when you commit.

Change the pre-commit file in the /.husky directory, change npm test to:

npx lint-staged

Now let's add another hook for commit-msg:

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

And the last one for pre-push:

npx husky add .husky/pre-push 'npx --no-install jest'

Wrapping it up

This is not the only way to setup Git Hooks, but probably the must easier.

I hope you have been able to setup it correctly, if you have any questions you can leave them in the comments.

--

--

--

Software Developer • Making my experiences and knowledge can be useful for someone else. —

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The story of battling with 10x Traffic

How To Contribute To Open Source Software As A Junior Developer

How to parallelise Kafka consumers

DevOps for Startups: 5 tricks for successful adoption

Noisy Neighbor antipattern

How we migrated our startup to serverless

Autoscaling Google Dataproc Clusters

The hidden bias in iterative product development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kemil Beltre

Kemil Beltre

Software Developer • Making my experiences and knowledge can be useful for someone else. —

More from Medium

Rules of using Hooks in React

Customizable confirmation dialog in React.js using Hooks, Context API, and TypeScript

ReactJS — Separating logic using Higher-Order Component (HOC)

React Router 6 with useNavigate Hook