Vue-CLI v4にcommitlintを導入する

はじめに

はじめてVue-cli v4にcommitlintを1から設定したので備忘録として残しておく
commitlintそのものについては、他の方が紹介している丁寧な記事が多かったのでここでは触れない

Git Hub

• commitlint

commitlint インストール

いろいろなところを見て回ると下記2つを一度にインストール方法を取っていたが、自分の環境では個別にしないとうまく入らなかった。よくわからない。

npm i @commitlint/cli

npm i @commitlint/config-conventional

設定ファイル作成

ルート直下に「commitlint.config.js」を作成する。内容は公式の説明通り

commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional']
}

husky インストール

huskyも必要。huskyの説明についても割愛。

npm install husky --save-dev

package.jsonにスクリプトを設定

package.json

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

使ってみて

やはり便利。

モックを作成している段階では面倒ではないか？という意見があり、そのままの流れで本番になっても導入していなかったが、本格的にコードを書き始めるとやはり収集がつかなくなってきたので導入。
機械的にLintをかけられるならそれに越したことはないと思うので個人的には必須の設定です。