关于前端:git-hookshuskylintstaged

前言

githooks

Git Hooks 就是在 Git 执行特定事件（如 commit、push、receive 等）时触发运行的脚本，相似于“钩子函数”，没有设置可执行的钩子将被疏忽。

在我的项目的 .git/hooks 目录中，有一些 .sample 结尾的钩子示例脚本，如果想启用对应的钩子，只需手动删除后缀，即可。（删除某一个 hook 的后缀 .sample 即可启用该 hook 脚本，默认是不启用的。）

【然而，咱们个别不去改变 .git/hooks 外面的文件，因为咱们应用 husky】

husky

husky 是一个为 git 客户端减少 hook 的工具。装置后，它会主动在仓库中的 .git/ 目录下减少相应的钩子；比方 pre-commit 钩子就会在你执行 git commit 的触发。

那么咱们能够在 pre-commit 中实现一些比方 lint 查看、单元测试、代码丑化等操作。当然，pre-commit 阶段执行的命令当然要保障其速度不要太慢，每次 commit 都等很久也不是什么好的体验。

lint-staged

lint-staged，一个仅仅过滤出 Git 代码暂存区文件 (被 git add 的文件) 的工具；这个很实用，因为咱们如果对整个我的项目的代码做一个查看，可能耗时很长，如果是老我的项目，要对之前的代码做一个代码标准查看并批改的话，这可能就麻烦了呀，可能导致我的项目改变很大。

所以这个 lint-staged，对团队我的项目和开源我的项目来说，是一个很好的工具，它是对集体要提交的代码的一个标准和束缚。

执行

下载包

yarn add husky lint-staged -D

配置 script

//package.json
"scripts": {
    ...
    "prepare": "husky install",
    "preCommit": "lint-staged"
  },
"lint-staged": {"src/**/*.{js,vue}": [
    "eslint --fix",
    "git add"
  ]
 }

创立 husky 钩子

执行下述命令会在.husky 下创立一个 pre-commit 的文件

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

整个流程路线

1. commit 触发 hooks 的 pre-commit
2. hooks 指向 husky
3. husky 调用了 npm run preCommit
4. npm run preCommit 调用 lint-staged
5. lint-staged 调用了 package.json 内 lint-staged 脚本

不得不说，husky 更新到 6 版本后比之前的操作要麻烦很多，须要在注册脚本，还多了个.husky 的的文件，应用老本比之前高了不少

ps：常见谬误起因

1. 钩子如果没有触发，查看一下.git/config 文件的 hooksPath 门路是否指向了 husky

   hooksPath = .husky

2. .husky/pre-commit 文件是否被创立
3. husky