初学者教你轻松入门Husky

概述

Husky是一个用于Node.js项目的Git钩子管理器，它使自动执行代码提交、推送等操作之前的特定任务变得简单。通过Husky，开发者可以轻松添加和管理多种类型的Git钩子，执行诸如代码格式化、代码风格检查、构建测试等任务，从而保证代码的质量和一致性。安装Husky需要先初始化Node.js项目并安装Husky本身，然后配置相应的钩子脚本。

Husky简介与安装

Husky 是一个用于 Node.js 项目的 Git 钩子管理器，它使 Git 钩子的使用变得简单且可配置。通过 Husky，开发者可以在代码提交（commit）、推送（push）等操作之前自动执行特定的任务，从而保证代码的质量和一致性。

Husky是什么

Git 钩子是一些特殊的脚本，它们可以在特定的 Git 事件触发之前或之后运行。Git 提供了多种钩子，如 pre-commit、pre-push 等，Husky 的作用就是简化这些脚本的管理和配置。

通过 Husky，可以轻松地在项目中添加和管理多种类型的 Git 钩子，可以配置它们来执行诸如代码格式化、代码风格检查、构建测试等任务。

安装Husky的步骤

1. 安装 Node.js 和 Git：

   • 确保你的系统上已经安装了 Node.js 和 Git。可以通过以下命令进行安装：

     
     # 在 Ubuntu 上安装 Node.js
     sudo apt-get update
     sudo apt-get install nodejs
     sudo apt-get install npm

   在 Ubuntu 上安装 Git

   sudo apt-get install git

   在 macOS 上安装 Node.js

   brew install node

   在 macOS 上安装 Git

   brew install git

2. 初始化项目：

   • 通过 npm init 或 yarn init 初始化一个新的 Node.js 项目。
   • 运行 npm install husky --save-dev 或 yarn add husky --dev 安装 Husky。
3. 配置 Husky：
   • 运行 npx husky install 或 yarn husky install 来初始化 Husky。
   • 初始化完成后，Husky 会在你的项目中创建一个名为 .husky 的文件夹，并在 package.json 文件中添加一些相关的脚本。

验证Husky是否安装成功

安装完成后，可以通过以下步骤验证 Husky 是否安装成功：

1. 检查 .husky 文件夹：

   • 进入项目的根目录，查看是否存在 .husky 文件夹。
   • 如果存在，说明 Husky 安装成功。

2. 检查 package.json 文件：

   • 打开 package.json 文件，查看是否有 Husky 相关的配置。
3. 使用 Husky 命令：
   • 运行 npx husky install 或 yarn husky install，如果输出 "husky already installed"，则说明 Husky 已经正确安装。

创建钩子

在 Husky 中，可以通过命令行工具来创建 Git 钩子。这里我们将一步步介绍如何创建一个 pre-commit 钩子。

1. 创建一个新的 Git 仓库：

   • 使用 git init 初始化一个新的 Git 仓库。

2. 安装 Husky：

   • 按照上述步骤安装 Husky。

3. 创建 pre-commit 钩子：

   • 运行 npx husky add .husky/pre-commit "npm run lint" 或 yarn husky add .husky/pre-commit "npm run lint"，这会创建一个新的 pre-commit 钩子，该钩子在每次提交之前运行 npm run lint。

4. 配置 package.json：

   • 在 package.json 文件中添加一个 lint 脚本，例如：

     "scripts": {
     "lint": "eslint ."
     }

5. 验证钩子：
   • 在项目中添加一些代码。
   • 运行 git commit，此时应该会自动执行 npm run lint，并根据 eslint 的结果决定是否允许提交。

示例代码

1. 安装 Husky：

   npm install husky --save-dev

2. 创建 pre-commit 钩子：

   npx husky add .husky/pre-commit "npm run lint"

3. 配置 package.json：

   {
     "scripts": {
       "lint": "eslint ."
     }
   }

4. 验证钩子：

   • 在项目中添加一些代码，例如：

     var i = 0; // 违反了变量声明的风格
     console.log("Hello World") // 违反了 log 语句的风格

   • 运行 git commit，此时应该会执行 npm run lint，并输出错误信息。
   • 如果 lint 检查通过，则会允许提交。

配置钩子的命令

在 Husky 中，可以通过配置文件来定义钩子的执行命令和行为。以下是一个 pre-commit 钩子的配置示例：

1. 创建 pre-commit 钩子：

   • 使用 npx husky add .husky/pre-commit "npm run lint && npm run test" 或 yarn husky add .husky/pre-commit "npm run lint && npm run test"。

