前端工程化--commit代码校验配置

最新推荐文章于 2024-08-01 11:09:13 发布

qq_33712668

最新推荐文章于 2024-08-01 11:09:13 发布

阅读量3.0k

点赞数

分类专栏：前端工程化文章标签：工程化 commitlint husky git git钩子

本文链接：https://blog.csdn.net/qq_33712668/article/details/97259151

版权

前端工程化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

需求

配置使得在git commit -m 'xxxx’时，先执行1. eslint检测 2.commit规范检测，两个条件通过后才commit成功，才可以push代码。是前端工程化的一部分，使得代码及commit更加规范

commitlint

commitlint: 可以帮助我们 lint commit messages, 如果提交的不符合指向的规范, 拒绝提交
需要一份校验的配置, 这里推荐 @commitlint/config-conventional (符合 Angular团队规范).
安装:

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

同时需要在项目目录下创建配置文件 .commitlintrc.js, 写入:

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

rules可以自己设置团队规范，我没设，用的angular团队规范

husky

commitlint配置完成后还要配置husky。husky是git的hook（钩子）工具

【git钩子】
就像vue的生命周期钩子函数，Git 能在特定的重要动作发生时触发自定义脚本。有两组这样的钩子：客户端的和服务器端的。客户端钩子由诸如提交和合并这样的操作所调用，而服务器端钩子作用于诸如接收被推送的提交这样的联网操作。
【提交钩子有】：（后面会有详细解释）
pre-commit
prepare-commit-msg
commit-msg
post-commit

前端则可以用插件husky来使钩子生效。
安装

npm install husky --save

配置
在package.json中配置

  "husky": {
    "hooks": {
      "commit-msg": "commitlint -e $GIT_PARAMS"
    }
  }

这段配置的意思是：在’commit-msg’这个钩子内获取commit里的内容进行commitlint检测，如果果该钩子脚本以非零值退出，Git 将放弃提交
此时我如果提交不符合规范的commit，结果如下

$ git commit -m "测试 commitlint"
husky > commit-msg (node v10.13.0)

⧗   input: 
测试 commitlint

✖   message may not be empty [subject-empty]
✖   type may not be empty [type-empty]
✖   found 2 problems, 0 warningshusky > commit-msg hook failed (add --no-verify to bypass)

可以看到如果不按照规范书写commit的日志会提示报错

下面输入正确的commit 日志信息：注意冒号后面要留空格，下面有介绍具体的编辑规范信息

$ git commit -m "feat(): 添加commitlint"
husky > commit-msg (node v10.13.0)

⧗   input: feat(): 添加commitlint
✔   found 0 problems, 0 warnings[master 7a5bc00] feat(): 添加commitlint
 4097 files changed, 219349 insertions(+)
 create mode 100644 commitlint.config.js
 create mode 120000 node_modules/.bin/JSONStream
 create mode 120000 node_modules/.bin/commitlint
 create mode 120000 node_modules/.bin/conventional-commits-parser

下面就可以push了

新需求

按理来说这样已经成功了，但希望commitlint检测失败后有提示后再退出。比如如下效果
在这里插入图片描述
那就需要对husky的配置进行修改，修改涉及到shell脚本知识

  "husky": {
    "hooks": {
      "commit-msg": "commitlint -e $GIT_PARAMS || (node scripts/pre-commit.js&&exit 8)"
    }
  }

对于shell1||shell2，只有在shell1执行失败时，shell2才会执行，否则shell2是不执行的
所以以上配置的意思是commitlint -e $GIT_PARAMS失败时，执行
(node scripts/pre-commit.js&&exit 8)
即执行package.json所在文件夹下的scripts/pre-commit.js文件后退出
详细shell见shell中&&和||的使用方法
项目目录如下
在这里插入图片描述
pre-commit.js文件内容如下，要npm install chalk --save，引入chalk模块，作用是为了让console出来的有颜色。。。

const chalk = require('chalk');
console.log(
  chalk.red(`commit格式错误，正确示例：git commit -m 'fix: 修复bug'`),
  chalk.green(` 
  type （只允许下列7个标识）：
  feat：新功能（feature）
  fix：修补bug
  docs：文档（documentation）
  style： 格式（不影响代码运行的变动）
  refactor：重构（即不是新增功能，也不是修改bug的代码变动）
  test：增加测试
  chore：构建过程或辅助工具的变动
  `)
)

这样就配置完成了，可以达到效果了

加上eslint

完成后，又希望提交的代码都符合eslint规范，如果不符合规范不能提交，所以在pre-commit钩子里加上eslint检查，配置如下,执行npm run lint

  "husky": {
    "hooks": {
      "pre-commit": "npm run lint",
      "commit-msg": "commitlint -e $GIT_PARAMS || (node scripts/pre-commit.js && exit 8)"
    }
  }

这样就配置完了
eslint检测不通过提交不了，要想解决eslint错误可以看解决eslint报错

git钩子详解

刚才用到了pre-commit, commit-msg，解释如下，有点像vue的生命周期钩子函数，在提交前依次执行，我这里把eslint检查放在pre-commit里，commitlint检查放commit-msg里
具体：自定义 Git - Git 钩子
pre-commit 钩子在键入提交信息前运行。它用于检查即将提交的快照，例如，检查是否有所遗漏，确保测试运行，以及核查代码。如果该钩子以非零值退出，Git 将放弃此次提交，不过你可以用 git commit --no-verify 来绕过这个环节。你可以利用该钩子，来检查代码风格是否一致（运行类似 lint 的程序）、尾随空白字符是否存在（自带的钩子就是这么做的），或新方法的文档是否适当。

prepare-commit-msg 钩子在启动提交信息编辑器之前，默认信息被创建之后运行。它允许你编辑提交者所看到的默认信息。该钩子接收一些选项：存有当前提交信息的文件的路径、提交类型和修补提交的提交的 SHA-1 校验。它对一般的提交来说并没有什么用；然而对那些会自动产生默认信息的提交，如提交信息模板、合并提交、压缩提交和修订提交等非常实用。你可以结合提交模板来使用它，动态地插入信息。

commit-msg 钩子接收一个参数，此参数即上文提到的，存有当前提交信息的临时文件的路径。如果该钩子脚本以非零值退出，Git 将放弃提交，因此，可以用来在提交通过前验证项目状态或提交信息。在本章的最后一节，我们将展示如何使用该钩子来核对提交信息是否遵循指定的模板。

post-commit 钩子在整个提交过程完成后运行。它不接收任何参数，但你可以很容易地通过运行 git log -1 HEAD 来获得最后一次的提交信息。该钩子一般用于通知之类的事情。