DEV Community

Cover image for How To Automatically Generate A Helpful Changelog From Your Git Commit Messages
Michael Hoffmann
Michael Hoffmann

Posted on • Originally published at mokkapps.de on

How To Automatically Generate A Helpful Changelog From Your Git Commit Messages

#changelog #git #development #javascript

Creating a changelog is a usual task if a new software version is going to be released. It contains all the changeswhich were made since the last release and is helpful to remember what has changed in the code and to be able toinform the users of our code.

In many projects, creating the changelog is a manual process that is often undesired, error-prone, and time-consuming.This article describes some tools that can help to automate the changelog creation based on the Git history.

Let’s start with some basics.

Semantic Versioning

Semantic Versioning (SemVer) is a de facto standard for code versioning. It specifies that aversion number always contains these three parts:

SemVer

  • MAJOR : is incremented when you add breaking changes, e.g. an incompatible API change
  • MINOR : is incremented when you add backward compatible functionality
  • PATCH : is incremented when you add backward compatible bug fixes

Conventional Commits

The Conventional Commits specification proposes introducing a standardized lightweight convention on top of commit messages.This convention dovetails with SemVer, asking software developers to describe in commit messages, features, fixes, and breaking changes that they make.

Developers tend to write commit messages that serve no purpose. Usually, the message does notdescribe where changes were made, what was changed, and what was the motivation for making the changes.

So I recommend to write commit messages using the Conventional Commits specification:

<type>[optional scope]: <description>

[optional body]

[optional footer]
Enter fullscreen mode Exit fullscreen mode

An example of such a message:

fix: ABC-123: Caught Promise exception

We did not catch the promise exception thrown by the API call
and therefore we could not show the error message to the user
Enter fullscreen mode Exit fullscreen mode

The commit type <type> can take one of these value:

  • fix: a commit of this type patches a bug in your codebase and correlates with the patch version in semantic versioning
  • feat: a commit of this type introduces a new feature to the codebase and correlates with a minor version in semantic versioning
  • BREAKING CHANGE: a commit that has the text BREAKING CHANGE: at the beginning of its optional body or footer sectionintroduces a breaking API change and correlates with a major version in semantic versioning. A breaking change can be part ofcommits of any type. e.g., a fix:, feat: & chore: types would all be valid, in addition to any other type.

Other types like chore:, docs:, style:, refactor:, perf:, test: are recommended by theAngular convention. Thesetypes have no implicit effect on semantic versioning and are not part of the conventional commit specification.

I also recommend reading How to Write Good Commit Messages: A Practical Git Guide.

Auto-Generate Changelog

Now we can start to automate the changelog creation.

  1. Follow the Conventional Commits Specification in your repository. We will use @commitlint/config-conventional to enforce this via Git hooks.
  2. Use standard-version, a utility for versioning using SemVer and changelog generation powered by Conventional Commits.

I will demonstrate the usage based on this demo project whichwas initialized running npm init and git init.

The next step is to install husky, which sets up your Git hooks:

npm install husky
Enter fullscreen mode Exit fullscreen mode

Then install commitlint with a config, which will be used to lint your commit message:

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

As we are using config-conventional we are automatically following the Angular commit convention.

