npm 包 @hintwall/commitlint-config 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 @hintwall/commitlint-config 使用教程

在团队协作中，专业的 commit message 是非常重要的。它在提交代码时帮助我们更准确地描述改动，并且在后续查看历史记录时也能够更清晰地了解代码演化的历程。此时，使用 commitlint 工具去规范化项目 commit message 是一个非常不错的选择。

在实际应用中，可能存在多个团队分别使用不同的命名规则，因此每个团队都需要针对其自身业务需求编写 commitlint 规则。这时，就是使用 @hintwall/commitlint-config 这个 npm 包的时候了。

配置前置条件

首先，需要在项目中安装 @commitlint/cli 这个依赖：

npm install --save-dev @commitlint/cli

如果当前项目使用 Git，则可以安装 husky 依赖以在 Git hook 中应用 commitlint 规则：

npm install --save-dev husky

安装 @hintwall/commitlint-config

包含了团队内部 commit message 的命名规则，这样就使得每次提交获得一种有用的结构形式。@hintwall/commitlint-config 就是解决此需求的包之一，它提供了一个常用的规则模板。

安装 @hintwall/commitlint-config 包。

npm install --save-dev @hintwall/commitlint-config

在 commitlint.config.js 中引入此包：

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

最终的 commitlint.config.js 代码看起来类似这样：

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

如何使用

开始使用 commitlint：

在终端或命令行工具上输入 git commit 进行提交。如果你打算只是测试执行 commitlint，请输入：

echo "test: Hello World" | npx commitlint

如果你使用了 husky 包，在 eslintrc.js 文件中加入以下规则：

{
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}

此时，每次提交的时候都会自动检查 commit message 是否符合规范，如果不符合规范会停止提交，并且输出相应的错误信息。

各种提示

@hintwall/commitlint-config 包提供了一些常见规则判断。可以在 commitlint-config 中阅读更多的信息。

多行 commit message：长度不超过 100 个字符，每行同样不超过 100 个字符。

在使用时需要提供的参数（type）：

feat：新增特性
fix：修复 bug
refactor：代码重构
perf：性能优化
docs：文档修改
build：构建流程修改
test：测试修复
feat(test)：新增测试
ci：升级维护 CI 流程
chore：修改 src 和 config 文件

活学活用

创建一个新的 Git 仓库，并安装所需的依赖。

mkdir commitlint_example && cd commitlint_example
npm init -y
npm install -D @commitlint/cli husky @hintwall/commitlint-config

-- -------------------- ---- -------
--- ----
--- ---
-   --- --------------
-   --- -------------------
-   --- --------
--- ----------
--- -----------------
--- ------------
--- ---------

在 package.json 中加入 husky 利用。注意您只能通过交互模式打印到终端：

{
  //...
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}

在 husky 执行之前，需要在我们项目的根目录创建 .lintstagedrc 文件。

-- -------------------- ---- -------
-
  -------------- -
    ------- -------
    ---- ----
  --
  ------------------- -
    ------- -------
    ---- ----
  -
-

其作用是会在每次 commit 前进行 eslint 校验，根据 lint-staged 的配置，eslint 将会尝试修正指定的文件，然后添加到 git 的暂存区。

在项目目录中创建 commitlint.config.js 文件，并指定何种规则由 commitlint 管理：

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

在提交之前，修改 src/SomeService.js 文件：

-- -------------------- ---- -------
----- ----------- -
  -------------- -- -
    ------ - --
    ------ - --
  -
  ------ ------ -- -
    ------ - - --
  -
  ----------- -- -
    ------ - - --
  -
-
-------------- - ------------

在提交之前，修改根目录下的 README.md 和 package.json 文件以添加必要的一些信息。最后，我们只需要在终端中开启提交 commit 过程：

npm run-script commit

这将打开一个文本编辑器，您可以在此编辑器中输入您的 commit message。

总结

@hintwall/commitlint-config 是一个非常实用的 npm 包，它可以帮助您编写规范的 commit log，并且可以根据您的 commit message 自定义针对性的规则，真正实现了团队协作中协调、统一的目标。

使用 commitlint 工具为项目或团队内容添加意义，不仅可以确保因多人协作而产生的代码杂乱而担忧，也可以帮助更好地阐述团队内部成员在更改优化原则上的思路。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/hintwall-commitlint-config