2. 配置 package.json：

   • 在 package.json 文件中添加 lint 和 test 脚本，例如：

     "scripts": {
     "lint": "eslint .",
     "test": "jest"
     }

3. 验证钩子：
   • 在项目中添加一些代码。
   • 运行 git commit，此时应该会依次执行 npm run lint 和 npm run test，并根据结果决定是否允许提交。

示例代码

1. 创建 pre-commit 钩子：

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

2. 配置 package.json：

   {
     "scripts": {
       "lint": "eslint .",
       "test": "jest"
     }
   }

3. 测试钩子的执行效果：

   • 在项目中添加一些代码，例如：

     var i = 0; // 违反了变量声明的风格
     console.log("Hello World") // 违反了 log 语句的风格

   • 运行 git commit，此时应该会依次执行 npm run lint 和 npm run test，并根据结果决定是否允许提交。

测试钩子的执行效果

为了测试钩子的执行效果，可以按照以下步骤进行：

1. 添加一些代码：

   • 在项目中添加一些不满足代码风格的代码，例如：

     var i = 0; // 违反了变量声明的风格
     console.log("Hello World") // 违反了 log 语句的风格

2. 运行 git commit：

   • 运行 git commit，此时应该会执行 npm run lint，并输出错误信息。
   • 如果 lint 检查通过，则会继续执行 npm run test，如果测试通过，则允许提交。
3. 验证效果：
   • 如果任何一步失败，提交将被拒绝。
   • 如果所有检查都通过，提交将成功。

通过以上步骤，可以确保每次提交代码之前都经过了严格的代码风格和测试检查，从而保证代码的质量和一致性。

在下一节中，我们将探讨 Husky 常见的钩子类型及其用途。

---

Husky的基本使用方法

在本节中，我们将详细介绍如何在项目中创建和配置 Git 钩子，并测试这些钩子的执行效果。

创建钩子

在 Husky 中，可以使用命令行工具来创建 Git 钩子。这里我们将介绍如何创建一个 pre-commit 钩子。

1. 安装 Husky：

   • 按照上一节的步骤安装 Husky。

2. 创建 pre-commit 钩子：

   • 运行 npx husky add .husky/pre-commit "npm run lint && npm run test" 或 yarn husky add .husky/pre-commit "npm run lint && npm run test"。

3. 配置 package.json：

   • 在 package.json 文件中添加 lint 和 test 脚本，例如：

     "scripts": {
     "lint": "eslint .",
     "test": "jest"
     }

4. 验证钩子：
   • 在项目中添加一些代码。
   • 运行 git commit，此时应该会依次执行 npm run lint 和 npm run test，并根据结果决定是否允许提交。

示例代码

1. 安装 Husky：

   npm install husky --save-dev

2. 创建 pre-commit 钩子：

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

3. 配置 package.json：

   {
     "scripts": {
       "lint": "eslint .",
       "test": "jest"
     }
   }

4. 测试钩子的执行效果：

   • 在项目中添加一些代码，例如：

     var i = 0; // 违反了变量声明的风格
     console.log("Hello World") // 违反了 log 语句的风格

   • 运行 git commit，此时应该会依次执行 npm run lint 和 npm run test，并根据结果决定是否允许提交。

配置钩子的命令

在 Husky 中，可以通过配置文件来定义钩子的执行命令和行为。以下是一个 pre-commit 钩子的配置示例：

1. 创建 pre-commit 钩子：

   • 使用 npx husky add .husky/pre-commit "npm run lint && npm run test" 或 yarn husky add .husky/pre-commit "npm run lint && npm run test"。

2. 配置 package.json：

   • 在 package.json 文件中添加 lint 和 test 脚本。
3. 验证钩子：
   • 在项目中添加一些代码。
   • 运行 git commit，此时应该会依次执行 npm run lint 和 npm run test，并根据结果决定是否允许提交。

示例代码

1. 创建 pre-commit 钩子：

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

2. 配置 package.json：

   {
     "scripts": {
       "lint": "eslint .",
       "test": "jest"
     }
   }

3. 测试钩子的执行效果：

   • 在项目中添加一些代码，例如：

     var i = 0; // 违反了变量声明的风格
     console.log("Hello World") // 违反了 log 语句的风格

   • 运行 git commit，此时应该会执行 npm run lint 和 npm run test，并根据结果决定是否允许提交。

测试钩子的执行效果

为了测试钩子的执行效果，可以按照以下步骤进行：

1. 添加一些代码：

   • 在项目中添加一些不满足代码风格的代码。

