Code commit best practice with commitizen & pre-commit

#githooks #commitizen #husky #git

In this opportunity, I will share about Git hooks, Commitizen, and ESLint for linting. Coincidentally, on this occasion, I will be using Angular projects.

Let's say we already have Angular projects. And then, you need to install several dependencies.

Step 1

npm i -D husky eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

STEP 2
You need to setup husky in your project with run this command

npx husky install

That command will generate the .husky/pre-commit file. pre-commit file will look like this.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run test

STEP 3
Setup commitizen for template commit message. This is a beautiful feature to organize commit messages, especially when working with a fairly large team. For setup commitizen you need to run this command:

npm i commitizen

and add this on your package.json

"config": {
    "commitizen": {
      "path": "cz-conventional-changelog",
      "jiraOptional": true
    }
  }

This isn't finished yet, you need to run the following script.

npx husky add .husky/prepare-commit-msg "exec < /dev/tty && git cz --hook || true"

If successful, it will create a new file inside the .husky/prepare-commit-msg folder. You can test this by running the commit with empty message:

git commit -am ""

and choose one of the options. in this case i will choose feature

next, you need to fill scope of changes.

next, you need to fill short description about changes

and then, they provide for longer description. For this input, it's optional, you can leave it empty.

And next, they ask whether there are any breaking changes or if there will be any other open issues. If you choose 'y', they will ask for your explanation.

commit message on gitlab will look like this:

It appears tidy and easy to understand for documentation or your code reviewer.

Conclusion

This feature is very helpful for describing what you're doing with code changes and greatly assists code reviewers.
for Linter git hooks / pre commit will posted at next article.