用费曼学习法搞懂:最佳实践之

搞懂Husky + Commitizen

Husky + Commitizen 结合 Vue 项目的解释（费曼学习法）

1. 选择一个你想理解的概念

我们要理解的是 Vue 项目中的 Husky 和 Commitizen 是干什么的。

2. 用简单的语言解释

假设我们在给一个刚学代码的小朋友解释：

Husky 就像一个守门员。每当你想把代码提交到 Git 仓库时，它会检查你的代码是否符合要求。如果不符合，它会阻止你提交。它会帮你运行一些自动检查，比如代码格式、单元测试，确保代码质量。
Commitizen 是一个工具，可以帮助你写提交信息。提交信息就是你在 Git 提交时要写的说明，比如"修复了一个按钮的样式问题"。Commitizen 会问你一些问题，比如"这次修改是修 bug 还是加新功能？"然后它会帮你生成一条格式正确的提交说明。这样大家在查看历史记录时，都能快速知道每次提交做了什么。

3. 发现知识上的空白

Husky 是如何在 Git 提交时运行的？为什么 Commitizen 的提交信息格式如此重要？

Husky 是通过 Git hooks 实现的，它在 Git 提交前后（如 pre-commit 或 commit-msg）自动运行指定的脚本。
Commitizen 的提交格式遵循某种规范（比如 Angular 的提交规范或 Conventional Commits），这样可以方便自动生成变更日志（changelog）或者版本号管理。

4. 简化解释

Husky 是代码提交时的守卫，它会在你提交代码之前检查代码是否合规，确保代码符合项目的标准。
Commitizen 是提交信息的助手，帮助你以统一的格式编写提交说明，便于后续的版本管理和日志生成。

举例说明 Husky + Commitizen 的工作流程

假设你正在一个 Vue 项目中工作，你刚刚修复了一个 bug，现在你要将修复后的代码提交到 Git 仓库。项目中已经设置了 Husky 和 Commitizen 来帮助管理提交流程。

1. 修复 bug 后，你准备提交代码：

scss 复制代码

git add .(针对工作区 新增和已修改文件添加暂存区)
git commit(暂存区的更改添加到本地仓库)

2. Husky 出场

在你提交代码之前，Husky 会运行项目中的 Git hooks 。假设我们有一个 pre-commit hook，它会检查你提交的代码格式是否正确，并且运行自动化测试。如果代码格式不符合要求，Husky 会提示你修正它，并阻止提交。例如：

less 复制代码

husky > pre-commit (lint-staged)
Checking the code style...
Error: Code style issues found in the following files...

你需要修正这些问题，才能继续提交代码。

3. Commitizen 询问你提交的内容

通过 Commitizen，你不会直接写提交信息。相反，你运行下面的命令：

git cz

Commitizen 会弹出一系列问题，帮助你生成一条规范化的提交信息。例如，它可能会问：

yaml 复制代码

Select the type of change you are committing:
(Use arrow keys)
❯ fix:      A bug fix
  feat:     A new feature
  docs:     Documentation only changes
  style:    Changes that do not affect the meaning of the code (white-space, formatting, etc)

你选择 fix，然后它会继续问你这个修改的具体内容，最终生成如下的提交信息：

scss 复制代码

fix(button): correct button padding issue

4. 提交完成

通过 Husky 确保代码质量，Commitizen 帮助生成了规范化的提交信息，现在你的代码和提交记录都符合项目的要求。

总结

Husky：负责在 Git 提交时帮助你检查代码，确保代码质量，避免不合规的代码被提交。
Commitizen：规范化你的提交信息，确保提交说明格式统一，方便版本管理和日志生成。

最佳实践Husky + Commitizen

目标

创建一个新的 Vue 项目。
安装并配置 Husky。
安装并配置 Commitizen。
体验使用 Husky 和 Commitizen 规范化 Git 提交的流程。

步骤 1：创建一个新的 Vue 项目

步骤 2：初始化 Git 仓库

如果你的项目还没有初始化 Git 仓库，请执行以下命令：

bash 复制代码

git init

步骤 3：安装 Husky 和 Commitizen

我们将 Husky 和 Commitizen 作为开发依赖安装。

安装 Husky：
bash 复制代码
```
npm install husky --save-dev
```
安装 Commitizen：
bash 复制代码
```
npm install commitizen --save-dev
```
安装 Commitizen 的适配器，使用 Conventional Commits 规范：
bash 复制代码
```
npx commitizen init cz-conventional-changelog --save-dev --save-exact
```

执行这些命令后，package.json 文件会更新，包含以下 Commitizen 配置：

json 复制代码

"config": {
  "commitizen": {
    "path": "./node_modules/cz-conventional-changelog"
  }
}

步骤 4：配置 Husky

Husky 使用 Git hooks 来自动化一些操作。我们将使用 Husky 的 pre-commit hook，在提交之前运行一些任务，确保代码质量。

启用 Husky hooks：
bash 复制代码
```
npx husky install
```
添加一个 Git hook，比如让 Husky 在每次提交前运行 npm test（可以换成项目中的其他测试命令）。我们将在项目根目录下创建 husky 钩子。

首先添加 pre-commit 钩子：
bash 复制代码
```
npx husky add .husky/pre-commit "npm test"
```
这将在项目根目录下的 .husky/pre-commit 文件中添加钩子，每次提交前会自动运行 npm test。
设置 commit-msg 钩子，确保提交消息的格式符合 Commitizen 的规范：
bash 复制代码
```
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
```

步骤 5：配置 Commitlint

为了确保提交消息符合约定，我们需要安装 commitlint 并进行配置。

安装 commitlint 和相应的配置：