2. 运行 git commit：

   • 运行 git commit，此时应该会执行 npm run lint，并输出错误信息。
   • 如果 lint 检查通过，则会继续执行 npm run test，如果测试通过，则允许提交。
3. 验证效果：
   • 如果任何一步失败，提交将被拒绝。
   • 如果所有检查都通过，提交将成功。

通过以上步骤，可以确保每次提交代码之前都经过了严格的代码风格和测试检查，从而保证代码的质量和一致性。

在下一节中，我们将探讨 Husky 常见的钩子类型及其用途。

---

常见钩子类型及其用途

Husky 支持多种类型的 Git 钩子，每种钩子都有特定的用途，可以在不同的 Git 事件之前或之后运行。本节将详细介绍几种常见的钩子类型及其用途。

pre-commit钩子

pre-commit 钩子在每次提交代码之前执行。通常用于在提交之前执行代码风格检查、代码格式化、构建测试等任务，以确保每次提交的代码质量。

示例代码

1. 配置 pre-commit 钩子：

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

2. 配置 package.json：

   {
     "scripts": {
       "lint": "eslint .",
       "test": "jest"
     }
   }

用途

• 代码风格检查：确保代码符合预定义的风格指南。
• 代码格式化：自动格式化代码，使其符合统一的格式标准。
• 构建测试：执行单元测试和集成测试，确保代码的正确性。

pre-push钩子

pre-push 钩子在每次推送代码之前执行。通常用于执行更全面的测试，如端到端测试、覆盖率检查等，以确保推送的代码是完整的和功能性的。

示例代码

1. 配置 pre-push 钩子：

   npx husky add .husky/pre-push "npm run test-e2e && npm run coverage"

2. 配置 package.json：

   {
     "scripts": {
       "test-e2e": "cypress run",
       "coverage": "nyc npm run test"
     }
   }

用途

• 端到端测试：确保整个应用程序的功能正常。
• 覆盖率检查：确保代码的测试覆盖率达到了预设的标准。
• 其他自定义任务：如发布构建、环境检查等。

pre-commit与pre-push的区别与联系

区别

• 触发时间：
  • pre-commit：在每次提交代码之前执行。
  • pre-push：在每次推送代码之前执行。
• 执行任务：
  • pre-commit：通常用于代码风格检查、代码格式化、单元测试等。
  • pre-push：通常用于端到端测试、覆盖率检查等更全面的任务。

联系

• 目的：
  • 都是为了确保每次提交或推送的代码质量。
  • 都可以配置为执行自定义的脚本或命令。
• 相互补充：
  • pre-commit 可以确保每次提交的代码质量，而 pre-push 可以确保推送的代码是完整的和功能性的。
  • 两者结合使用可以提供更全面的代码质量保证。

通过合理配置 pre-commit 和 pre-push 钩子，可以确保每次提交和推送的代码都经过了严格的检查和测试，从而保证代码的质量和稳定性。

---

Husky的配置文件详解

在 Husky 中，可以通过配置文件来定义和管理 Git 钩子。本节将详细介绍 .husky 文件夹和 package.json 文件中的 Husky 相关配置。

.husky文件夹介绍

.husky 文件夹是 Husky 的工作目录，其中包含所有 Git 钩子脚本和相关配置文件。

• 文件结构：
  • 每个钩子文件是一个可执行脚本，通常以 .sh 或 .cmd 为扩展名。
  • 钩子文件的命名和位置遵循 Git 钩子的标准命名规范。

示例代码

1. 创建 pre-commit 钩子：

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

2. 文件内容：

   • .husky/pre-commit 文件内容：

     #!/bin/sh
     . "$(dirname "$0")/_husky.sh"
     
     npm run lint && npm run test

配置示例

1. 创建 pre-commit 钩子：

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

2. 查看 .husky 文件夹：

   ls -la .husky/

3. 查看 pre-commit 文件内容：

   cat .husky/pre-commit

package.json中的husky部分

package.json 文件是项目的配置文件，其中包含了 Husky 相关的配置。

