husky 以及 lint-staged 介绍

介绍

前端代码可以通过引入 ESLint 和 TypeScript 来提升一定的代码质量，但是实际执行中是否能严格执行，并没有强制保障，仅仅引入它们并不能保证程序员就不会把错误的代码提交给 Git。

husky 以及 lint-staged 的引入就是为了在 Git 提交环节去验证代码有没有严格遵守某些规范，强制所有要提交的代码必须满足要求。理想状态下，我们很难会再把一份处处报错的代码提交给 Git 了。

安装

这里我们使用 husky 和 lint-staged 以及 TypeScript 的命令为项目在 Git 提交阶段添加 Hook，保证之后的每一次代码提交都必须满足项目设置的 ESLint 规则，必须通过 TypeScript 编译器检查。

安装 husky 和 lint-staged：

1 2	$ yarn add --dev husky $ yarn add --dev lint-staged

之后使用

1	npx husky add .husky/pre-commit "yarn lint-staged && tsc --skipLibCheck --noEmit"

该命令会在 .husky 文件夹下创建 pre-commit 文件，并写入 yarn lint-staged && tsc --skipLibCheck --noEmit 命令，这是一个自定义的 Git 钩子，即在每次 Git 提交的时候都会会去执行设置的脚本，如果脚步没有执行通过，则提交会失败。

之后，在 package.json 中添加需要执行的这个脚本：

"lint-staged": {
  "*.js|*.jsx|*.ts|*.vue|*.tsx": [
    "eslint",
    "eslint --fix"
  ]
}

理解

husky 的作用是可以便捷的为 Git 操作添加 Hook。Git 中的各个操作都是提供了钩子的，其文档中说明了这些 Hooks 可以放置的位置：

By default the hooks directory is $GIT_DIR/hooks, but that can be changed via the core.hooksPath configuration variable (see git-config[1]).

对于一个 Git 项目，其 .git/hooks/ 路径中可以看到一些 Hooks 的样本，默认是可以把一个自定义的 Hook 放置在此。

husky 安装后先去修改了 .git/config 文件，增加了：

1 2	[core] hooksPath = .husky

这将 Hooks 的路径定向了项目目录下的 .husky 文件夹。之后，husky 将会在这个文件夹中创建 Hook。

前文中定义执行的脚本为 yarn lint-staged && tsc --skipLibCheck --noEmit。

前者是通过 lint-staged 去执行 ESLint 相关，因为对于这方面的检查，没必要每次扫描全项目，只需要改哪里检查哪里即可，这就是 lint-staged 这个库的作用。

而 tsc --skipLibCheck --noEmit 是去检查整个项目是否存在 TypeScript 相关的编译错误。这个每次提交都会扫描整个项目，原因是 TypeScript 的错误不是仅限于当前修改的文件，可能修改当前文件，导致的是其它文件使用时报错。