What is Conventional Commit?

Conventional Commit is

A specification for adding human and machine readable meaning to commit messages

In this tutorial, I will guide you on configuring conventional commit for a Javascript/TypeScript/NodeJS project.

Tutorial

This tutorial uses pnpm.

Configure husky

1. Install dependency packages

pnpm add -D husky

2. Active husky hook manually

pnpm exec husky install

3. Active husky hook automatically on first time setting up project in the future

pnpm pkg set scripts.prepare="husky install"

Note:

• You need to add the script prepare manually if it exists to avoid overwriting.
• prepare script is incompatible with yarn berry (v2+) at this moment.

Configure commitlint

1. Install dependency packages

pnpm add -D @commitlint/config-conventional @commitlint/cli

2. Configure commitlint to use conventional config

echo '{ "extends": [ "@commitlint/config-conventional" ] }' > .commitlintrc.json

or

echo "module.exports = { extends: [ '@commitlint/config-conventional' ] }" > commitlint.config.js

3. Add husky hook to validate commit message on committing

pnpm exec husky add .husky/commit-msg 'pnpm exec commitlint --edit ${1}'

Configure commitizen

1. Install dependency packages

pnpm add -D commitizen cz-conventional-changelog

2. Init commitizen config

echo '{ "path": "./node_modules/cz-conventional-changelog" }' > .czrc

3. Add husky hook to trigger commitizen automatically on running git commit

pnpm exec husky add .husky/prepare-commit-msg 'exec < /dev/tty && [ -z "$(cat ${1})" ] && pnpm exec cz --hook || true'

Advanced script for prepare-commit-msg hook

if [ -t 0 ];
then
  # running via terminal
  exec < /dev/tty && [ -z "$(cat ${1})" ] && pnpm exec cz --hook || true
else
  # running via GUI
  [ -z "$(cat ${1})" ] && pnpm exec cz --hook || true
fi

4. Add badge (optional) to README.md

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)