git hooks---husky、lint-staged

前言

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

你可能感兴趣的:(前端git)