Add value to commit message in Angular

by
Reading Time: 3 minutes

Loading

Introduction

When a team of developers works on the project, we should add tools to ensure all developers adopt the same convention of commit messages. The tools ng-spanish-menu application use to enforce commit conventions are commitlint, commitizen and husky.

show me, don't tell me

Install dependencies of commitlint and husky locally

First, we install commitlint and husky to set up automated testing of commit messages. The automation occurs when we run git commit command. 

npm install --save-dev @commitlint/{cli,config-conventional}
npm install --save-dev husky

Generate commitlint configuration file

Secondly, we add a new configuration file for commitlint.

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

Test

Before we go any further, we launch a new terminal to test comments using commitlint

Failed test

In our first example, we display a comment that does not adopt the convention and the program outputs the error messages.

echo “hello world” | ./node_modules/.bin/commitlint

Passed test

In our second example, this comment adopts the convention and the program outputs nothing when run.

echo “chore(test): hello world” | ./node_modules/.bin/commitlint

Add husky hook to lint of commit messages

Thirdly, we automate commitlint by registering a commit-msg husky hook.

# Active hooks
npx husky install

# Add hook
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'

When developers type git commit -m "{type}{scope}: subject" to commit changes, commitlint validates the format of the message before the staged files are committed.

However, reckless developers can add –no-verify to bypass husky and defeat the intention of good engineering practice.

By chance, I discovered commitzen/cz-cli that launches interactive interface to prompt user to fill in required information and it also ignores –no-verify flag

Install commitizen

Lastly, we install the required dependencies and we should all set.

npm install --save-dev commitizen
npm install --save-dev @commitlint/prompt

Generate commitizen configuration file

echo '{ "path": "@commitlint/prompt" }' > ~/.czrc

Create npm script for commitizen

"scripts: {
   "commit": "git-gz"
}

See commitizen in action

Finally, we can make changes to the codes and witness commitzen in action for the first time.

git add .
npm run commit

Type help to see all available types to choose from and I choose “feat” as an example.

Scope is optional and I type food to indicate the change is about food service.

Enter :skip when commitizen prompts body and footer to skip providing descriptions.

Git commits my new changes successfully and keeps the message in git history.

Conclusion

Commitizen is a powerful command-line utility for advocating and sharing commit convention. It is especially when multiple teams and vendors are working on a large project and we want them to write message that has the same format, descriptive and understandable.

This is the end of the post and I hope you find this article useful and consider to become upstanding commit citizens by using commitlint and commitizen in Angular application.

Good bye!

we made it to the end of the blog post

Resources:

  1. Repo: https://github.com/railsstudent/ng-spanish-menu
  2. Commitlint install guide: https://commitlint.js.org/#/guides-local-setup
  3. Commitizen: https://github.com/commitizen/cz-cli
  4. Husky: https://github.com/typicode/husky
  5. Add commitlint and commitizen to create-react-app: https://annacoding.com/article/4ynYYJEnB733BHEnbrApnX/Add-commitlint-and-commitizen-to-Create-react-app