logo

How to configure conventional commit for your project?

Posted on
Authors

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

pnpm add -D husky
  1. Active husky hook manually
pnpm exec husky install

pnpm exec husky install
  1. Active husky hook automatically on first time setting up project in the future
pnpm pkg set scripts.prepare="husky install"

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

pnpm add -D @commitlint/config-conventional @commitlint/cli
  1. Configure commitlint to use conventional config
echo '{ "extends": [ "@commitlint/config-conventional" ] }' > .commitlintrc.json

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

or

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

echo "module.exports = { extends: [ '@commitlint/config-conventional' ] }" > commitlint.config.js
  1. Add husky hook to validate commit message on committing
pnpm exec husky add .husky/commit-msg 'pnpm exec commitlint --edit ${1}'

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

pnpm add -D commitizen cz-conventional-changelog
  1. Init commitizen config
echo '{ "path": "./node_modules/cz-conventional-changelog" }' > .czrc

echo '{ "path": "./node_modules/cz-conventional-changelog" }' > .czrc
  1. 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'

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

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
  1. Add badge (optional) to README.md
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

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