乐趣区

关于git:自动产出changelog第一节规范提交代码

jiezi

背景

把项目管理流程与代码治理流程买通后运作的这一年，发现产出 Changelog 这步就是占据咱们团队公布环节中较多工夫的一环，将这步交由 CI/CD 工具进行主动生成，从效率的角度来说把人手解放素来投入其余工作会更迷信和正当。

问题

主动产出 Changelog 内容有哪些工具能够用？具体怎么用？反对自定义吗？自定义水平如何？都是本文探讨的内容。探讨自定义性能的前提是在 CI/CD 工具中只能解决已知问题，生成 Changelog 的工具须要在这种环境下稳固地工作。人机交互式的应用形式是比拟浪漫，然而并不是本文探讨的重点。

调研过程

一开始是在调研 drone 这个 CI/CD 工具如何在同一个分支下提交更新的 changlog 和版本号后不反复触发构建脚本的问题。在翻查其官网文档找到答案后，便开始解决下一个环节的问题：如何更新版本号和 changelog？更新版本号的问题，在翻查 npm 官网文档后找到答案，具体内容曾经总结在这篇文章之中《应用 npm 命令行更新版本号》。因为 changelog 的产出根本是围绕着 git log 自身的数据来进行细化和解决的，所以产出 changelog 的问题讲分为两个方向：一个是如何记录，另一个是如何产出。

标准提交代码

全网搜寻相干内容时，大多围绕着 commitizen 这个工具来说，而大多数文章都是基于 angular.js 提供的提交格局进行介绍，当然还有其余标准在这里就不一一探讨了。所以记录的格局暂应用 angular.js 的提交格局，这里先简略介绍一下。

代码提交的格局

angular 的 git 提交内容格局标准如下：

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

大抵分为三个块：

  • header：<type>(<scope>): <subject>，理论是提交信息的概括（summary）
  • body: <body>，理论是提交信息的形容中的内容（description）
  • footer: <footer>，理论是提交信息的形容中最末端的内容（description）

个别记录时长这个样子：

feat: 减少素材库抉择性能

敞开 #323, #233

更具体的内容能够移步至阮一峰的这篇《Commit message 和 Change log 编写指南》具体理解。

标准代码提交格局的工具

代码提交个别应用的是 git commit 命令，输出的内容并没有格式化解决。为了更好地记录 log，就呈现了 commitizen 工具帮忙咱们标准录入。

装置 

npm install -g commitizen

首次化 

commitizen init cz-conventional-changelog --save-dev --save-exact

配置 

echo '{"path":"cz-conventional-changelog"}' > ~/.czrc

应用 

# 上面三种形式都可行
git cz
npx cz
cz

# 就会显示上面的选项
? Select the type of change that you're committing: (Use arrow keys)
> feat:     A new feature
  fix:      A bug fix
  docs:     Documentation only changes
  style:    Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
  refactor: A code change that neither fixes a bug nor adds a feature
  perf:     A code change that improves performance
  test:     Adding missing tests or correcting existing tests
(Move up and down to reveal more choices)

选项和解析是英文的，想要自定义内容能够在配置的文档中写入规定，比方批改 type 抉择：

{
    "path": "cz-conventional-changelog",
    "disableEmoji": false,
    "types": {
        "feat": {
            "description": "一个新的个性",
            "value": "feat"
        },
        "fix": {
            "description": "修复 bug",
            "value": "fix"
        },
        "perf": {
            "description": "优化了性能的代码改变",
            "value": "perf"
        },
        "refactor": {
            "description": "一些代码构造上优化，既不是新个性也不是修 Bug（比方函数改个名字）",
            "value": "refactor"
        },
        "release": {
            "description": "Create a release commit",
            "value": "release"
        },
        "style": {
            "description": "代码的款式丑化，不波及到性能批改（比方改了缩进）",
            "value": "style"
        },
        "test": {
            "description": "新增或者批改已有的测试代码",
            "value": "test"
        },
        "chore": {
            "description": "跟仓库次要业务无关的构建 / 工程依赖 / 工具等性能改变（比方新增一个文档生成工具）",
            "value": "chore"
        },
        "ci": {
            "description": "CI related changes",
            "value": "ci"
        },
        "docs": {
            "description": "更新了文档（比方改了 Readme）",
            "value": "docs"
        }
    }
}

运行后是这个样子：

$ cz
cz-cli@4.2.3, cz-conventional-changelog@3.2.0

? Select the type of change that you're committing: (Use arrow keys)
> feat:     一个新的个性
  fix:      修复 bug
  perf:     优化了性能的代码改变
  refactor: 一些代码构造上优化，既不是新个性也不是修 Bug（比方函数改个名字）release:  Create a release commit
  style:    代码的款式丑化，不波及到性能批改（比方改了缩进）test:     新增或者批改已有的测试代码
