Today we’ll talk about how to write a good COMMIT message.

Commit Message Git Commit Message Git Commit message Git Commit message

The Commit Message is deceptively simple, but it does an important job. When reading code, you can use the Commit Message to see the context in which the author wrote a line of code. When investigating bugs, you can quickly locate relevant commit records by searching for commit messages.

What is a good Commit message?

The open source community has developed a set of written specifications for us called Conventional Commits. Many popular open source projects use this specification, such as Karma, Angular, etc. The prescribed format is as follows:

<type>[optional scope]: <description>

[optional body]

[optional footer]
Copy the code

Let’s take a look at each component:

Type: indicates the type of change we are committing this time. Is it new functionality? Or did you change the test code? Or is it a document update? The open source community currently identifies the following 11 types:

  • Build: The main purpose is to modify the commit of the project build system (e.g. glUP, Webpack, rollup configuration, etc.)
  • Ci: The main purpose is to modify the submission of the project to continue the integration process (e.g. Travis, Jenkins, GitLab CI, Circle, etc.)
  • Docs: Updates the document
  • Feat: Added function
  • Fix: Fixes bugs
  • Perf: Performance optimization
  • Refactor: Refactoring code (no new features, no bug fixes)
  • Style: Code changes that do not affect program logic (modify whitespace characters, complete missing semicolons, etc.)
  • Test: Add a test case or update an existing test
  • Revert: Rolls back an earlier submission
  • Chore: Any other type that does not belong to any of the above categories

Optional Scope: An optional modification scope. Identifies which module in the code is primarily involved in this commit. Fill in the module list according to the actual situation of the project. It is better to specify the module list in the project to maintain consistency.

Description: Describe the main content of the submission in one sentence. Make it brief and comprehensive.

Optional body and optional footer are not usually used, so I won’t go over them here.

With the format covered, let’s take a look at what a real-world Commit Message that conforms to the specification might look like.

Take Angular’s latest commit history as an example:

Isn’t it neat?

Now that the specification is in place, we need a tool to automatically check that the Commit message we write actually complies with the specification. It’s as if we created a JavaScript syntax specification and needed something like ESLint to automatically check it for us.

For commit Messages, this tool is commitLint.

Enable CommitLint in the project

Like ESLint, commitLint itself only provides the functionality for checking and some of the most basic rules. Users need to configure their own specifications based on these rules.

For the Conventional Commits specification, the community has the @commitlint/ config-Conventional package ready, and we simply need to install and enable it.

Install commitLint and Conventional specifications first:

npm install --save-dev @commitlint/cli @commitlint/config-conventionalCopy the code

Next create the commitlint.config.js file and write the following:

module.exports = {
  extends: ['@commitlint/config-conventional'],
};
Copy the code

At this point, commitlint configuration is almost complete. We haven’t said when commitLint will be implemented yet.

The answer is obvious every time you commit git

In order to execute commitLint on each commit to check our input message, we also need a tool — Husky.

Husky is an enhanced Git hook tool. The NPM script that we configured in package.json can be executed at various stages of git hook.

First install Husky:

npm install --save-dev huskyCopy the code

Then configure the Commitmsg script in package.json:

{
  "scripts": {
    "commitmsg": "commitlint -E GIT_PARAMS"
  }
}Copy the code

At this point, the configuration is complete.

Let’s get a feel for it:

What are you waiting for? Now enable CommitLint on your own projects!