DEV Community

miccho27
miccho27

Posted on

Git Commits Made Easy: Write Conventional Commits in Seconds

#productivity #git #vscode

Git Commits Made Easy: Write Conventional Commits in Seconds

Published on: Dev.to
Tags: #git #vscode #productivity #conventional-commits #extension
Reading time: 6 min

The Worst Part of Development? Writing Commit Messages

You've just finished a feature. You tested it. You're ready to push. But then...

$ git commit
# Now what do I write?
# "Fixed stuff"?
# "Updated function"?
# "WIP"?
# "asdf"? (I've done this)
Enter fullscreen mode Exit fullscreen mode

Bad commit messages create problems:

  • Code review confusion: Reviewers don't know what changed or why
  • Git history becomes useless: git log reads like gibberish
  • Blame becomes painful: Debugging 6 months later, you have no context
  • Automation breaks: Tools that parse commit messages fail

The Solution: Conventional Commits

Conventional Commits is a specification for meaningful git commit messages:

type(scope): description

[optional body]
[optional footer]
Enter fullscreen mode Exit fullscreen mode

Example:

feat(auth): add JWT token refresh mechanism

- Implements 15-minute token expiration
- Auto-refresh on request intercept
- Add logout clear on token failure

Fixes #1234
Enter fullscreen mode Exit fullscreen mode

Types:

  • feat — New feature
  • fix — Bug fix
  • refactor — Code refactoring (no behavior change)
  • docs — Documentation
  • test — Tests
  • chore — Build, deps, tooling
  • perf — Performance improvement
  • ci — CI/CD changes

Introducing: Git Commit Message Generator

Git Commit Message Generator generates Conventional Commits automatically from your staged changes.

How It Works (30 Seconds)

  1. Stage your changes: git add .
  2. Open the Command Palette: Ctrl+Shift+P
  3. Search: "Generate Commit Message"
  4. Extension analyzes your diff → Generates a draft → Paste it in

Step-by-Step Example

Before (Manual) 

$ git status
# Modified: src/auth/token.js
# Modified: src/middleware/verify.js
# New file: tests/auth.test.js

# Now you write manually:
$ git commit -m "Updated auth stuff"
# vague, not conventional
Enter fullscreen mode Exit fullscreen mode

After (With Generator) 

$ git add .
# Open VS Code Command Palette: Ctrl+Shift+P
# Type: "Generate Commit Message"
# Extension shows:
Enter fullscreen mode Exit fullscreen mode

Draft Generated:

feat(auth): implement JWT token refresh mechanism

- Add 15-minute token expiration
- Auto-refresh on API interceptor
- Logout clears token cache
- Add comprehensive test coverage

Breaking Changes: Token structure changed from {token} to {token, expires_at}
Enter fullscreen mode Exit fullscreen mode

You review → Paste to git commit → Done in 10 seconds

Key Features

1. Analyzes Your Diff

Reads what you actually changed:

$ git diff --cached
Enter fullscreen mode Exit fullscreen mode

Then generates a message describing those changes.

2. Multi-Line Support

  • Conventional commit header
  • Detailed body explaining the why
  • Footers for issue references, breaking changes

3. Customizable Templates

Set your team's conventions in VS Code settings:

{
  "m27-git-commit.scope": "required",
  "m27-git-commit.includeBody": true,
  "m27-git-commit.breakingChangePrefix": "BREAKING CHANGE:",
  "m27-git-commit.customScopes": ["auth", "api", "ui", "db", "ci"]
}
Enter fullscreen mode Exit fullscreen mode

4. Keyboard Shortcut

Bind to Alt+Shift+G for one-key commits (optional):

{
  "key": "alt+shift+g",
  "command": "m27-git-commit.generateMessage"
}
Enter fullscreen mode Exit fullscreen mode

5. Works Offline

No API calls. Everything runs locally.

Installation (3 Steps)

  1. Open VS Code Extensions: Ctrl+Shift+X
  2. Search: "Git Commit Message Generator"
  3. Click Install

Usage Guide

Basic Usage 

# 1. Stage your changes
$ git add src/auth.js tests/auth.test.js

# 2. Open VS Code
# 3. Press Ctrl+Shift+P
# 4. Type: "Generate Commit Message"
# 5. Review the draft
# 6. Copy the message
# 7. Paste into: git commit -m "..."
Enter fullscreen mode Exit fullscreen mode

With Custom Scopes

Configure your team's scopes in .vscode/settings.json:

{
  "m27-git-commit.customScopes": [
    "api",
    "auth",
    "db",
    "frontend",
    "tests"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Real-World Scenarios

Scenario 1: Feature Implementation

Changes: Added 5 files, 200 lines

Generated:
feat(auth): implement two-factor authentication

- Add TOTP (Time-based One-Time Password) support
- Add email-based backup codes
- Add recovery flow for locked accounts
- Add comprehensive test suite

Fixes #456
Enter fullscreen mode Exit fullscreen mode

✓ Clear, professional, useful for code review

Scenario 2: Bug Fix

Changes: Fixed 1 bug in 1 file

Generated:
fix(api): correct null pointer in request validation

Previously, requests with empty headers would crash the validator.
Now we safely check for existence before accessing properties.

Fixes #789
Enter fullscreen mode Exit fullscreen mode

✓ Explains the problem and the solution

Scenario 3: Refactoring

Changes: Refactored authentication module

Generated:
refactor(auth): extract token utilities into separate module

- Move token creation logic to utils/tokens.js
- Extract validation logic to utils/validate.js
- No behavior changes, improved code organization
Enter fullscreen mode Exit fullscreen mode

✓ Clear that this is refactoring, not a feature

Why Conventional Commits Matter

  1. Automated Changelogs: Tools can generate release notes automatically
  2. Semantic Versioning: Tooling can determine if it's a major/minor/patch version bump
  3. Blame is useful: git blame shows meaningful messages
  4. Code review: Reviewers immediately understand the intent
  5. Team standards: Everyone follows the same format

Common Questions

Q: Doesn't this slow me down?
A: No. You still write messages, but faster. The extension just helps format them correctly.

Q: Can I still write custom messages?
A: Yes. The extension generates a draft. You can edit it, rewrite it, or ignore it entirely.

Q: What about very small changes?
A: Works great. Small changes still deserve clear messages.

Q: Does it work with co-authored commits?
A: You can add Co-authored-by: in the footer section. The extension supports it.

Installation & Get Started

Install Git Commit Message Generator

Next Step:

  1. Make a small change to your project
  2. Stage it: git add .
  3. Open Command Palette: Ctrl+Shift+P
  4. Type: "Generate Commit Message"
  5. See the generated message
  6. Adopt it (or keep your current workflow)

Do you write Conventional Commits? What tool do you use? Share in the comments! 👇

Keywords: git, commits, conventional-commits, productivity, vscode, developer-experience

Top comments (0)