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

搞懂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 的结合,体验现代开发流程中的自动化规范化工作。

相关推荐
前端小趴菜052 小时前
React-React.memo-props比较机制
前端·javascript·react.js
RadiumAg5 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo5 小时前
ES6笔记2
开发语言·前端·javascript
yanlele5 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
烛阴6 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
初遇你时动了情7 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz7 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
ohMyGod_1239 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
@大迁世界9 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
一瓣橙子9 小时前
7.7日 实验03-Spark批处理开发(2)
开发语言·javascript·ajax