vue 根据git commit记录生成CHANGELOG.md文档

本文介绍了如何使用conventional-changelog和conventional-changelog-cli在Vue项目中生成符合Angular commit规范的CHANGELOG.md,包括安装依赖、配置package.json、自定义配置和生成过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

本文基于

  • “conventional-changelog”: “^5.1.0”
  • “conventional-changelog-cli”: “^4.1.0”

生成 CHANGELOG.md 需要符合 git commit 提交规范,规范配置请查看另一篇文章 Vue 代码提交github前commit message校验规范

1.安装依赖

yarn add conventional-changelog conventional-changelog-cli --dev

2.配置 package.json 的 scripts 字段

"scripts": {
  ...
  "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
}

-p angular:指定使用的 commit message 标准
-i CHANGELOG.md:指定输出的文件名称
-s:指定读写同一文件
-r 0:指定增量更新,不会覆盖以前的更新

在这里插入图片描述

3.自定义 CHANGELOG.md 配置

1.根目录新建 .changelog.config.js

请参考官方配置项: writerOpts.js

2.修改 changelog 配置项

"scripts": {
  ...
  "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0  -n ./.changelog.config.js"
}

-n ./.changelog.config.js: 自定义配置文件

3.生成 CHANGELOG.md

yarn changelog

在这里插入图片描述

如果本篇文章对你有帮助的话,很高兴能够帮助上你。

当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。

### 如何在 Vue 项目中使用 Git 进行代码提交的最佳实践 #### 使用 Git 提交规范 为了确保团队协作顺畅并提高可维护性,遵循统一的 Git 提交信息格式至关重要。对于 Vue 项目的开发而言,推荐采用 Angular 团队提出的 Commit Message 规范[^1]。 #### 初始化 Git 和 ESLint 配置 当创建一个新的 Vue 项目时,默认情况下可以选择自动配置 Eslint 并初始化 Git 仓库。如果未选择,则需手动执行如下命令来完成设置: ```bash git init npm install --save-dev eslint prettier eslint-plugin-vue @vue/cli-plugin-eslint npx vue-cli-service lint --fix ``` #### 安装和配置 Commitizen 工具 为了让开发者更容易编写标准化的日志消息,可以全局安装 `commitizen` 及其适配器 `cz-conventional-changelog` 来辅助生成符合标准的消息模板: ```bash npm install -g commitizen cz-conventional-changelog ``` 接着,在根目录下添加 `.cz-config.js` 文件用于指定使用的适配器版本号以及自定义选项(如有必要),例如: ```javascript module.exports = { path: 'cz-conventional-changelog' }; ``` #### 自动化代码风格调整 利用 Prettier 或者 Vetur 插件可以在每次保存文件时自动修正不符合预设样式的部分。具体做法是在 VSCode 中加入以下 JSON 设置片段以启用此功能[^5]: ```json { "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "auto" } }, "[vue]": { "editor.defaultFormatter": "octref.vetur" }, "editor.codeActionsOnSave": {} } ``` 这样不仅有助于减少人为疏忽带来的错误风险,还能让整个工程看起来更加整齐划一。 #### 实际操作流程展示 假设现在要修复一个 bug ,按照上述指导原则来进行的话应该是这样的过程: - 修改源码解决问题; - 执行测试验证更改无误; - 添加新改动至暂存区 (`git add .`) ; - 调用 `git cz` 命令启动交互式向导填写日志详情; - 推送更新到远程分支(`git push origin branch-name`); 通过以上步骤就可以实现一次高质量且易于理解的历史记录条目了!
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值