首页手记初学者教你轻松入门Husky

初学者教你轻松入门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的步骤

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

验证Husky是否安装成功

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

检查 .husky 文件夹：
- 进入项目的根目录，查看是否存在 .husky 文件夹。
- 如果存在，说明 Husky 安装成功。
检查 package.json 文件：
- 打开 package.json 文件，查看是否有 Husky 相关的配置。
使用 Husky 命令：
- 运行 npx husky install 或 yarn husky install，如果输出 "husky already installed"，则说明 Husky 已经正确安装。

创建钩子

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

创建一个新的 Git 仓库：
- 使用 git init 初始化一个新的 Git 仓库。
安装 Husky：
- 按照上述步骤安装 Husky。
创建 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。
配置 package.json：
- 在 package.json 文件中添加一个 lint 脚本，例如：
```
"scripts": {
"lint": "eslint ."
}
```
验证钩子：
- 在项目中添加一些代码。
- 运行 git commit，此时应该会自动执行 npm run lint，并根据 eslint 的结果决定是否允许提交。

示例代码

安装 Husky：
```
npm install husky --save-dev
```

创建 pre-commit 钩子：

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

配置 package.json：

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

验证钩子：
- 在项目中添加一些代码，例如：
```
var i = 0; // 违反了变量声明的风格
console.log("Hello World") // 违反了 log 语句的风格
```
- 运行 git commit，此时应该会执行 npm run lint，并输出错误信息。
- 如果 lint 检查通过，则会允许提交。

配置钩子的命令

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

创建 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"。
配置 package.json：
- 在 package.json 文件中添加 lint 和 test 脚本，例如：
```
"scripts": {
"lint": "eslint .",
"test": "jest"
}
```
验证钩子：
- 在项目中添加一些代码。
- 运行 git commit，此时应该会依次执行 npm run lint 和 npm run test，并根据结果决定是否允许提交。

示例代码

创建 pre-commit 钩子：

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

配置 package.json：

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

测试钩子的执行效果：
- 在项目中添加一些代码，例如：
```
var i = 0; // 违反了变量声明的风格
console.log("Hello World") // 违反了 log 语句的风格
```
- 运行 git commit，此时应该会依次执行 npm run lint 和 npm run test，并根据结果决定是否允许提交。

测试钩子的执行效果

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

添加一些代码：

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

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

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

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

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

Husky的基本使用方法

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

创建钩子

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

安装 Husky：
- 按照上一节的步骤安装 Husky。
创建 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"。
配置 package.json：
- 在 package.json 文件中添加 lint 和 test 脚本，例如：
```
"scripts": {
"lint": "eslint .",
"test": "jest"
}
```
验证钩子：
- 在项目中添加一些代码。
- 运行 git commit，此时应该会依次执行 npm run lint 和 npm run test，并根据结果决定是否允许提交。

示例代码

安装 Husky：
```
npm install husky --save-dev
```

创建 pre-commit 钩子：

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

配置 package.json：

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

测试钩子的执行效果：
- 在项目中添加一些代码，例如：
```
var i = 0; // 违反了变量声明的风格
console.log("Hello World") // 违反了 log 语句的风格
```
- 运行 git commit，此时应该会依次执行 npm run lint 和 npm run test，并根据结果决定是否允许提交。

配置钩子的命令

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

创建 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"。
配置 package.json：
- 在 package.json 文件中添加 lint 和 test 脚本。
验证钩子：
- 在项目中添加一些代码。
- 运行 git commit，此时应该会依次执行 npm run lint 和 npm run test，并根据结果决定是否允许提交。

示例代码

创建 pre-commit 钩子：

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

配置 package.json：

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

测试钩子的执行效果：
- 在项目中添加一些代码，例如：
```
var i = 0; // 违反了变量声明的风格
console.log("Hello World") // 违反了 log 语句的风格
```
- 运行 git commit，此时应该会执行 npm run lint 和 npm run test，并根据结果决定是否允许提交。

测试钩子的执行效果

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

添加一些代码：
- 在项目中添加一些不满足代码风格的代码。
运行 git commit：
- 运行 git commit，此时应该会执行 npm run lint，并输出错误信息。
- 如果 lint 检查通过，则会继续执行 npm run test，如果测试通过，则允许提交。
验证效果：
- 如果任何一步失败，提交将被拒绝。
- 如果所有检查都通过，提交将成功。

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

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

