VUE项目中的commit提交规范插件

今天在考虑前端项目规范化时，想要通过插件来实现对git commit描述的约束，在此之前都是口头要求，给了书写规范建议，例如下面这个：

这次给大家介绍一个基于commitizen的git commit提交规范插件，直接接入Vue项目，让commit提交更规范标准。

结合 commitizen commitlint conventional-changelog-cli husky，进行封装，一键安装，开箱即用的 git commit 规范。

功能

1. 自动检测 commit 是否规范，不规范不允许提交
2. 自动提示 commit 填写格式。不怕忘记规范怎么写
3. 集成 git add . && git commit 不需要在执行两个命令
4. 自动生成 changelog

配置

1. 如果您是 vue-cli3 的项目可以直接使用即可

vue add commitlint

2. 如果您不是 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

1. 代码提交 npm run cz
   
   注：执行命令时，有可能会报缺少right-pad模块，只要安装下模块，npm install right-pad -D，再次执行就可以了。

2. 选择一个类型会自动询问

   1. (非必填）本次提交的改变所影响的范围
   2. (必填）写一个简短的变化描述
   3. (非必填）提供更详细的变更描述
   4. (非必填)是否存在不兼容变更?
   5. (非必填)此次变更是否影响某些打开的 issue

规则

如果你现在手动执行 git commit 命令就会报错：

为什么没有用Git-commit-plugin?
一是考虑到它的基于vscode编辑器的插件，无法对通过命令行的commit提交进行约束，二是基于vscode提交过程比较繁琐，我们更建议用命令行来提交git记录，本身关于git的命令就不多，希望大家多手动敲敲，在遇到异常情况时，可以通过命令行来解决。

commitizen参考链接：https://github.com/commitizen/cz-cli