2024-12-17

Frontend

Husky使用教程

一、前言

Husky 是一个流行的 Git 钩子工具，用于在不同的 Git 操作（如提交和推送）前自动运行脚本。比如代码格式化、静态检查等。这有助于保持代码库的质量和一致性。本教程将详细介绍 Husky 的原理、使用方式、配置方法以及如何在开发中集成 Husky。

二、Husky 原理

Husky 通过在 .husky/ 目录下创建钩子脚本来工作。当执行 Git 操作时（如 git commit）时，Git 会触发这些钩子脚本。Husky 使得管理这些钩子变得简单，你可以轻松地为项目添加或更新 Git 钩子。

三、安装 Husky

首先，确保项目已经初始化为 Git 仓库。然后，使用 npm 或 yarn 安装 Husky：

npm install husky --save-dev
# 或者
yarn add husky --dev

四、配置 Husky

Husky 8+ 的配置方式相比之前的版本有所简化。以下是配置 Husky 的步骤：

4.1、启用 Git 钩子

在项目的 package.json 文件中添加 prepare 脚本，以自动启用 Husky：

{
  "scripts": {
    "prepare": "husky install"
  }
}

运行 npm install 或 yarn install 后，Husky 会自动设置 Git 钩子。

4.2、添加钩子脚本

使用 Husky 提供的 add 命令来添加钩子脚本。例如，要在每次提交前运行 npm test，可以执行以下命令：

npx husky add .husky/pre-commit "npm test"

这将在 .husky/pre-commit 文件中添加 npm test 命令。
最新版本的husky 可以使用 npx init 自动生成上面的内容并且添加一个默认的钩子脚本，即同时完成上面的部分。

4.3、设置脚本可执行权限

确保钩子脚本具有执行权限：

chmod +x .husky/pre-commit

五、集成开发工具

Husky 可以与多种开发工具和框架集成，如 ESLint、Prettier、Commitlint 等，以实现代码风格检查、格式化和提交信息验证。

5.1、集成 ESLint 和 Prettier

1、安装 ESLint 和 Prettier：

npm install eslint prettier --save-dev

2、在 .husky/pre-commit 钩子中添加 ESLint 和 Prettier 检查：

npx husky add .husky/pre-commit "npx eslint . && npx prettier --check ."

确保钩子脚本具有执行权限：

chmod +x .husky/pre-commit

5.2、集成 Commitlint

1、安装 Commitlint 和相关配置：

npm install @commitlint/{config-conventional,cli} --save-dev

2、创建 commitlint.config.js 配置文件：

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

3、在 .husky/commit-msg 钩子中添加 Commitlint 检查：

npx husky add .husky/commit-msg "npx commitlint --edit $1"

六、案例

假设项目需要在每次提交前运行 ESLint 检查和单元测试，可以这样配置 Husky：
1、安装 Husky 并启用 Git 钩子：

npm install husky --save-dev
npx husky install
npm set-script prepare "husky install"

2、添加 pre-commit 钩子：

npx husky add .husky/pre-commit "npm run lint && npm test"
chmod +x .husky/pre-commit

这样，每次 git commit 前都会先运行 npm run lint 和 npm test 命令。

七、最佳实践

保持钩子脚本简洁：避免在钩子脚本中编写复杂的逻辑。
明确钩子的使用场景：根据项目需求合理选择需要使用的 Git 钩子。
文档化：在项目文档中说明 Husky 的配置和使用，便于团队成员理解和遵守。
测试钩子脚本：在提交前手动测试钩子脚本，确保它们按预期工作。

暂无