Your git commit message will say everything

Namaste Dev Gang, 🙏🏻

Like you, I’m a developer who daily now and then hits git commit -m “commit message” in the terminal to commit with the commit message. But like major devs, I used to write git commit messages in a chaotic way like “done some minor fixes in table component”. I used to think about what should I write in a git commit message so my teammates and my code reviewer would know what I have done in that commit. So once randomly watched a video on YouTube in that video that the creator told better way to write a commit message, which was message must have <actionWord> : <message>, so I used to follow this way before knowing the format mentioned in the article.

As you start writing your git commit messages in a formatted way that will help you a lot in collaborations. In this article, I have tried to identify the appropriate way of writing git commit messages you can follow.

📃 Topics covered

1. Importance of linted / formatted git commit message
2. About git-commit-msg-linter library for your JS projects
3. About the format to use while writing a git commit message
4. Configuring git-commit-msg-linter
5. Summary
6. References

🛡️Importance of linted / formatted git commit message

• Readability and Understanding: Clear, concise, and well-formatted commit messages make it easier for developers to understand the changes a commit introduces. This readability becomes crucial when reviewing code, identifying bugs, or understanding the purpose of specific changes.
• Consistency: Consistently formatted commit messages across a project or team streamline communication and comprehension. When everyone follows the same conventions, it becomes simpler to track changes and understand the history of the codebase.
• Project Maintenance: In the long term, well-formatted commit messages significantly aid in project maintenance. They act as a log of changes, allowing developers to trace back when a specific feature was added, track down bugs, or understand the reasoning behind certain modifications.
• Facilitates Collaboration: A shared standard for commit messages fosters collaboration among team members. It enables developers to effectively communicate the purpose, scope, and impact of their changes, facilitating smoother collaboration and reducing misunderstandings.
• Automation and Tooling: Linted commit messages can be leveraged by various automation tools. Continuous Integration (CI) systems, release scripts, or other tooling can parse commit messages to generate release notes, trigger specific actions, or enforce policies based on commit history.
• Community Contribution: For open-source projects, linted commit messages to serve as a guide for contributors. They set a standard that helps maintain quality and consistency across contributions from various individuals.

🔠 About git-commit-msg-linter library, for your JS projects

About

A git “commit-msg” hook for linting your git commit message against the popular Angular Commit Message Guidelines. As a hook, it will run at every committing to make sure that the message to commit is valid against the conventions. If not the commit will be aborted.

In short, this is a pre-commit hook that checks whether your git commit message format has a preferred format or not, which you can modify

Installing git-commit-msg-linter

Using NPM

npm install git-commit-msg-linter --save-dev

As this gets installed in dev dependencies which you can see in your package.json file

For other tech stack projects, you can follow the conventions which are explained further, which will help you to be a better developer.

👨🏻‍💻About the format to use while writing a git commit message

Let's break down the format,

<type> (<scope>) : <short summary>

type : there are about 12 predefined types which you can modify in commitlinterrc.json file

feat: A new feature.

fix : A bug fix.

docs : Documentation only changes.

deps : Add, upgrade, or delete dependencies.

style : Changes that do not affect the meaning of the code (white space, formatting, missing semi-colons, etc).

refactor : A code change that neither fixes a bug nor adds a feature.

test : Adding missing tests or correcting existing ones.

chore : Changes to the build process or auxiliary tools and libraries such as documentation generation.

perf : A code change that improves performance.

ci : Changes to your CI configuration files and scripts.

build : Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, pm).

temp : Temporary commit that won’t be included in your CHANGELOG.

Scope :

Optional, can be anything specifying the scope of the commit change.

In-App Development, scope can be a page, a module, or a component.

Short Summary :

Summary of the change. Not capitalized. No period at the end.

Let’s see an example and use case of the above format

Normal commit message :

Done some minor fixes in bottom report table.

Good commit message :

fix : bottom report table issue fixed

Pro commit message

Fix ( BottomReportTable.jsx ) : In addition of annotations data refresh issue is resolved

There is no rocket science in writing the pro git commit messages you just have to follow a format for consistency in your git commit messages and improve their readability for your team members.

🔨Configuring git-commit-msg-linter

So after installing git-commit-msg-linter msg in your project, it will check your commit message format and then do the action likewise. You can modify the configuration of your git commit message for that you must create a file name commitlinterrc.json

Copy And paste below as your starting config :

{
  "lang": "en-US",
  "types": {
    "feat": "A new feature.",
    "build": "Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, pm).",
    "deps": "Add, upgrade, or delete dependencies.",
    "docs": "Documentation only changes.",
    "fix": "A bug fix.",
    "style": "Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc.).",
    "refactor": "A code change that neither fixes a bug nor adds a feature.",
    "test": "Adding missing tests or correcting existing ones.",
    "perf": "A code change that improves performance.",
    "ci": "Changes to your CI configuration files and scripts.",
    "temp": "Temporary commit that won't be included in your CHANGELOG.",
    "chore": "Changes to the build process or auxiliary tools and libraries such as documentation generation."
  },
  "min-len": 10,
  "max-len": 100,
  "example": "Fix ( BottomReportTable.jsx ) : In addition of annotations data refresh issue is resolved",
  "scopeDescriptions": [
    "It's optional; you can specify where the commit changes are.",
    "In app development, scopes can be pages, modules, or components."
  ],
  "invalidScopeDescriptions": [
    "`scope` is optional but cannot be empty when parentheses exist."
  ],
  "subjectDescriptions": [
    "A very short description of the change in one line."
  ],
  "invalidSubjectDescriptions": [
    "Don't start with a capital letter.",
    "Don't end with a period '.'."
  ],
  "showInvalidHeader": true,
  "showInvalidSubjectDescriptions": true,
  "debug": false
}

That’s it now config is ready to help you in committing pro git commit messages.

After committing in wrong format it will abort the commit and give info on how you can do it in the preferred format

📢Summary

1. Structured git commit messages, like “<type> (<scope>) : < short summary>”, enhance readability and collaboration.
2. Utilizing tools like git-commit-msg-linter enforces consistent, linted commit messages.
3. Preferred conventions involve defined types (e.g., feat, fix, etc.) and optional scopes for clarity.
4. This fosters project maintenance, aids in understanding changes, and supports automation.
5. Setting up git-commit-msg-linter and configuring commitlinterrc.json ensures adherence to formatting standards in your js projects, improving team communication and ctrl + s your code reviewer’s time and improving readability.

🫱🏻‍🫲🏻 References

1. git-commit-msg-linter

I’m Anand Suryawanshi, a front-end developer and computer engineer on a continuous journey of learning and innovation. Follow me for more content, and also share with your developer friends!!

🔗 let's get connected : https://www.linkedin.com/in/anand-suryawanshi-532a87155/

😎 Let’s get in touch : https://onlyanand10.github.io/portfolio/