（Git）pre-commit提交规范及commit-message校验

前端加油站

已于 2023-06-09 09:54:13 修改

阅读量4.2k

点赞数

分类专栏： Git 文章标签： git pre-commit commit-message

于 2022-01-13 10:29:03 首次发布

本文链接：https://blog.csdn.net/Gas_station/article/details/122468183

版权

Git 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Husky实现pre-commit提交规范，并详细解释Commit message的格式要求。通过安装配置commitlint确保Commit message符合约定式提交标准。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、使用husky实现 pre-commit 提交规范

安装 lint-staged 和 husky

npm i lint-staged husky -D

在项目中初始化 .husky，会在 packgae.json 中添加 prepare 脚本

npm set-script prepare "husky install" && npm run prepare

package.json

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

添加 `pre-commit` hooks

运行以下命令创建git hooks

npx husky add .husky/pre-commit "npm run lint"
git add .husky/pre-commit

运行完该命令后我们会看到 .husky/ 目录下新增了一个名为 pre-commit 的shell脚本。也就是说在执行 git commit 命令时会先执行 pre-commit 这个脚本。pre-commit 脚本内容如下

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

npm run lint

然后我们可以在 packgae.json 中添加 lint 脚本

{
  "lint-staged": {
    "*.{ts,tsx}": "eslint -c ./.eslintrc.commit.json --fix"
  },
  "husky": {
      "hooks": {
          "pre-commit": "npm run lint-staged"
      }
  },
  "scripts": {
    "lint-staged": "lint-staged",
    "lint": "npx eslint ./src"
  }
}

这样在执行 git commit 的时候会先执行 pre-commit 这个脚本，pre-commit 脚本内执行 npm run lint 脚本就会执行 eslint

如果看到如下图的结果，那就做到ESLint 校验生效了，Husky 使用成功！！

husky

二、Commit message 的格式

每次提交，Commit message 都包括三个部分：Header，Body 和 Footer。

<type>(<scope>): <subject>// 空一行<body>// 空一行<footer>

其中，Header 是必需的，Body 和 Footer 可以省略。

不管是哪一个部分，任何一行都不得超过72个字符（或100个字符）。这是为了避免自动换行影响美观。

安装配置commitlint

yarn add  @commitlint/cli @commitlint/config-conventional cz-conventional-changelog -D

package.json 中添加 lint 和 commitlint
@commitlint/cli 是commitlint提供的命令行工具，安装后会将cli脚本放置在./node_modules/.bin/目录下
@commitlint/config-conventional是社区中一些共享的配置

...
"scripts": {
  "lint": "npx eslint ./src",
  "commitlint": "commitlint --config .commitlintrc.js -e -V",
},
"lint-staged": {
    "*.{ts,tsx}": "eslint -c ./.eslintrc.commit.json --fix"
},
"husky": {
   "hooks": {
     "pre-commit": "npm run lint-staged"
   }
},
"config": {
  "commitizen": {
    "path": "./node_modules/cz-conventional-changelog"
  }
},
...

根目录添加 .commitlintrc.js .eslintrc.commit.json .eslintrc.json 文件

.commitlintrc.js 文件

module.exports = {
  rules: {
    'body-leading-blank': [1, 'always'],
    'footer-leading-blank': [1, 'always'],
    'header-max-length': [2, 'always', 72],
    'scope-case': [2, 'always', 'lower-case'],
    'subject-case': [2, 'never', ['start-case', 'pascal-case', 'upper-case']],
    'subject-empty': [2, 'never'],
    'subject-full-stop': [2, 'never', '.'],
    'type-case': [2, 'always', 'lower-case'],
    'type-empty': [2, 'never'],
    'type-enum': [2, 'always', ['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test']]
  }
}

.eslintrc.commit.json 文件

{
    "extends": "./.eslintrc.json",
    "rules": {
        "no-console": "error",
        "no-debugger": "error",
        "no-alert": "error",
        "camelcase": "error",
        "react-hooks/exhaustive-deps": "error",
        "@typescript-eslint/no-empty-interface": "error",
        "@typescript-eslint/no-empty-function": "error",
        "@typescript-eslint/no-unused-vars": "error"
    }
}

.eslintrc.json 文件

{
  "extends": "react-app",
  "rules": {
    "no-console": "warn",
    "no-debugger": "warn",
    "no-alert": "warn",
    "camelcase": "warn",
    "react-hooks/exhaustive-deps": "error",
    "@typescript-eslint/no-empty-interface": "warn",
    "@typescript-eslint/no-empty-function": "warn",
    "@typescript-eslint/no-unused-vars": "warn"
  }
}

Commit 的格式

有一个文档对 commit 的格式要求有个描述叫约定式提交。下面就根据 Angular 规范和对应文档，看看详细的说明。

每个 commit message 包含一个 header，body 和 footer。header 有一个特殊的格式包含有 type，scope 和 subject：

这里主要引用header头部

Type

type 用于说明 commit 的类别，必须为以下类型的一种：

主要type

feat: 增加新功能

fix: 修复bug

特殊type

docs: 只改动了文档相关的内容

style: 不影响代码含义的改动，例如去掉空格、改变缩进、增删分号

build: 构造工具的或者外部依赖的改动，例如webpack，npm

refactor: 代码重构时使用

revert: 执行git revert打印的message
暂不使用type

test: 添加测试或者修改现有测试

perf: 提高性能的改动

ci: 与CI（持续集成服务）有关的改动

chore: 不修改src或者test的其余修改，例如构建过程或辅助工具的变动