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

搞懂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-commitcommit-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

目标

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

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

步骤 2:初始化 Git 仓库

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

bash 复制代码
git init

步骤 3:安装 Husky 和 Commitizen

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

  1. 安装 Husky:

    bash 复制代码
    npm install husky --save-dev
  2. 安装 Commitizen:

    bash 复制代码
    npm install commitizen --save-dev
  3. 安装 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,在提交之前运行一些任务,确保代码质量。

  1. 启用 Husky hooks:

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

    首先添加 pre-commit 钩子:

    bash 复制代码
    npx husky add .husky/pre-commit "npm test"

    这将在项目根目录下的 .husky/pre-commit 文件中添加钩子,每次提交前会自动运行 npm test

  3. 设置 commit-msg 钩子,确保提交消息的格式符合 Commitizen 的规范:

    bash 复制代码
    npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

步骤 5:配置 Commitlint

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

  1. 安装 commitlint 和相应的配置:

    bash 复制代码
    npm install @commitlint/config-conventional @commitlint/cli --save-dev
  2. 创建一个 commitlint.config.js 文件,添加以下内容:

    在项目根目录下创建 commitlint.config.js 文件:

    bash 复制代码
    echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

    这确保提交信息会符合 Conventional Commits 规范。

步骤 6:体验 Husky + Commitizen 流程

现在,我们已经配置了 Husky 和 Commitizen,可以开始体验整个流程了。

  1. 修改代码 : 打开 src/components/HelloWorld.vue 文件,修改一处代码,做一些小的更改。

  2. 添加更改到 Git 暂存区

    bash 复制代码
    git add .
  3. 使用 Commitizen 提交更改: 使用 Commitizen 来生成规范化的提交消息:

    bash 复制代码
    npx git-cz

    这将会提示你一些问题来帮助生成提交消息:

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

    你可以选择 fix 或其他类型,然后根据提示继续输入,最终会生成一条符合规范的提交信息。

  4. 体验 Husky 的 pre-commit 钩子 : 在你提交时,Husky 会自动运行 npm test(如果项目有测试用例),确保代码没有问题。如果测试未通过,Husky 会阻止提交。

最终效果

  • Husky 会在你每次提交之前自动运行测试,确保提交的代码是稳定的。
  • Commitizen 会引导你生成符合规范的提交信息,确保每个提交信息都格式化良好,便于版本管理。

完整的 package.json 配置

最终的 package.json 配置文件将包含以下 Husky 和 Commitizen 相关内容:

json 复制代码
{
  "scripts": {
    "test": "echo \"No tests yet!\"",
    "prepare": "husky install"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.0.0",
    "@commitlint/config-conventional": "^17.0.0",
    "commitizen": "^4.2.3",
    "cz-conventional-changelog": "^3.3.0",
    "husky": "^8.0.0"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

总结

通过这套流程,Husky 确保每次提交前的代码质量检查,而 Commitizen 确保提交信息符合规范。整个设置过程非常适合团队协作和项目的长期维护。

你可以按照这套步骤在本地实践 Husky + Commitizen 的结合,体验现代开发流程中的自动化规范化工作。

相关推荐
凌辰揽月2 分钟前
AJAX 学习
java·前端·javascript·学习·ajax·okhttp
然我2 小时前
防抖与节流:如何让频繁触发的函数 “慢下来”?
前端·javascript·html
烛阴2 小时前
非空断言完全指南:解锁TypeScript/JavaScript的安全导航黑科技
前端·javascript
爱掉发的小李3 小时前
前端开发中的输出问题
开发语言·前端·javascript
Dolphin_海豚4 小时前
一文理清 node.js 模块查找策略
javascript·后端·前端工程化
晓13136 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
海底火旺7 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
前端付豪7 小时前
15、前端可配置化系统设计:从硬编码到可视化配置
前端·javascript·架构
aPurpleBerry7 小时前
hot100 hot75 栈、队列题目思路
javascript·算法
颜漠笑年7 小时前
可迭代对象≠数组,一起来揭开for...of背后隐藏的秘密吧
前端·javascript