193  
查询码:00000151
前端项目 Commit Message 规范配置
作者: 王宏奔 于 2022年01月13日 发布在分类 / 人防组 / 人防前端 下,并于 2022年01月13日 编辑

Commit Message 规范

Git 每次提交代码,都必须要写 Commit Message(提交说明),否则就不允许提交,一般来说,Commit Message 应该清晰明了,说明本次提交的目的。同样 Commit Message 也有其对应的规范,目前社区有很多种 Commit Message 写法规范,其中使用最广泛的当属 Angular 规范 ,让我们先来欣赏一下 Angular 项目的提交记录


Commit Message 格式

每个提交消息由 header body footer 组成,中间用空行分隔开:

<type>(<scope>): <subject>

<body>

<footer>

header 具有特殊的格式,包括 type scope subject

type (必选)用于说明提交类型:

描述
feat 新增新功能
fix 修复bug
docs 文档变更
style 不影响代码功能的格式更改(空格、缩进、分号等)
refactor 既不新增功能也不修复bug的代码变更
perf 提高性能的代码变更
test 添加缺失的测试或修改现有的测试
build 影响项目构建或外部依赖项的更改,例如:webpack、gulp、npm 等
ci 对持续集成软件的配置文件和脚本的更改,例如:Travis、Circle 等
chore 对构建过程或辅助工具和库(如文档生成)的更改
revert 代码回滚

scope (可选)用于指定提交影响的范围,具体依项目来定义,例如:router、store、utils等,若影响多个范围时可使用 * 代替

subject (必选)用于对提交进行简要描述

body (可选)用于对提交进行详细描述

footer (可选)如果提交具有突破性变更或关闭 issue,则必选;突破性变更需以 BREAKING CHANGE 开头,后面是对变更的描述,以及变更的理由;在开源项目中会存在关闭 issue 的情况,若提交针对特定 issue 则需要将关闭的单个或多个 issue 填写上

规范 Commit Message 的好处
  • header 具有简洁实用的关键信息,方便在 git history 中快速浏览

  • 具有详细信息的 body 和 footer,可以清晰看出某次提交的目的和影响

  • 可以通过 type 或关键字快速过滤查找出相关提交记录

  • 可以直接通过 commit 生成 change log

集成 Commitizen

Commitizen 是一个帮助撰写符合 Commit Message 规范的工具。

  1. 安装 Commitizen
    npm install commitizen -D
  2. 初始化项目
    commitizen init cz-conventional-changelog --save-dev --save-exact

    上面的命令帮你做了两件事:

    • 安装 cz-conventional-changelog 到开发依赖

    • package.json 中添加了 config.commitizen

      // package.json
      
      {
        ...
        "config": {
          "commitizen": {
            "path": "./node_modules/cz-conventional-changelog"
          }
        }
      }
  3. 使用 Commitizen

    通过 git cz 命令替代 git commit ,然后在终端根据提示逐步填写,即可自动生成符合规范的 Commit Message 。

IDE 安装生成 Commit Message 插件

目前像 JetBrains WebStorm、VSCode 等 IDE 都集成了 Git,所以提交代码时用到命令行的次数不多,可以安装插件来实现 git cz 一样的效果。

VSCode 尚未发现较为好用的插件

JetBrains WebStorm 可以安装 Git Commit Template 插件

集成 Commitlint

Commitlint 是一个用来检查 Commit Message 是否符合规范的工具。

  1. 安装 Commitlint
    npm i @commitlint/cli @commitlint/config-conventional -D
  2. 配置 Commitlint

    在项目根目录创建 .commitlintrc.js 文件( 其它格式 ),并写入以下内容:

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

    也可采用 shell 命令生成配置文件,但要注意字符编码问题

    echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > .commitlintrc.js

  3. 使用 Commitlint

    和 husky 配合使用,在 commit-msg hook 触发检查

    npx husky add .husky/commit-msg "npx --no -- commitlint --edit $1"

    至此不符合规范的 Commit Message 将会导致提交失败,只有符合规范才可顺利提交。



 推荐知识

 历史版本

修改日期 修改人 备注
2022-01-13 19:02:49[当前版本] 王宏奔 格式调整
2022-01-13 19:00:26 王宏奔 格式调整
2022-01-13 18:51:53 王宏奔 添加配图
2022-01-13 18:49:37 王宏奔 创建版本

 附件

附件类型

PNGPNG

  目录
    知识分享平台 -V 4.8.7 -wcp