常见钩子类型及其用途

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

pre-commit钩子

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

示例代码

配置 pre-commit 钩子：

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

配置 package.json：

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

用途

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

pre-push钩子

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

示例代码

配置 pre-push 钩子：

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

配置 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 钩子的标准命名规范。

示例代码

创建 pre-commit 钩子：

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

文件内容：

.husky/pre-commit 文件内容：

#!/bin/sh
. "$(dirname "$0")/_husky.sh"

npm run lint && npm run test

配置示例

创建 pre-commit 钩子：

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

查看 .husky 文件夹：
```
ls -la .husky/
```
查看 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 钩子命令。

示例代码

安装 Husky：
```
npm install husky --save-dev
```

配置 package.json：

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

配置示例

安装 Husky：
```
npm install husky --save-dev
```

配置 package.json：

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

查看 package.json 文件内容：
```
cat package.json
```

husky.config.js的使用

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

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

示例代码

创建 husky.config.js 文件：
```
touch husky.config.js
```

配置 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 初始化命令：
```
npx husky-init
```

配置示例

创建 husky.config.js 文件：
```
touch husky.config.js
```

配置 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 命令修改文件权限。

示例代码

安装 Husky：
```
npm install husky --save-dev
```
初始化 Husky：
```
npx husky install
```

检查 package.json 文件：

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

检查钩子文件权限：
```
chmod +x .husky/pre-commit
```

问题二：钩子执行失败

原因：

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

解决方法：

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

示例代码

检查钩子命令：
```
cat .husky/pre-commit
```
检查环境配置：
```
cat husky.config.js
```
确保所有依赖都已安装：
```
npm install
```

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

问题一：脚本执行失败

原因：

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

解决方法：

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

示例代码

检查脚本命令：
```
cat .husky/pre-commit
```
检查脚本依赖：
```
npm install
```

检查脚本配置：

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

问题二：环境配置不正确

原因：

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

解决方法：

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

示例代码

检查环境配置：
```
cat husky.config.js
```
确保环境依赖已安装：
```
npm install
```

如何更新或移除Husky

更新 Husky

步骤：

卸载当前版本：
```
npm uninstall husky
```
安装最新版本：
```
npm install husky --save-dev
```
重新初始化 Husky：
```
npx husky install
```

移除 Husky

步骤：

卸载 Husky：
```
npm uninstall husky
```
删除 .husky 文件夹：
```
rm -rf .husky
```

删除 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"
    }
  }
}

删除 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

结合 ESLint：

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

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

结合 Jest：

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

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

结合 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

安装 ESLint：
```
npm install eslint --save-dev
```

配置 pre-commit 钩子：

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

配置 package.json：

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

结合 Jest

安装 Jest：
```
npm install jest --save-dev
```

配置 pre-commit 钩子：

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

配置 package.json：

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

结合 Cypress

安装 Cypress：
```
npm install cypress --save-dev
```

配置 pre-push 钩子：

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

配置 package.json：

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

小技巧与注意事项

小技巧

使用 husky.config.js 文件：

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

使用环境变量：

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"
    }
  }
}

注意事项

确保所有依赖都已安装：
```
npm install
```
确保钩子文件具有可执行权限：
```
chmod +x .husky/pre-commit
```
确保环境配置正确：
```
cat husky.config.js
```

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

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

哔哔one

手记
篇

粉丝

93

获赞与收藏

543

关注作者，订阅最新文章

相关文章推荐

Webpack轻松入门（一）——基本流程

Java入门难？推荐这门小课带你轻松入门限时1元！

前端小白入门难？推荐这篇学习路线，大牛带你轻松入门到进阶！

Webpack轻松入门（一）——基本流程

【PHP学习路线升级版】，小白福利，轻松迈进就业门！

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

初学者教你轻松入门Husky

示例代码

示例代码

示例代码

示例代码

示例代码

用途

示例代码

用途

区别

联系

示例代码

配置示例

示例代码

配置示例

示例代码

配置示例

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

示例代码

问题二：钩子执行失败

示例代码

问题一：脚本执行失败

示例代码

问题二：环境配置不正确

示例代码

更新 Husky

移除 Husky

案例一：确保代码质量

案例二：确保环境一致性

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

结合 ESLint

结合 Jest

结合 Cypress

小技巧

注意事项

相关文章推荐

阅读免费教程

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