How to Use Husky in React.js | Commit Message Validation with Git Hooks
In this video, you'll learn how to integrate Husky in a React.js project using Vite, and enforce commit message validation with Commitlint and Git hooks.
Follow the step-by-step commands below to set it up in your own project 👇
1. Create a New React App Using Vite
npm create vite@latest husky-react -- --template react
cd husky-react
npm install
2.Initialize a Git Repository
git init
3.Install Husky & Commitlint
npm install --save-dev husky @commitlint/cli @commitlint/config-conventional
4.Initialize Husky
npx husky init
5.Create commit-msg Hook to Validate Commit Messages (Inside this file paste below code)
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit "$1"
6.(Optional) Pre-Commit Hook
npm test
7.Create Commitlint Config File
// commitlint.config.cjs
module.exports = { extends: ["@commitlint/config-conventional"] };
8.Try a Valid Commit
git add .
git commit -m "feat: husky implementation"