介绍

在团队开发中，提交具有语法错误或格式错误的代码等简单错误很常见。这些问题可能会破坏 CI 构建或在代码审查期间导致混乱的格式冲突。

您可以自动执行这些检查，而不是依赖开发人员的警惕性来执行准则。

通过将 Git Hooks 与 Husky 相结合，您可以在任何提交或推送完成之前自动触发 linter (ESLint)、格式化程序 (Prettier) 和单元测试 (Jest)。本指南将引导您完成此工作流程的设置。

1. 什么是 Git Hooks 和 Husky？

Git Hook 是每当 Git 存储库中发生关键事件（例如 commit、push 或 merge）时自动运行的脚本。

默认情况下，这些脚本位于 .git/hooks/ 目录中。但是，由于 .git/ 文件夹被排除在版本控制 (.gitignore) 之外，因此在团队中共享这些挂钩历来都很困难。

Husky 通过将 Git Hooks 暴露到项目级文件夹（例如 .husky/）来解决这个问题。这允许团队成员检查 Git 中的钩子并通过 npm 包自动同步配置。

2. 哈士奇基本设置步骤

在项目存储库中运行以下命令：

第 1 步：安装并初始化

使用 husky-init CLI 工具安装 Husky 并配置初始目录：

# Initialize Husky configurations
npx husky-init && npm install

该命令做了三处修改：

1. 将 husky 添加到 package.json 中的 devDependencies。
2. 将 "prepare": "husky" 脚本添加到 package.json （在 npm install 期间自动在其他计算机上安装挂钩）。
3. 在项目根目录生成 .husky/ 目录以及默认的 pre-commit 挂钩文件。

第 2 步：配置预提交挂钩

打开生成的 .husky/pre-commit 脚本。默认情况下，它运行 npm test。更新此命令以运行 linter：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Run linter and abort commit if it returns an error code
npm run lint

现在，每当您运行 git commit 时，Husky 都会运行 npm run lint。如果 ESLint 检测到错误，提交过程将中止，从而将损坏的代码排除在存储库之外。

3. 使用 lint-staged 优化速度

默认情况下，在每次提交期间在整个项目上运行 linter 可能会随着代码库的增长而导致进程变慢。

要优化性能，请使用 lint-staged。 该工具隔离检查，以便它们仅在当前暂存在 Git 中的文件（您修改的文件）上运行。

安装和设置

1. 安装包：

   npm install --save-dev lint-staged
   

2. 将配置添加到 package.json: 定义要定位的文件以及要运行的命令：

   {
     "lint-staged": {
       "*.{js,ts,jsx,tsx}": [
         "eslint --fix",
         "prettier --write"
       ],
       "*.css": [
         "stylelint --fix",
         "prettier --write"
       ]
     }
   }
   

3. 更新预提交挂钩： 修改.husky/pre-commit以触发lint-staged：

   #!/usr/bin/env sh
   . "$(dirname -- "$0")/_/husky.sh"
   
   npx lint-staged
   

使用此配置，只有您修改的文件才会被格式化和检查。这可以保持快速的预提交检查，同时确保提交的代码保持干净。

结论

将 Husky 与 lint-staged 相结合可以自动执行代码质量检查，从而节省代码审查时间并防止构建损坏。

1. 使用 Husky 在项目级别管理 Git Hook。
2. 通过包生命周期脚本 (prepare) 自动配置挂钩安装。
3. 通过仅使用 lint-staged 目标扫描暂存文件来保持快速检查。

在项目的早期引入 Husky 以保持代码库的一致性和整洁。