likes
comments
collection
share

新手不懂commit规范?这3个工具让你和同事无痛上道!在团队协作开发软件项目时,遵循统一的commit规范至关重要。

作者站长头像
站长
· 阅读数 20

前言

在团队协作开发软件项目时,遵循 统一的 commit 规范(一般为Angular JS规范) 对于保持代码仓库的整洁和提高团队成员之间的沟通效率至关重要。

然而,对于很多刚接触版本控制的新手来说,如何写出符合 规范的commit message 并不是一件容易的事,要求全部项目开发者使用 同一套 commit 规范 也不容易。

今天,我们就来介绍三个工具:commitizencommitlint 以及 husky,它们可以帮助你和你的团队快速掌握 commit规范,提升团队协作效率。

这三款工具只要在 node 环境下就可以安装,因此不管是前端还是后端,都可以哦!

commitizen:帮你编写符合规范的 commit message

commitizen 是一个帮助开发者 按照特定的格式(Angular规范) 编写 commit message 的工具。它通过提供一个 命令行界面(CLI) 来引导用户逐步填写 commit message 信息,从而确保每次提交都遵循相同的格式。这种格式化的方式有助于团队成员更容易理解和跟踪项目的变更历史。

新手不懂commit规范?这3个工具让你和同事无痛上道!在团队协作开发软件项目时,遵循统一的commit规范至关重要。

值得一提的是,这个依赖是需要全局安装的,这意味着你可以在任何项目中使用它辅助编写commit message,但也同时意味着你不能强制其他开发者在你的项目中使用这一工具。

不过你可以让你的项目成为 commitizen 友好项目 —— 可以设计自己的commit message提交约定,并引导其它开发者按照项目约定提交commit

如何安装commitizen?

1. 全局安装 commitizen

首先,先在您的设备中全局安装 commitizen ,并试图在你的项目文档中邀请其它开发者全局安装它。

npm install -g commitizen

完成这一步,其实您已经完成它的安装操作了,可以直接在各种项目使用它编写Angular JS规范的 commit message。(使用方式会在下面介绍)

但接下来的额外操作可以让你的项目成为 commitizen 友好项目,这样当其它开发者在你的项目中使用这一工具时,可以按照你项目设定的规则弹出引导提示,快速编写符合你项目要求的commit message

2. 将项目变为 commitizen 友好项目

接下来,你只需要一个指令就可以让你的项目变为 commitizen 友好项目,在项目根目录执行它:

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