(Move up and down to reveal more choices)

其余优化细节能够参考 cz-conventional-changelog 的阐明。对于完满达人来说可能感觉发问的内容也中文化的状况，这时你能够应用 leoforfree/cz-customizable 进行更细化的设置，这里就不详细描述了。

局部内容援用至《commit 标准及主动生成 changelog》

应用 VSCode 用户能够间接装置 Visual Studio Code Commitizen Support 插件，在须要提交代码时 ctrl+shift+ p 输出 conventional commit，就能有 commitizen 的成果。而其还反对自定义配置的，配置的细节与 统一。只须要在.cz-config.js 写入上面配置的内容就能够了。

module.exports = {
    // type 类型
    types: [{ value: 'feat', name: '✨ 新增产品性能'},
      {value: 'fix', name: '🐛 修复 bug'},
      {value: 'docs', name: '📝 文档的变更'},
      {
        value: 'style',
        name:
          '💄 不扭转代码性能的变动 (如删除空格、格式化、去掉开端分号等)',
      },
      {
        value: 'refactor',
        name: '♻ 重构代码。不包含 bug 修复、性能新增',
      },
      {
        value: 'perf',
        name: '⚡ 性能优化',
      },
      {value: 'test', name: '✅ 增加、批改测试用例'},
      {
        value: 'build',
        name: '👷‍ 构建流程、内部依赖变更，比方降级 npm 包、批改 webpack 配置'
      },
      {value: 'ci', name: '🔧 批改了 CI 配置、脚本'},
      {
        value: 'chore',
        name: '对构建过程或辅助工具和库的更改, 不影响源文件、测试用例的其余操作',
      },
      {value: 'revert', name: '⏪ 回滚 commit'},
  
    ],
  
    // scope 类型，针对 React 我的项目
    scopes: [['components', '组件相干'],
      ['hooks', 'hook 相干'],
      ['hoc', 'HOC'],
      ['utils', 'utils 相干'],
      ['antd', '对 antd 主题的调整'],
      ['element-ui', '对 element-ui 主题的调整'],
      ['styles', '款式相干'],
      ['deps', '我的项目依赖'],
      ['auth', '对 auth 批改'],
      ['other', '其余批改'],
      // 如果抉择 custom , 前面会让你再输出一个自定义的 scope , 也能够不设置此项，把前面的 allowCustomScopes 设置为 true
      ['custom', '以上都不是？我要自定义'],
    ].map(([value, description]) => {
      return {
        value,
        name: `${value.padEnd(30)} (${description})`
      };
    }),
  
    // allowTicketNumber: false,
    // isTicketNumberRequired: false,
    // ticketNumberPrefix: 'TICKET-',
    // ticketNumberRegExp: '\\d{1,5}',
  
    // 能够设置 scope 的类型跟 type 的类型匹配项，例如: 'fix'
    /*
      scopeOverrides: {
        fix: [{ name: 'merge'},
          {name: 'style'},
          {name: 'e2eTest'},
          {name: 'unitTest'}
        ]
      },
     */
    // 覆写提醒的信息
    messages: {
      type: "请确保你的提交遵循了原子提交标准！\n 抉择你要提交的类型:",
      scope: '\n 抉择一个 scope (可选):',
      // 抉择 scope: custom 时会出上面的提醒
      customScope: '请输出自定义的 scope:',
      subject: '填写一个简短精炼的形容语句:\n',
      body: '增加一个更加具体的形容，能够附上新增性能的形容或 bug 链接、截图链接 (可选)。应用"|"换行:\n',
      breaking: '列举非兼容性重大的变更 (可选):\n',
      footer: '列举出所有变更的 ISSUES CLOSED  (可选)。例如.: #31, #34:\n',
      confirmCommit: '确认提交?',
    },
  
    // 是否容许自定义填写 scope，设置为 true，会主动增加两个 scope 类型 [{name: 'empty', value: false},{name: 'custom', value: 'custom'}]
    // allowCustomScopes: true,
    allowBreakingChanges: ['feat', 'fix'],
    // skip any questions you want
    // skipQuestions: [],
  
    // subject 限度长度
    subjectLimit: 100,
    // breaklineChar: '|', // 反对 body 和 footer
    // footerPrefix : 'ISSUES CLOSED:'
    // askForBreakingChangeFirst : true,
  };

配置实现后是长这个样子：

这里强调一下，批改完.cz-config.js 须要重启 VSCode 才会失效。貌似是这个插件的一个 bug，具体看 issues #199。

第二节主动产出局部的内容后续补上。

退出移动版