序论

在团队中代码提交（git commit）会有各种各样的风格，甚至有些人根本没有 commit 规范的概念，所以在我们回头去查找在哪个版本出现问题的时候，就会非常尴尬😅，很难快速定位到问题。为了项目的规范化，代码提交规范就显得尤为重要！

vue-cli-plugin-commitlint 介绍

vue-cli-plugin-commitlint 是根据 vue 插件的形式写的，可以执行 vue add commitlint 直接使用，如果不是 vue 的项目也可以根据下面的配置自行配置。
结合 commitizen commitlint conventional-changelog-cli husky conventional-changelog-angular，进行封装，一键安装，开箱即用的代码提交规范。

功能

1. 自动检测 commit 是否规范，不规范不允许提交

2.自动提示 commit 填写格式。不怕忘记规范怎么写

3.集成 git add . && git commit 不需要在执行两个命令

4.自动生成 changelog

配置

vue-cli3

vue add commitlint

非vue-cli3

npm i vue-cli-plugin-commitlint commitizen commitlint conventional-changelog-cli husky -D

package.json

{
  "scripts": {
    "log": "conventional-changelog --config ./node_modules/vue-cli-plugin-commitlint/lib/log -i CHANGELOG.md -s -r 0",
    "cz": "npm run log && git add . && git cz"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/vue-cli-plugin-commitlint/lib/cz"
    }
  }
}

增加 commitlint.config.js 文件

module.exports = {
  extends: ['./node_modules/vue-cli-plugin-commitlint/lib/lint']
};

使用

npm run cz  # git add . && git commit -m 'feat:(xxx): xxx'
npm run log # 生成 CHANGELOG