在前端开发中，我们常常需要在提交代码前进行一些列格式化、校验等操作，以保证代码的规范性。而这些操作往往需要手动执行，非常繁琐、耗时、易出错。此时，一款名为 Husky 的工具就能帮我们解决这些问题。本文将会介绍如何使用 Husky 进行代码预处理。
Husky 是什么？
Husky 是一个 Git Hooks 工具，它可以在 Git Hooks 触发时运行脚本，完成一些列操作，例如代码格式化，Lint，测试等等。
安装 Husky
首先，我们需要在项目中安装 Husky，使用 npm 命令：
npm install husky --save-dev
安装完成后，在 package.json 中会在 devDependencies 中添加一条 husky 的依赖：
"devDependencies": { "husky": "^7.0.0" }
使用 Husky
接下来，我们需要使用 Husky 定义一些 Git Hooks 动作，在 Git Hooks 触发时自动运行脚本，完成一些列操作。这里以 husky 的 npm 包为例，为大家介绍 Husky 的使用。
一、添加 Git Hooks 动作
添加 Git Hooks 动作，我们需要在 package.json 中定义一个 husky 的 script，例如：
"scripts": { "prepare": "husky install" }
这里的 prepare 脚本是在 npm install 后自动运行的脚本，它将会加载 husky 的 Git Hooks 动作。
二、钩子类型
在 Husky 中，我们可以使用 pre-commit、pre-push、pre-rebase 等钩子类型，根据需求选择相应的钩子。
这里以 pre-commit 为例，在执行 git commit 命令前，自动运行一个脚本，完成代码格式化。我们需要在 package.json 中添加一个 husky 的配置：
"husky": { "hooks": { "pre-commit": "npm run lint-staged && npm run format-staged" } }
这里的 pre-commit 钩子将会在执行 git commit 命令前运行两个脚本，分别是 lint-staged 和 format-staged。这两个脚本都是 npm script，我们需要在 package.json 中定义：
"scripts": { "lint-staged": "lint-staged", "format-staged": "prettier --write *.js" }
其中，lint-staged 使用了一个 npm 包 lint-staged，这个工具可以过滤出暂存区中需要进行 Lint 操作的文件。而 format-stached 则是调用了一个代码格式化工具 prettier，将暂存区中的js文件进行格式化。
三、使用 npm 包 @zkochan/husky
在使用 Husky 进行 Git Hooks 动作配置时，我们需要按照约定好的脚本名称在 package.json 文件中定义脚本。这会让我们的 package.json 文件显得异常臃肿、难以维护。@zkochan/husky 这个 npm 包为我们提供了更加简便的操作。我们可以不用向 package.json 文件中添加 husky 字段，而在项目根目录下添加一个.huskyrc.json 配置文件，将各个 Git Hooks 动作和相应的执行脚本分别定义在此文件之中。
{ "hooks": { "pre-commit": "npm run lint-staged && npm run format-staged" } }
这样做的好处是，我们可以让 package.json 文件更加简洁，而且钩子类型和执行脚本更容易管理、维护。而在执行 Git Hooks 动作时，将会通过 husky 的 npm 包自动从 .huskyrc.json 文件中加载配置。
示例代码
以下是一个完整的使用 @zkochan/husky 进行 Git Hooks 设定的示例代码，供大家参考。
-- -------------------- ---- ------- - --------------- - -------- --------- -------------- ---------- ----------- ------- -- ---------- - -------------- -------------- ---------------- --------- ------- ------ ---------- ------ --------- ------- ----- ---- ---- ----------- -- ---- -- -- -------- - -------- - ------------- ---- --- ----------- -- --- --- -------------- - - -展开代码
结论
本文介绍了 Husky 的作用和使用方法。使用 Husky 工具，我们可以在 Git Hooks 触发时定期运行一些列操作，例如代码格式化、Lint、测试等，从而保证代码的规范性。而使用 @zkochan/husky 进行 Git Hooks 设定，将会让钩子类型和执行脚本分别定义在一个外部的配置文件中，让 package.json 文件更加简洁、易维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb4beb5cbfe1ea0611359
