美文网首页
无星的前端之旅(二十三)—— 手把手教你配置git hook

无星的前端之旅(二十三)—— 手把手教你配置git hook

作者: 无星灬 | 来源:发表于2021-07-17 14:40 被阅读0次

    背景

    要求对gitmessage做限制,要求要以

    ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'revert', 'types']:

    做开头标记

    思路

    git存在hook,在每个步骤后面都会执行对应的🪝

    因此我们可以考虑通过git hook去完成这项校验

    实际上,在平时的开发过程中,就已经有于此相关的内容了,就是不知道同学们留意到没有

    举个🌰

    比如在Vue项目中,如果在创建项目中,选择了eslint,并选择了保存并格式化

    1.png

    在进行git commit时,代码会自动做一次格式化。

    究其原因,实际上是来自Vue的默认配置

    2.png

    那么Vue是怎么做的,实际上,翻开文档,我们能够找到相关内容

    git-hook

    实际上是尤🌧️溪 fork 了 husky,稍做改造形成了yorkie

    但是我们可以看到,yorkie已经很久没有更新了,并且没有文档,想要直接使用yorkie是比较困难的

    因此我们回到最初的库,husky

    husky

    husky本身也是一个久负盛名的库,专注于git hook

    那么就让我们来集成它,完成我们的需求

    集成

    npx husky-init && npm install       # npm
    npx husky-init && yarn              # Yarn 1
    yarn dlx husky-init --yarn2 && yarn # Yarn 2
    

    集成以后,项目依赖会添加husky,且项目根目录下会添加.husky文件夹

    编写hook

    .husky文件夹下,默认添加了一个pre-commithook文件

    pre-commit

    我们可以先将Vue的默认配置转移进去

    pre-commit

    #!/bin/sh
    . "$(dirname "$0")/_/husky.sh"
    
    npm run lint
    git add .
    

    然后移除package.json中的gitHooks属性

    新增其他hook

    npx husky add [fileName]
    # 如果没有其他config上的变动,可以理解为照着如下写法写
    # npx husky add .husky/hooks名称
    

    举个🌰

    npx husky add .husky/commit-msg
    

    git hooks名称和作用

    可能有些旁友不知道有哪些hook可以添加,我这里教大家怎么看

    • git 文档

    • 直接查看.git文件夹中hooks内容

    3.png

    完成需求

    1.添加commit-msg

    npx husky add .husky/commit-msg
    

    2.正则编写

    commit-msg内容:

    #!/bin/sh
    . "$(dirname "$0")/_/husky.sh"
    
    MSG=`awk '{printf("%s",$0)}' $1`
    echo $MSG
    if [[ $MSG =~ ^(feat|fix|docs|style|refactor|perf|test|build|ci|revert|types):.*$ ]]
    then
        echo '成功'
    else
        echo '失败'
    fi
    

    额外内容

    不够保险

    因为上述行为的hook是在项目中做的

    换句话说是在开发成员的本地电脑上做的

    一旦开发人员不爽,把hook删了,那就无从约束

    所以更保险的方式,应该是由git平台上去做检测

    仅测试hook

    可以在hook文件的最后添加

    exit 1
    

    会中止本次git行为

    test-hooks

    commitlint

    commitlint,见名知意,commit内容的lint

    我们可以使用其中的风格和工具做拓展

    比如我们这里选择集成如下工具和风格

    @commitlint/cli
    @commitlint/config-conventional
    

    如果需要达成上述需求,我们可以这么做

    • 根目录下新建commitlint.config.js文件
    module.exports = {
      extends: ['@commitlint/config-conventional'],
      rules: {
        'type-enum': [
          2,
          'always',
          ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'revert', 'types'],
        ],
      },
    }
    
    
    • commit-msg内容
    #!/bin/sh
    . "$(dirname "$0")/_/husky.sh"
    
    npx commitlint --edit $1
    
    

    Done

    相关文章

      网友评论

          本文标题:无星的前端之旅(二十三)—— 手把手教你配置git hook

          本文链接:https://www.haomeiwen.com/subject/tvjwpltx.html