Now we need to tell Husky to run commitlint during the Git commit hook. We can add it to the package.json

  "dependencies": {
    "@commitlint/cli": "latest",
    "@commitlint/config-conventional": "latest",
    "husky": "latest"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
Enter fullscreen mode Exit fullscreen mode

alternatively to a .huskyrc file:

{
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}
Enter fullscreen mode Exit fullscreen mode

Finally, we create a .commitlintrc.json file which extends the rules from config-conventional:

{
  "extends": ["@commitlint/config-conventional"]
}
Enter fullscreen mode Exit fullscreen mode

Running git commit with an invalid message will now cause an error:

▶ git commit -m "this commit message is invalid"
husky > commit-msg (node v14.8.0)
⧗ input: this commit message is invalid
✖ subject may not be empty [subject-empty]
✖ type may not be empty [type-empty]

✖ found 2 problems, 0 warnings
ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky > commit-msg hook failed (add --no-verify to bypass)
Enter fullscreen mode Exit fullscreen mode

and valid commits will work:

▶ git commit -m "feat: initial feature commit"
[master (root-commit) a87f2ea] feat: initial feature commit
 5 files changed, 1228 insertions(+)
 create mode 100644 .commitlintrc.json
 create mode 100644 .gitignore
 create mode 100644 index.js
 create mode 100644 package-lock.json
 create mode 100644 package.json
Enter fullscreen mode Exit fullscreen mode

Now we are safe and can guarantee that only valid commit messages are in our repository.

Generate Changelog

Finally, we can create our changelog from our Git history. First step is to install standard-version:

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

Now we can create some npm scripts in our 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

The changelog generation can be configured via a .versionrc.json file or placing a standard-version stanza in your package.json.

In our demo we use a .versionrc.json file based on the Conventional Changelog Configuration Spec:

{
    "types": [
      {"type": "feat", "section": "Features"},
      {"type": "fix", "section": "Bug Fixes"},
      {"type": "chore", "hidden": true},
      {"type": "docs", "hidden": true},
      {"type": "style", "hidden": true},
      {"type": "refactor", "hidden": true},
      {"type": "perf", "hidden": true},
      {"type": "test", "hidden": true}
    ],
    "commitUrlFormat": "https://github.com/mokkapps/changelog-generator-demo/commits/{{hash}}",
    "compareUrlFormat": "https://github.com/mokkapps/changelog-generator-demo/compare/{{previousTag}}...{{currentTag}}"
  }
Enter fullscreen mode Exit fullscreen mode

An array of type objects represents the explicitly supported commit message types, and whether they should show up in the generated changelog file.commitUrlFormat is an URL representing a specific commit at a hash and compareUrlFormat is an URL representing the comparison between two git shas.

The first release can be created by running npm run release -- --first-release in the terminal:

▶ npm run release -- --first-release

> changelog-generator-demo@0.0.0 release /Users/mhoffman/workspace/changelog-generator-demo
> standard-version "--first-release"

✖ skip version bump on first release
✔ created CHANGELOG.md
✔ outputting changes to CHANGELOG.md
✔ committing CHANGELOG.md
✔ tagging release v0.0.0
ℹ Run `git push --follow-tags origin master` to publish
Enter fullscreen mode Exit fullscreen mode

An exemplary CHANGELOG.md could look similar to this one:

CHANGELOG First Release

What I like is that the changelog is divided by the type of commit, it contains links to the specific commits and link tothe diff of the version.

Of course, you can always edit the auto-generated changelog to make it more readable though. The generated changelog Markdowntext can be pasted into GitHub releases so that it shows up next to each release tag. There are a lot more options inthe tools to customize linting commits or the changelog generation.

Conclusion

For lazy developers like me, an automatic changelog generation is a nice tool that saves me a lot of time. Additionally,we have better commit messages in our code repository as they follow an established specification.

It needs some time to get used to the commit convention. You could encounter some discussions in your team as allcode contributors need to follow the convention. The Git hook solution should catch the wrong messages as early as possiblebut you could also add a guard in your CI/CD pipeline.

In my opinion, it is worth the effort to introduce the Git commit convention and the changelog generation in projects.We as developers do not need to invest much time & brain capacity for the changelog generation and have a helpfuldocument where we can look up what has changed between our software releases. Additionally, we can easily share thiswith the users of our software so that they also see what they can expect from each new release.

Top comments (1)

Collapse
 
syskin profile image
syskin •

Your article is very detailed and well constructed.
However, it is aimed at a very technical audience. I recently launched Changelogit (.com), a tool that uses commits to generate a less technical changelog aimed at a more product-oriented audience (whether internal teams or end customers).

Don't hesitate to have a look and let me know what you think.

Read next

developerhub profile image

Check if a key exists in JavaScript object?

Abdus Shohid Shakil -

jjablonskiit profile image

Next.js Shopify eCommerce Starter with Perfect Web Vitals 🚀

Jakub Jabłoński -

sh20raj profile image

JavaScript Optional Chaining! 🌟

Sh Raj -

vatana7 profile image

react-native-collapsable-tab-view onScroll not working

vatana7 -