Logo

菜单

发布于 2026-01-06 0 阅读
0

使用 commitlint 和 commitizen，让项目中的每个人都能写出漂亮的提交信息🚀

使用 commitlint 和 commitizen，让项目中的每个人都能写出漂亮的提交信息🚀

在项目开发过程中，很多人没有时间编写有意义的提交信息。对我来说，我需要与许多其他开发人员合作，这包括审查他们的提交、审查合并请求、创建和修复代码等等。而且所有这些工作都要同时进行，涉及多个项目。通常，他们的提交信息并没有描述他们在当前提交中做了哪些更改，我不得不深入研究他们的代码才能理解，这有时简直是一场噩梦。

即使他们写出了不错的提交信息，很多人仍然有自己独特的提交信息编写风格或惯例。为了解决这个问题，我开始使用某种commitlint工具commitizen，以便我的团队能够遵循统一的提交规范。

抢先看最终效果👇
承诺人

步骤 1：设置husky和commitlint

首先，你需要husky，它用于编写 Git 钩子。查看更多

安装husky到您的项目中。

npx husky-init && npm install
Enter fullscreen mode Exit fullscreen mode

或者，如果你像我一样喜欢毛线的话。

npx husky-init && yarn
Enter fullscreen mode Exit fullscreen mode

接下来，我们将安装commitlint和commitlint-config-gitmoji

yarn add -D @commitlint/cli commitlint-config-gitmoji
Enter fullscreen mode Exit fullscreen mode

或者，

npm install --save-dev @commitlint/cli commitlint-config-gitmoji
Enter fullscreen mode Exit fullscreen mode

此@commitlint/cli命令将用于检查我们的提交信息是否符合我们为项目配置的约定，而此命令commitlint-config-gitmoji是我们将要使用的提交约定预设。您还可以使用其他约定。

遵循commitlint-config-gitmoji以下约定。

你需要提供一个表情符号（或Git Moji），然后是提交类型，再指定一个作用域（非强制性），最后是提交主题，也就是你的实际提交信息。你也可以根据需要添加正文和页脚。

:gitmoji: type(scope?): subject
body?
footer?
Enter fullscreen mode Exit fullscreen mode

例子，

✨ 功能（API）：添加用户身份验证中间件

现在，我们需要为项目定义 commitlint 配置。创建一个名为 `commitlint.config` 的文件commitlint.config.js，并在其中定义以下配置。

module.exports = {
  extends: ['gitmoji'],
  rules: {
    'header-max-length': [0, 'always', 100],
  },
};
Enter fullscreen mode Exit fullscreen mode

您可以像使用 ESLint 一样，根据自己的喜好自定义提交信息的规则。详情请见此处。

步骤 2：添加commitlint检查作为 Git 钩子

接下来，我们需要添加commitlint一个 Git 钩子，以便husky在每次提交之前检查提交信息。为此，请运行以下命令。

yarn husky add .husky/commit-msg 'yarn commitlint --edit "$1"'
Enter fullscreen mode Exit fullscreen mode

或者

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
Enter fullscreen mode Exit fullscreen mode

commit-msg这将在您的项目文件夹内创建一个名为的文件.husky。

注意：husky默认情况下会创建一个pre-commit文件并运行npm test。如果您的文件中没有定义测试脚本，package.json则会抛出错误。您可以npm test从pre-commit文件中删除该行或添加有效的测试脚本。

现在试试提交吧😏

image.png

现在我的队友们必须写出正确的提交信息才能提交了😈。

commitlint如果提交信息不符合提供的结构，则会阻止我们执行提交操作commitlint-config-gitmoji。

步骤 3：添加commitizen用于编写提交消息的命令行界面

最后，我们将创建一个 CLI 辅助工具来生成提交信息commitizen。此外，我们还将使用cz-customizable来定制 CLI 辅助工具。

yarn add -D commitizen cz-customizable
Enter fullscreen mode Exit fullscreen mode

或者

npm install --save-dev commitizen cz-customizable
Enter fullscreen mode Exit fullscreen mode

package.json接下来，在你的配置中添加如下所示的 commitizen 配置。

{
  ....
  "devDependencies": {
    ...,
  },
  "config": {
    "commitizen": {
      "path": "cz-customizable"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

现在，在根文件夹中创建一个名为 `<filename>` 的文件，.cz-config.js用于自定义 CLI 助手的选项，并将以下配置粘贴到该文件中。

module.exports = {
  types: [
    { value: ':sparkles: feat', name: '✨ feat:\tAdding a new feature' },
    { value: ':bug: fix', name: '🐛 fix:\tFixing a bug' },
    { value: ':memo: docs', name: '📝 docs:\tAdd or update documentation' },
    {
      value: ':lipstick: style',
      name: '💄 style:\tAdd or update styles, ui or ux',
    },
    {
      value: ':recycle: refactor',
      name: '♻️  refactor:\tCode change that neither fixes a bug nor adds a feature',
    },
    {
      value: ':zap: perf',
      name: '⚡️ perf:\tCode change that improves performance',
    },
    {
      value: ':white_check_mark: test',
      name: '✅ test:\tAdding tests cases',
    },
    {
      value: ':truck: chore',
      name: '🚚 chore:\tChanges to the build process or auxiliary tools\n\t\tand libraries such as documentation generation',
    },
    { value: ':rewind: revert', name: '⏪️ revert:\tRevert to a commit' },
    { value: ':construction: wip', name: '🚧 wip:\tWork in progress' },
    {
      value: ':construction_worker: build',
      name: '👷 build:\tAdd or update regards to build process',
    },
    {
      value: ':green_heart: ci',
      name: '💚 ci:\tAdd or update regards to build process',
    },
  ],

  scopes: [
    { name: 'ui' },
    { name: 'android' },
    { name: 'ios' },
    { name: 'home' },
    { name: 'planner' },
    { name: 'settings' },
  ],

  scopeOverrides: {
    fix: [{ name: 'merge' }, { name: 'style' }, { name: 'test' }, { name: 'hotfix' }],
  },

  allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix'],
  // skip any questions you want
  skipQuestions: ['body'],
  subjectLimit: 100,
};
Enter fullscreen mode Exit fullscreen mode

另外，添加一个 npm 脚本来运行命令行commitizen界面。

{
  "scripts": {
    ...,
    "cm": "cz"
  },
  "dependencies": {
    ...
  }
}
Enter fullscreen mode Exit fullscreen mode

您可以根据需要修改配置。请参见此处。

现在运行脚本，看看commitizen实际效果。

yarn cm
Enter fullscreen mode Exit fullscreen mode

或者

npm run cm
Enter fullscreen mode Exit fullscreen mode

瞧！现在你和你的团队中的每个人都可以轻松编写美观的规范提交信息了。

image.png

文章来源：https://dev.to/sohandutta/make-everyone-in-your-project-write-beautiful-commit-messages-using-commitlint-and-commitizen-1amn
HTML5 Canvas - 第二...
解决常见的 DevOps 难题