• default：默认的 Husky 配置。
• **husky`：Husky 的配置对象。
  • hooks：Git 钩子配置对象。
  • pre-commit：pre-commit 钩子命令。
  • pre-push：pre-push 钩子命令。

示例代码

1. 安装 Husky：

   npm install husky --save-dev

2. 配置 package.json：

   {
     "name": "my-project",
     "version": "1.0.0",
     "scripts": {
       "lint": "eslint .",
       "test": "jest"
     },
     "husky": {
       "hooks": {
         "pre-commit": "npm run lint && npm run test"
       }
     }
   }

配置示例

1. 安装 Husky：

   npm install husky --save-dev

2. 配置 package.json：

   {
     "name": "my-project",
     "version": "1.0.0",
     "scripts": {
       "lint": "eslint .",
       "test": "jest"
     },
     "husky": {
       "hooks": {
         "pre-commit": "npm run lint && npm run test"
       }
     }
   }

3. 查看 package.json 文件内容：

   cat package.json

husky.config.js的使用

husky.config.js 是 Husky 的配置文件，可以用来定义全局的 Husky 配置，如禁用某些钩子、设置脚本执行环境等。

• 禁用钩子：
  • 可以通过配置文件禁用特定的钩子。
• 设置脚本执行环境：
  • 可以设置脚本的执行环境，如 Node.js 版本、环境变量等。

示例代码

1. 创建 husky.config.js 文件：

   touch husky.config.js

2. 配置 husky.config.js：

   module.exports = {
     hooks: {
       'pre-commit': 'npm run lint && npm run test',
       'pre-push': 'npm run test-e2e && npm run coverage'
     },
     env: {
       NODE_ENV: 'production'
     },
     envHooks: {
       'pre-commit': {
         NODE_ENV: 'development'
       }
     }
   }

3. 运行 Husky 初始化命令：

   npx husky-init

配置示例

1. 创建 husky.config.js 文件：

   touch husky.config.js

2. 配置 husky.config.js：

   module.exports = {
     hooks: {
       'pre-commit': 'npm run lint && npm run test',
       'pre-push': 'npm run test-e2e && npm run coverage'
     },
     env: {
       NODE_ENV: 'production'
     },
     envHooks: {
       'pre-commit': {
         NODE_ENV: 'development'
       }
     }
   }

通过配置 .husky 文件夹和 package.json 文件中的 Husky 配置，可以灵活地管理和执行 Git 钩子脚本，从而确保代码的质量和一致性。

---

常见问题及解决办法

在使用 Husky 的过程中，可能会遇到一些常见问题，如无法触发钩子、钩子执行失败等。本节将介绍这些问题的原因及解决办法。

无法触发钩子的原因及解决方法

问题一：无法触发 pre-commit 钩子

原因：

• 没有安装 Husky。
• Husky 配置不正确。
• 钩子文件没有正确的执行权限。

解决方法：

• 确保已经安装并初始化了 Husky。
• 检查 package.json 文件中的 Husky 配置是否正确。
• 确保钩子文件具有可执行权限，可以通过 chmod 命令修改文件权限。

示例代码

1. 安装 Husky：

   npm install husky --save-dev

2. 初始化 Husky：

   npx husky install

3. 检查 package.json 文件：

   {
     "name": "my-project",
     "version": "1.0.0",
     "scripts": {
       "lint": "eslint .",
       "test": "jest"
     },
     "husky": {
       "hooks": {
         "pre-commit": "npm run lint && npm run test"
       }
     }
   }

4. 检查钩子文件权限：

   chmod +x .husky/pre-commit

问题二：钩子执行失败

原因：

• 钩子命令执行失败。
• 环境配置不正确。
• 脚本依赖未安装。

解决方法：

• 检查钩子命令是否正确。
• 确保环境配置正确。
• 确保所有依赖都已安装。

示例代码

1. 检查钩子命令：

   cat .husky/pre-commit

2. 检查环境配置：

   cat husky.config.js

3. 确保所有依赖都已安装：

   npm install

钩子执行失败的常见原因与解决办法

问题一：脚本执行失败

原因：

• 脚本命令执行失败。
• 脚本依赖未安装。
• 脚本配置不正确。

解决方法：

• 检查脚本命令是否正确。
• 确保所有依赖都已安装。
• 确保脚本配置正确。

示例代码

1. 检查脚本命令：

   cat .husky/pre-commit

2. 检查脚本依赖：

   npm install

3. 检查脚本配置：

   {
     "scripts": {
       "lint": "eslint .",
       "test": "jest"
     }
   }

问题二：环境配置不正确

原因：

• 环境变量配置不正确。
• 环境依赖未安装。

解决方法：

• 检查环境配置。
• 确保环境依赖已安装。

示例代码

1. 检查环境配置：

   cat husky.config.js

2. 确保环境依赖已安装：

   npm install

如何更新或移除Husky

更新 Husky

步骤：

1. 卸载当前版本：

   npm uninstall husky

2. 安装最新版本：

   npm install husky --save-dev

3. 重新初始化 Husky：

   npx husky install

移除 Husky

步骤：

1. 卸载 Husky：

   npm uninstall husky

2. 删除 .husky 文件夹：

   rm -rf .husky

3. 删除 package.json 中的 Husky 配置：

   {
     "name": "my-project",
     "version": "1.0.0",
     "scripts": {
       "lint": "eslint .",
       "test": "jest"
     },
     "husky": {
       "hooks": {
         "pre-commit": "npm run lint && npm run test"
       }
     }
   }

4. 删除 husky.config.js 文件：

   rm husky.config.js

通过以上步骤，可以解决常见的 Husky 使用问题，并确保项目的 Git 钩子配置能够正常工作。

---

Husky的最佳实践

在本节中，我们将分享一些 Husky 的最佳实践案例，并探讨如何结合其他工具使用 Husky，最后提供一些小技巧和注意事项。

最佳实践案例分享

案例一：确保代码质量

npx husky add .husky/pre-commit "npm run lint && npm run test"
npx husky add .husky/pre-push "npm run lint && npm run test-e2e && npm run coverage"

{
  "scripts": {
    "lint": "eslint .",
    "test": "jest",
    "test-e2e": "cypress run",
    "coverage": "nyc npm run test"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint && npm run test",
      "pre-push": "npm run lint && npm run test-e2e && npm run coverage"
    }
  }
}

案例二：确保环境一致性

npx husky add .husky/pre-commit "npm install && npm run lint && npm run test"
npx husky add .husky/pre-push "npm install && npm run lint && npm run test-e2e && npm run coverage"

{
  "scripts": {
    "install": "npm install",
    "lint": "eslint .",
    "test": "jest",
    "test-e2e": "cypress run",
    "coverage": "nyc npm run test"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run install && npm run lint && npm run test",
      "pre-push": "npm run install && npm run lint && npm run test-e2e && npm run coverage"
    }
  }
}

案例三：结合其他工具使用 Husky

1. 结合 ESLint：

   npx husky add .husky/pre-commit "npm run lint"

   {
     "scripts": {
       "lint": "eslint ."
     },
     "husky": {
       "hooks": {
         "pre-commit": "npm run lint"
       }
     }
   }

2. 结合 Jest：

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

   {
     "scripts": {
       "test": "jest"
     },
     "husky": {
       "hooks": {
         "pre-commit": "npm run test"
       }
     }
   }

3. 结合 Cypress：

   npx husky add .husky/pre-push "npm run test-e2e"

   {
     "scripts": {
       "test-e2e": "cypress run"
     },
     "husky": {
       "hooks": {
         "pre-push": "npm run test-e2e"
       }
     }
   }

如何结合其他工具使用Husky

结合 ESLint

1. 安装 ESLint：

   npm install eslint --save-dev

2. 配置 pre-commit 钩子：

   npx husky add .husky/pre-commit "npm run lint"

3. 配置 package.json：

   {
     "scripts": {
       "lint": "eslint ."
     },
     "husky": {
       "hooks": {
         "pre-commit": "npm run lint"
       }
     }
   }

结合 Jest

1. 安装 Jest：

   npm install jest --save-dev

2. 配置 pre-commit 钩子：

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

3. 配置 package.json：

   {
     "scripts": {
       "test": "jest"
     },
     "husky": {
       "hooks": {
         "pre-commit": "npm run test"
       }
     }
   }

结合 Cypress

1. 安装 Cypress：

   npm install cypress --save-dev

2. 配置 pre-push 钩子：

   npx husky add .husky/pre-push "npm run test-e2e"

3. 配置 package.json：

   {
     "scripts": {
       "test-e2e": "cypress run"
     },
     "husky": {
       "hooks": {
         "pre-push": "npm run test-e2e"
       }
     }
   }

小技巧与注意事项

小技巧

1. 使用 husky.config.js 文件：

   module.exports = {
     hooks: {
       "pre-commit": "npm run lint && npm run test"
     },
     env: {
       NODE_ENV: "development"
     }
   }

2. 使用环境变量：

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

   {
     "scripts": {
       "lint": "eslint .",
       "test": "jest"
     },
     "husky": {
       "hooks": {
         "pre-commit": "npm run lint && npm run test"
       }
     }
   }

注意事项

1. 确保所有依赖都已安装：

   npm install

2. 确保钩子文件具有可执行权限：

   chmod +x .husky/pre-commit

3. 确保环境配置正确：

   cat husky.config.js

通过这些最佳实践和注意事项，可以确保 Husky 的使用能够最大限度地提高项目的代码质量和稳定性。