How to use commitlint with yorkie & vue-cli@3.x

TLDR: "commit-msg": "commitlint -e -V" instead of "commitlint -E HUSKY_GIT_PARAMS"

During the last year, I became extremely fond of [commitlint](https://commitlint.js.org) and the related ecosystem. The ability to enforce a specific commit message format is the cornerstone of my automated releases. Yes, in a perfect world, there would be no need for linters etc. But mistakes happen, especially during crunchtime. A modern front-end development workflow should automate as much chores as possible to relieve the developer form those micro-tasks.

When you followed the commitlint guide, your package.json implements the git-hook with this lines:

"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}

Let's break it down. As soon as a you create a new commit message, the commit-msg git-hook calls the commitlint executable. The -E flag takes husky's own environment variable HUSKY_GIT_PARAMS and passes it to the executable. HUSKY_GIT_PARAMS contains the commit message you just created.

A few weeks ago, I used vue-cli for a small PWA. While browsing through the setup guide, I stumbled across this line:

@vue/cli-service also installs yorkie, (....) yorkie is a fork of husky and is not compatible with the latter.

I wanted to keep my workflow, so I needed to find a way to pass the latest git commit message to the commitlint executable without the proprietary HUSKY_GIT_PARAMS.

Luckily, commitlint cli has another flag, which is exactly what I needed:

--edit, -e read last commit message from the specified file or fallbacks to ./.git/COMMIT_EDITMSG

So, to use yorkie with commitlint, I replaced the "husky"-property with the following "gitHooks"-property at the package.json:

"gitHooks": {
  "commit-msg": "commitlint -e -V ",
}

Follow me on Twitter: @martinkr and consider to buy me a coffee