凡人多烦事01

这个屌丝很懒，什么也没留下！

热门标签

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

作者：凡人多烦事01 | 2024-05-20 23:38:04

踩

git pre-commit

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

安装 lint-staged 和 husky

npm i lint-staged husky -D
1

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

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

package.json

{
  "scripts": {
    "prepare": "husky install"
  }
}
1
2
3
4
5

添加 `pre-commit` hooks

运行以下命令创建git hooks

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

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

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

npm run lint

1
2
3
4
5

然后我们可以在 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"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

这样在执行 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>
1

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

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

安装配置commitlint

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

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"
  }
},
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

根目录添加 .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']]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

.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"
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

.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"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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的其余修改，例如构建过程或辅助工具的变动

Scope

scope 用于说明 commit 影响的范围，当影响的范围有多个时候，可以使用 *。

Subject

subject 用于对 commit 变化的简洁描述：

使用祈使句，一般以动词原形开始，例如使用 change 而不是 changed 或者 changes
第一个字母小写
结尾不加句号（.）

注意：git commit -m “feat: messge”,用双引号, 此次提交的简要描述，必须在 type 后面冒号之后的一个空格之后，结尾没有句号。

失败的案例:
在这里插入图片描述

成功的案例：

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/599889