DEV Community

Cover image for How (and Why) to enforce conventional commits on your project?
Guille Acosta
Guille Acosta

Posted on • Updated on

How (and Why) to enforce conventional commits on your project?

After reading a lot of post and checking a few videos I come up with a configuration which will help you to enforce conventional commit messages on your repository.

But.. Why is it important to use conventional commits?

  • Automatically generating CHANGELOGs.
  • Automatically determining a semantic version bump (based on the types of commits landed).
  • Communicating the nature of changes to teammates, the public, and other stakeholders.
  • Triggering build and publish processes.
  • Making it easier for people to contribute to your projects, by allowing them to explore a more structured commit history.

Enforcing conventional commits

To accomplish this, we will use:

  • husky: for handling the git hooks in a easy (and shareable) way.
  • commitizen: for a cli wizard which will help us write conventional commits.
  • commitlint: as the name suggests, lint our commit messages.

Ok, hands on.

pre-requisites: 
- project where you have run `npm init` or you already have a package.json.
- project where you have run `git init` or you already have a repository configured.
Enter fullscreen mode Exit fullscreen mode

install commitizen as a dev dependency and save the exact version.

npx commitizen init cz-conventional-changelog --save-dev --save-exact
Enter fullscreen mode Exit fullscreen mode

same for commitlint

npm install -D @commitlint/{cli,config-conventional} --save-exact
Enter fullscreen mode Exit fullscreen mode

now on a file called .commitlintrc.json
 set the extends to the rules from config-conventional

{  "extends": ["@commitlint/config-conventional"]}

Enter fullscreen mode Exit fullscreen mode

now run husky from npx and run npm install which will trigger the just appended script prepare which executes husky install:

npx husky-init && npm install
Enter fullscreen mode Exit fullscreen mode

now you need to add your hooks to prevent a commit message which is not formatted as a conventional commit:

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
Enter fullscreen mode Exit fullscreen mode

NOTE: this hook could be useful as starts up the commitizen wizard every time you type git commit on the terminal but it changes the behaviour of the git commit command and opens an editor to save the commit message.

npx husky add .husky/prepare-commit-msg "exec < /dev/tty && node_modules/.bin/cz --hook || true"
Enter fullscreen mode Exit fullscreen mode

Instead, I prefer to add a script on the package.json like this:

"scripts": {
    ...
    "cz": "cz"
  },
Enter fullscreen mode Exit fullscreen mode

so you can run npm run cz to start the wizard or even create an alias to shorten this command.

Releasing

now that you already have a few commits, it's time to create releases and by using semver, you will be able to show those changes on the changelog as patches, minor or major ones.

first install standard-version as follows:

npm i --save-dev standard-version
Enter fullscreen mode Exit fullscreen mode

then place this new scripts on your package.json:

  "scripts": {
    ...
    "release": "standard-version",
    "release:minor": "standard-version --release-as minor",
    "release:patch": "standard-version --release-as patch",
    "release:major": "standard-version --release-as major"
  },

Enter fullscreen mode Exit fullscreen mode

now just for only time do a initial release this way:

npm run release -- --first-release
Enter fullscreen mode Exit fullscreen mode

CONGRATS! now you have a wonderful auto-generated changelog.md based on your conventional commit messages.

From now on after you commit your changes you will be able to run npm run release:patch (minor or major) depending on your changes.


Happy coding!

Top comments (1)

Collapse
 
dingdingdong profile image
The D

Thanks. I was looking for this!!!