Customizing Commit Message generation in VS Code for a commitlint spec

I use the Conventional Commits standard to write my commit messages, using the commit message conventions of the Angular repo as these give me exactly the sophistication I want, no more, no less.

An example commit message is as follows:

feat(auth): add OAuth2 token refresh flow

Automatically refresh expired JWT access tokens in the 
HTTP interceptor before dispatching requests to 
protected API endpoints.

I lint that my commit messages are compliant with this format using commitlint and Husky as described in commitlint's documentation. This ensures that if I write a commit message that doesn't comply with the rules, the commit fails and I have to go back and tweak the message.

VS Code Source Control sidebar has a lovely sparkle icon that uses an LLM to generate a commit message based on uncommitted code in the repo:

Customizing commit message generation proved to be really fiddly and no matter how I tried to tweak it to take into account my commitlint config, it kept producing messages which were non-compliant.

Recently I found Emmanuele Bartolesi's post on how to configure this. The trick seems to be not to use a separate instructions file and instead, declare the full instructions directly in settings.json. It worked!

I used this prompt in Gemini Flash (Extended Mode) - which is practically free to use - to generate the setting. I copied and pasted my commitlint.config.js in the prompt:

based on this article:

https://dev.to/playfulprogramming/github-copilot-to-generate-conventional-commit-messages-in-vscode-and-jetbrains-rider-1n3b

generate vs code setting to go in my .vscode/settings.json to generate commit message instructions for the following commitlint spec:

/* eslint-env node */
module.exports = {
  extends: ["@commitlint/config-angular"],
  parserPreset: "conventional-changelog-angular",
  rules: {
    "header-max-length": [2, "always", 72],
    "body-max-line-length": [2, "always", 72],
    "header-full-stop": [2, "never", "."],
    "body-leading-blank": [2, "always"],
  },
};

Lo and behold, it generated the VS Code setting:

{
  "github.copilot.chat.commitMessageGeneration.instructions": [
    {
      "text": "Follow Conventional Commits based on Angular guidelines: type(scope): description."
    },
    {
      "text": "Use lowercase for type and scope."
    },
    {
      "text": "Use imperative, present-tense verbs in the header (e.g., 'add', 'fix', 'refactor', not 'added' or 'fixes')."
    },
    {
      "text": "Keep the header line (type, scope, and description) strictly under 72 characters."
    },
    {
      "text": "Never end the header line with a period."
    },
    {
      "text": "Use only valid Angular commit types: feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert."
    },
    {
      "text": "Include a scope when changes target a specific component, module, or package."
    },
    {
      "text": "Always leave a blank line between the header and the message body."
    },
    {
      "text": "Keep every individual line in the message body under 72 characters."
    },
    {
      "text": "Explain why the change was made in the body, using bullet points (*) for multiple changes."
    },
    {
      "text": "Append BREAKING CHANGE: <description> in the footer when introducing breaking changes."
    }
  ]
}

I copied and pasted it (removing the outermost braces) into my .vscode/settings.json and it works like a charm:

The only thing I needed to tweak was the prefix feat(github.copilot) in commit message header to ci: as I think that was the most appropriate one to use.

One thing I want to point out: In my previous attempts, VS Code commit message generation had trouble respecting the max width in my commitlint config. To be able to visually inspect that message widths hadn't been breached in the auto-generated message, I added the following VS code setting to get that faint vertical line in the commit message box, which is highlighted with a red rectangle in the screenshot above:

"[scminput]": {
    // 70 just under 72 chars in the commit message window in Source Control Sidebar. A vertical line would be shown at this width.
    // I need this to ensure my commit message lines are not wider than 72 characters, which is a rule I enforce through commitlint (see commitlint.config.js).
    "editor.rulers": [70],
    "editor.wordWrap": "off",
    "editor.fontFamily": "monospace"
  },