使用husky规范代码提交

  在团队协作开发中，保持代码风格一致和提交信息规范是提高协作效率、降低沟通成本的关键手段。本文将介绍如何通过 Husky + lint-staged + Prettier + commitlint + commitizen 实现前端项目的自动化代码格式化与提交规范校验。

配置目的

• 自动格式化代码：避免格式不一致、减少 diff 冗余。
• 限制提交格式：规范化提交信息，利于仓库内项目管理。
• 保证提交前代码质量：通过 Git hook 在提交前自动校验，杜绝不合格代码进入版本库。

配置步骤

安装依赖

在你的项目根目录下运行以下命令：

npm install --save-dev husky lint-staged prettier
npm install --save-dev @commitlint/cli @commitlint/config-conventional
npm install --save-dev commitizen cz-conventional-changelog

配置 Prettier（可选）

创建 .prettierrc 文件，用于统一格式化风格：

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 100
}

可搭配 .prettierignore 忽略不需要格式化的文件。

初始化 Husky

npx husky install

在 package.json 中添加脚本：

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

然后创建 Git hook：

npx husky add .husky/pre-commit "npx lint-staged"
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

配置 lint-staged

在 package.json 中添加：

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

这样可以在 git commit 前自动格式化被提交的文件。

配置提交规范

Commitlint 配置

在项目根目录创建 commitlint.config.js：

module.exports = {
  extends: ['@commitlint/config-conventional']
}

Commitizen 配置

在 package.json 中添加：

"config": {
  "commitizen": {
    "path": "cz-conventional-changelog"
  }
}

推荐使用以下命令进行提交：

npx cz

或者安装全局命令：

npm install -g commitizen

提交规范示例

类型	描述
feat	新功能
fix	修复 Bug
docs	文档变更
style	格式（不影响代码运行的变动）
refactor	重构（既不是新增功能，也不是修复 bug）
test	增加测试
chore	构建过程或辅助工具变动

示例：

feat: 添加用户登录功能
fix: 修复表单验证失败的问题

完整效果

当你运行 git commit 时，将会触发如下流程：

• lint-staged：格式化代码
• commitlint：校验提交信息是否规范

如果不符合规则，则提交会被中断。这样可以有效提升团队协作质量，避免错误的代码格式和提交语句的产生。