优雅的Git提交：用Husky为你的项目加上提交约束

代码提交不规范？团队协作困难？Husky来帮你解决这些问题！

前言：为什么我们需要Git钩子？

在日常开发中，我们经常会遇到这样的场景：

某同事提交了不符合规范的代码，导致ESLint检查失败
忘记运行测试用例，直接把有问题的代码推送到了远程仓库
提交信息写得不清楚，导致后期回溯问题困难重重

这些问题不仅影响开发效率，还可能带来严重的生产问题。那么，有没有一种方法可以在代码提交前自动进行检查，确保每次提交都是符合规范的呢？

答案是肯定的------Git钩子（Git Hooks）可以帮我们实现这一目标。而Husky，则是管理Git钩子的神器。

什么是Husky？

Husky是一个现代化的Git钩子管理工具，它可以让你轻松地在package.json中配置Git钩子脚本，无需手动编写复杂的shell脚本，也无需关心.githooks目录的维护。

从Husky 7.0开始，它采用了全新的设计，更加轻量级、配置更加简单，让我们能够以最小成本为项目添加提交约束。

快速上手：安装和配置Husky

1. 安装Husky

首先，我们需要安装Husky：

bash 复制代码

# 使用npm安装
npm install husky --save-dev

# 或者使用yarn
yarn add husky --dev

# 或者使用pnpm
pnpm add husky --save-dev

2. 启用Husky

安装完成后，我们需要启用Husky：

bash 复制代码

npx husky install

通常，我们会希望团队成员在安装项目依赖后自动启用Husky，可以在package.json中添加一条脚本：

json 复制代码

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

这样，每次执行npm install后，会自动执行husky install命令。

3. 添加钩子

现在我们可以添加一个pre-commit钩子，在提交前运行ESLint检查：

bash 复制代码

npx husky add .husky/pre-commit "npm test"

这会在.husky目录下生成一个pre-commit文件，内容如下：

bash 复制代码

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm test

实战：配置完整的提交约束

一个完整的前端项目通常需要以下约束：

提交前运行ESLint检查
提交前运行测试用例
提交信息符合约定格式

1. 代码质量检查

我们可以修改pre-commit钩子，使其在提交前运行ESLint和测试：

bash 复制代码

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# 运行ESLint检查
npm run lint

# 运行测试用例
npm test

2. 提交信息规范

除了代码质量，提交信息的规范性也很重要。我们可以使用commitlint来规范提交信息。

首先安装必要的依赖：

bash 复制代码

npm install @commitlint/cli @commitlint/config-conventional --save-dev

创建commitlint.config.js文件：

javascript 复制代码

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',    // 新功能
        'fix',     // 修复bug
        'docs',    // 文档更新
        'style',   // 代码格式调整
        'refactor',// 代码重构
        'test',    // 测试用例
        'chore',   // 构建过程或辅助工具的变动
        'revert'   // 回滚提交
      ]
    ]
  }
};

然后添加commit-msg钩子：

bash 复制代码

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

现在，如果你的提交信息不符合规范，提交将会被阻止：

bash 复制代码

# 错误的提交信息
git commit -m "随便写写"

# 正确的提交信息
git commit -m "feat: 添加用户登录功能"

高级用法：只检查修改的文件

在大型项目中，每次提交都全量检查所有文件会非常耗时。我们可以使用lint-staged工具只对暂存区的文件进行检查。

首先安装lint-staged：

bash 复制代码

npm install lint-staged --save-dev

在package.json中配置lint-staged：

json 复制代码

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,scss,less}": [
      "stylelint --fix",
      "prettier --write"
    ],
    "*.{json,md}": [
      "prettier --write"
    ]
  }
}

然后修改pre-commit钩子：

bash 复制代码

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

这样，每次提交时只会对修改过的文件进行检查和格式化，大大提高了提交效率。

常见问题与解决方案

1. 跳过Husky检查

在某些特殊情况下，你可能需要跳过Husky检查，可以使用--no-verify参数：

bash 复制代码

git commit -m "紧急修复" --no-verify

但请注意，这应该只在真正必要的时候使用，而不是常规操作。

2. 团队协作中的Husky配置

为了确保团队中所有成员都使用相同的Husky配置，建议将.husky目录提交到版本控制中：

bash 复制代码

git add .husky
git commit -m "chore: 添加husky配置"

3. 跨平台兼容性

在Windows环境下，可能会遇到shell脚本执行问题。建议团队中使用WSL或确保所有开发者使用相同的开发环境。

总结

Husky是一个非常强大的Git钩子管理工具，它可以帮助我们：

提升代码质量：通过提交前自动检查，确保所有提交的代码符合规范
统一团队规范：通过共享Husky配置，让团队成员遵循相同的开发规范
减少低级错误：避免将未通过测试或lint检查的代码提交到仓库

将Husky与ESLint、Prettier、Commitlint等工具结合使用，可以构建一个完整的代码质量保障体系，让团队协作更加高效顺畅。

希望本文能帮助你更好地理解和使用Husky，为你的项目加上一道可靠的质量防线。如果你有任何问题或建议，欢迎在评论区留言讨论！

扩展阅读：

相关工具：

Commitizen：交互式生成符合规范的提交信息
Standard Version：基于约定式提交的版本管理工具