1、依赖安装

npm install conventional-changelog-cli commitlint commitizen conventional-changelog-cli husky -D

2、配置commitlint.config.js

在项目根部录下新建该文件，并写入如下内容

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

3、修改pacage.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"
    }
  }

4、可能会遇到的问题

本地新建的一个项目，执行npm run cz我的项目有俩报错

image.png

1. 解决方案

git rm -r --cached ./
git config core.autocrlf false
git add ./

2. 解决方案

npm install right-pad -D

5、提交代码

为后面生成changelog做铺垫，可以选择不同的提交类型，多提交几次。

image.png image.png

6、生成changelog

npm run log

效果如下：

0.1.0 (2021-05-19)

🐛 Bug 修复

范围	描述	commitId
App.vue	添加h4标签	514320b

📝 文档

范围	描述	commitId
App.vue	新增h4标签	f5f4ccb

范围	描述	commitId
-	feat(*):本地代码上传	e899c47
-	Initial commit	1fe006d

7、依赖功能说明

1. commitlint

可以帮助我们 lint commit messages, 如果我们提交的不符合指向的规范, 直接拒绝提交, 比较狠

2. commitizen

我们需要借助它提供的 git cz 命令替代我们的 git commit 命令, 帮助我们生成符合规范的 commit message

3. conventional-changelog-cli

根据git的metadata生成changelog

4. husky

git命令时，自定义指定一些动作