husky介绍

husky 是一个 git hook 工具，可以帮助我们在 git 操作之前与之后可设置自动执行的脚本，像： pre-commit 、 commit-msg 、 pre-push 等等支持的 git hooks。

那为什么不直接使用 git hook，而要使用 husky 呢？

原因很简单，git 自带的钩子需要在 .git/hooks 目录中进行修改，而这里的文件并没有共享到代码库，无法和项目组成员共享。

配置步骤1

pnpm i husky --dev
or
yarn  add husky --dev

配置 husky 自动安装

npm 脚本有 pre 和 post 两个钩子，以便于我们在执行npm install、npm publish、npm build等命令之前或之后执行脚本。 在这里我们添加 prepare 钩子，当执行完 npm install 后，将自动执行 husky install 初始化 husky 配置

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

添加 pre-commit hook

npx husky add .husky/pre-commit "npx eslint --fix packages/**/*.{ts,js,vue}"

执行完成后，就会在.husky 目录下生成 pre-commit 文件

这样当提交代码前，就会首先触发 pre-commit，自动执行 eslint 检查功能，并且后在校验失败时自动退出，这样可以确保本地的代码已经通过检查才能 push 到远程。

当然，如果你能确保你的代码没有任何问题又觉得 eslint 费时间，或者说这块代码是别人写的，为什么要我改，那么也可以直接跳过 husky。

git commit -m "XXX" --no-verify

lint-staged的使用

在前面我们使用 husky 和 eslint 对提交前的代码进行检查时，可以看到我们项目里竟然存在 400 多个 eslint 问题，可是我只改了一个文件，难不成我要把所有的问题都给修复了？ 算了，还是采用--no-verify吧，让其他人去修。

真实项目开发中，基本都会遇到这个问题，我只改了 A 文件，结果全部文件的报错信息都冒了出来。

这时候我们就可以借助lint-staged对已经通过 git add 加入到 提交区 stage 的文件进行扫描即可。

npm install lint-staged --dev
# use yarn
yarn add lint-staged --dev

在 package.json 中配置 lint-staged

"lint-staged": {
  "packages/**/*.{js,jsx,ts,tsx,json,css,scss,md,vue}": [
    "eslint --fix --max-warnings=0"
  ]
},

这里我只开启 eslint 校验，防止代码再出现一些低级错误。

修改 pre-commit 钩子

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
# npx eslint --fix packages/**/*.{ts,js,vue}
npx lint-staged

这样一来，当执行 git commit 命令提交代码时，会自动执行 husky 下的 pre-commit 脚本，即执行 lint-staged 命令。对暂存区文件执行 eslint 校验，而不是针对全部文件。

解决完这几个问题，就可以愉快的提交代码了。