不过不要着急,这条指令有可以客制化的地方,容我介绍一下!首先我们理解一下这个指令干了啥:

  1. 安装了名为 cz-conventional-changelog 的 npm 模块 —— 它是官方推荐的一个开箱即用的预制commit规定(即当前主流的Angular JS规范),官方把这种模块称作适配器(adapter)

  2. 将这个npm模块添加到 package.jsondevDependencies 中;

  3. 将配置项设置到 package.json 文件中,这是为了告诉其他使用 commitizen 的开发者尝试使用它commit时,我们实际上希望他们使用哪个适配器。具体执行的配置如下:

    // package.json
    {
        //... ,
        ```
        "config": {
            "commitizen": {
              "path": "./node_modules/cz-conventional-changelog"
            }
        }
    }
    

如果你是新手,选它就够啦!当然你也可以选择用它的简体中文版本(cz-conventional-changelog-zh-cn),把指令替换一下就好。另外官方也推荐了几款其他的适配器

如果你要设计自己的适配器,只需要fork这些出色的适配器项目,修改特定的配置项即可。官方在文档中给予了以下引导:

To create an adapter, just fork one of these great adapters and modify it to suit your needs. We pass you an instance of Inquirer.js but you can capture input using whatever means necessary. Just call the commit callback with a string and we'll be happy. Publish it to npm, and you'll be all set!

3. 向其它开发者炫耀你的项目支持了commitizen 😎

现在,你可以召集更多开发者与你一同使用这个工具,保持 commit 记录的工整性!

在项目的 README 文档中添加这个徽章吧:

新手不懂commit规范?这3个工具让你和同事无痛上道!在团队协作开发软件项目时,遵循统一的commit规范至关重要。

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

如何使用commitizen?

使用它非常简单,只需要将git commit指令替换成git cz即可。接下来,commitizen会引导你完成一个绝佳的commit message

commitlint:确保commit消息符合规范

虽然 commitizen 可以帮助你在编写commit message时遵循一定的格式,但并不是所有人都会使用这个工具。光靠它来维持项目commit的工整性是不可靠的。

这时候,commitlint 就派上了用场。它是一个用来验证 commit message 是否符合特定格式要求的工具。它可以集成到你的开发流程中,在commit message不符合规定时阻止提交

如何安装commitlint?

1. 安装 commitlint 依赖

npm install --save-dev @commitlint/cli @commitlint/config-conventional

2. 添加配置文件

在项目根目录文件夹下创建一个commitlint.config.js文件来定义你的commit规范。具体规则配置可以参考文档中的介绍。下面是一个定义示例:

// commitlint.config.js
module.exports = { 
  extends: ['@commitlint/config-conventional'], 
  rules: { 
    'type-enum': [ 
      2, 
      'always', 
      ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chore', 'revert'] 
    ] 
  } 
};

一般而言,如果你想让commit message遵循基本的 Angular JS规范,只需要继承@commitlint/config-conventional配置即可,无需添加别的配置项,即:

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

3. 更多配置项

实际上,commitlint 的配置项不仅限于commit message的规则设置,它还有其它功能。可以访问Configuration | commitlint 学习。

其中值得一提的是 commitlint 也支持如同 commitizen 类似的命令行提示工具,可以访问 Prompt | commitlint 获取配置教程。这一款命令行提示工具优点就是不需要开发者全局安装任何插件,只需要使用特定的commit指令,在项目中就可以使用。

但是我个人认为,毕竟不是所有项目都会去配置 commitlint,但命令行提示是相当好用的。全局安装 commitizen 可以让我在任何项目中使用,更符合使用场景。另外 commitlint 的命令行提示没有官方预配置,每次都还要复制去写,不如 commitizen 方便。

如何使用commitlint?

然后,在每次提交时运行 commitlint 来验证 commit message

npx --no-install commitlint --edit .git/COMMIT_EDITMSG

但是一般都不会单独拿来使用,都会将其与 husky 结合,实现自动校验。所以请继续看下去吧!

husky:尽职尽责的 git 保安

husky是一个 git hooks 管理工具,它可以简化你在 git仓库 中设置 hook 的过程。它就像是个尽职尽责的保安,可以在 git 的各种操作环节添加自定义指令操作。(完整的 git hooks 说明可以查阅 Git - githooks Documentation (git-scm.com) 亦或是在网上查阅其它开发者分享的翻译介绍版本)

有了它,你就可以将 commitlint 检查 commit message 的工作委派给它,集成到你的 commit 提交流程中,从而在每次提交时自动验证 commit message 是否符合规范。

如何安装并配置 husky?

1. 安装 husky 依赖

npm install -D husky

2. 执行 npx husky init 初始化 husky

执行完后,就可以发现项目根目录出现了个 .husky 文件夹,这里面放置的是其相关配置文件。因此请不要将它添加到 .gitignore,也不要删除。

新手不懂commit规范?这3个工具让你和同事无痛上道!在团队协作开发软件项目时,遵循统一的commit规范至关重要。

这里来解读一下这个配置文件的路径:

  • .husky/_ 目录下的都是官方的配置示例,也就是它支持配置这些文件名所对应的git hooks。如果你需要配置响应的钩子,就需要再.husky文件夹下创建对应文件名的文件即可。这些示例文件官方已自动配置了 .gitignore,无需担忧。
  • .husky 文件夹下的 pre-commit 就是官方的一个实例,它的含义是 commit 提交前执行命令。你可以发现文件里官方预留了一条指令npm test,每次你提交一次commit,它都会在此之前运行这个指令。

3. 配置 .husky 钩子;

阅读了上面的介绍,我们就可以自己把 commitlint 给添加进去啦!要注意,commit message是在提交commit时才会保存的,因此如果把commitlint的检查指令添加到.husky/pre-commit,那是无法读取到commit message文件,会报错的!

因此我们要在 .husky 文件夹下创建 commit-msg 文件,并在里面添加 npx --no-install commitlint --edit 这条指令然后保存即可。

新手不懂commit规范?这3个工具让你和同事无痛上道!在团队协作开发软件项目时,遵循统一的commit规范至关重要。

🎉🎉🎉 到这里,你就完成全部 commit 规范三件套 的安装啦! 🎉🎉🎉

如果你不使用 ESlint 等其它检查工具,可以将.husky/pre-commit 文件删除。如果有的话,你甚至可以在里面添加 npm run lint 执行一下 ESlint 代码检查,确保一下代码的规范性。总之玩法很多,可以自己探索哦!

转载自:https://juejin.cn/post/7414424159520194586
评论
请登录