本文介绍如何使用 @types/conventional-commits-detector 包，对代码进行规范化提交检测，以帮助前端开发者更加规范高效地管理代码提交记录。
什么是规范化提交？
规范化提交是指在提交代码之前，我们需要对代码变更进行有效的描述。这包括了使用正确的操作关键字（fix, feat, refactor 等）和准确的变更描述，以便帮助其他开发者快速了解代码变更的性质和目的。
规范化提交的好处在于：
- 可以提高代码可读性，便于其他开发者快速了解此次代码变更的目的和重点。
- 提高代码管理效率，方便团队协作，避免代码库混乱和不可维护的情况。
如何使用 @types/conventional-commits-detector 包？
@types/conventional-commits-detector 包是基于规范化提交约定的代码提交检测工具。它可以对代码提交记录的操作关键字和变更描述进行检测，确保代码的变更记录符合规范化提交约定。
以下是使用 @types/conventional-commits-detector 包实现规范化提交检测的简单步骤：
安装依赖
由于我们要使用 @types/conventional-commits-detector 包，因此需要安装该包到我们的项目中。安装命令如下：
npm install @types/conventional-commits-detector --save-dev
添加检测脚本
添加一个检测脚本，在代码提交之前进行提交记录的检查。在 package.json 文件中添加以下代码：
"scripts": {
"precommit": "conventional-commits-detector --path src --warn-also",
}代码说明：
precommit指在代码提交之前执行该检测；也可以使用prepush实现在代码 push 之前进行检测。conventional-commits-detector是 @types/conventional-commits-detector 包提供的检测命令。--path src指定 src 文件夹为检测路径。--warn-also表示仅在检测到问题时进行警告，而不会阻止代码提交。
添加约定
在检测之前，我们需要为代码提交定义一些约定。这可以通过在项目根目录下添加 commitlint 配置文件来实现。例如，如果你使用了 commitizen 插件，则可以在项目根目录下添加配置文件 .czrc，内容如下：
{
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}除此之外，commitlint 配置文件也可以通过 npm 包 @commitlint/config-conventional 来提供预设的配置方案。同样是在项目根目录下创建一个配置文件 .commitlintrc.js，内容如下：
module.exports = {
extends: ['@commitlint/config-conventional']
};以上配置方案中，@commitlint/config-conventional 配置了常规的规范化提交约定。当然，也可以根据项目需求进行定制化配置。
演示例子
下面，我们通过一个演示例子来了解 @types/conventional-commits-detector 包的使用。
假设我们编写了一个 Vue 组件，并添加到了项目中。现在，我们要对该组件进行更新，并对该更新进行规范化提交。
首先，在我们的代码变更完成之后，我们运行以下命令：
npm run commit
这时会出现一个交互界面，要求我们输入变更信息。根据 commitizen 插件的约定，我们首先选择提交类型，然后输入变更描述。例如，我们输入：
feat: 为组件添加新的属性和方法
这时，我们的代码已经成功提交，但我们需要检查一下提交记录是否符合规范化提交约定。
我们现在尝试进行一次代码提交测试（不必真实提交代码），例如：
git add . git commit -m "Testing non-compliant commit"
这时，我们将收到以下错误信息：
====================== conventional commits detector found 1 non-compliant commits [1/1] ERROR(Verification failed): invalid commit message, type must be one of [feat, fix, revert, docs, style, refactor, test, chore, build, ci, perf]
这说明我们的提交记录没有符合规范化提交约定，我们需要对其进行修改。修改后，再次进行提交即可。
总结
本文介绍了前端开发者使用 @types/conventional-commits-detector 包进行规范化提交检测的详细步骤。规范化提交可以提高代码管理效率，方便团队协作，减少代码维护成本。使用 @types/conventional-commits-detector 包可以帮助我们快速检测代码提交记录是否符合规范化提交约定，帮助我们更好地管理代码提交记录。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f7078efa9b7065299ccbaff