Husky钩子实战总结教你如何避免常见坑点和提升代码质量

我的写法，亲测靠谱

在前端开发中，Husky钩子是个非常实用的工具，它可以让你在Git操作（如commit、push）时执行一些自定义脚本。这样可以确保代码质量，比如自动格式化代码、运行测试等。我一般会这样设置Husky，亲测有效。

安装Husky

首先，你需要安装Husky。如果你用的是npm，可以直接用下面的命令：

npm install husky --save-dev

安装完后，你可以在package.json里看到Husky的一些配置。接下来，我们就可以开始添加钩子了。

添加pre-commit钩子

最常见的钩子是pre-commit，它会在每次提交前执行。我一般会在这个钩子里做一些代码格式化和简单的lint检查。下面是我在package.json里的配置：

{
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged && lint-staged"
    }
  },
  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ],
    "*.css": [
      "stylelint --fix",
      "git add"
    ]
  }
}

这里用了lint-staged来处理暂存区的文件，这样可以确保只有即将提交的文件会被检查。pretty-quick则用于快速格式化暂存区的代码。

添加pre-push钩子

另一个常用的钩子是pre-push，它会在每次推送前执行。我通常会在这个钩子里跑一下测试，确保代码没有问题再推上去。配置如下：

{
  "husky": {
    "hooks": {
      "pre-push": "npm run test"
    }
  }
}

这样，每次你在git push之前，都会先跑一遍测试，如果测试不通过，就不会允许你推送代码。

这几种错误写法，别再踩坑了

在使用Husky的过程中，我也踩过不少坑。这里分享几个常见的错误写法，希望大家能避开这些坑。

直接在钩子里写长脚本

有时候我们会想偷懒，在钩子里直接写很长的脚本。这样做看起来很方便，但其实很危险。比如：

{
  "husky": {
    "hooks": {
      "pre-commit": "eslint . --fix && stylelint **/*.css --fix && git add ."
    }
  }
}

这种写法虽然看起来简洁，但实际上很容易出问题。一是脚本太长，一旦出错很难调试；二是所有文件都会被检查，性能上会有很大影响。建议还是用lint-staged来处理，只检查暂存区的文件。

忽略异常情况

有时候我们在钩子里加了一些脚本，但是没有考虑异常情况。比如：

{
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint && npm run test"
    }
  }
}

这里的问题是，如果npm run lint失败了，后面的npm run test也会执行。这样可能会导致一些不必要的错误信息。正确的做法是在每个命令后面加上|| exit 1，这样前面的命令失败了，后面的命令就不会执行了：

{
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint || exit 1 && npm run test || exit 1"
    }
  }
}

忘记更新package.json

有时候我们会修改了package.json里的脚本，但是忘记更新Husky的配置。比如你修改了lint脚本的名字，但Husky里还是用的老名字：

{
  "scripts": {
    "lint:js": "eslint . --fix"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint && npm run test"
    }
  }
}

这里的npm run lint已经不存在了，会导致Husky无法正常工作。所以每次修改了脚本，记得同步更新Husky的配置。

实际项目中的坑

在实际项目中，使用Husky也有一些需要注意的地方。以下是一些我在项目中遇到的问题和解决方法。

多分支管理

在多分支管理的项目中，有时候你会希望在某些分支上禁用Husky钩子。比如，有些自动化部署脚本需要绕过某些钩子。这时你可以使用环境变量来控制Husky的行为。比如：

{
  "husky": {
    "hooks": {
      "pre-commit": "if [ -z "$DISABLE_HUSKY" ]; then pretty-quick --staged && lint-staged; fi"
    }
  }
}

这样，你只需要在某些情况下设置DISABLE_HUSKY=1，就可以禁用Husky钩子。

跨平台问题

Husky是基于Node.js的，所以在不同的操作系统上可能会有一些差异。比如，Windows上的路径分隔符和Linux/Unix不一样，这就可能导致一些脚本在不同平台上表现不一致。为了解决这个问题，你可以使用一些跨平台的库，比如cross-env：

{
  "scripts": {
    "lint": "cross-env NODE_ENV=development eslint . --fix"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint"
    }
  }
}

这样，无论你在什么平台上运行脚本，都能保证路径分隔符和其他环境变量的一致性。

性能优化

有时候，Husky钩子可能会比较慢，特别是在大型项目中。为了优化性能，你可以考虑以下几个方法：

• 使用lint-staged，只检查暂存区的文件。
• 并行执行多个任务，比如同时运行lint和测试。
• 使用缓存机制，比如eslint和jest都有缓存功能。

比如，你可以这样配置package.json：

{
  "scripts": {
    "lint": "eslint . --cache --fix",
    "test": "jest --cache"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint && npm run test"
    }
  }
}

这样可以大大提高Husky钩子的执行速度。

总结

以上是我个人在使用Husky钩子过程中总结的一些实战经验和踩坑教训。希望对你有所帮助。如果你有更好的方案或建议，欢迎在评论区交流！