vue3+ts：约定式提交（git husky + gitHooks）

缺乏、安全感 2024-03-26 01:29 34阅读 0赞

**一、背景**

[Git - githooks Documentation][]

[https://github.com/typicode/husky\#readme][https_github.com_typicode_husky_readme]

[gitHooks: commit-msg\_snow@li的博客-CSDN博客][gitHooks_ commit-msg_snow_li_-CSDN]

之前实践过这个配置，本文在vue3 + ts 的项目中，再记录一次。

**二、使用**

**2.1、安装**

2.1.1、安装husky

pnpm add husky

2.1.2、package.json

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

2.1.3、pnpm run prepare

pnpm run prepare

执行后：

![1d52e2c7fdb840478e7e7aa48bf3e490.png][]

**2.2、初始化husky**

npx husky install .husky

执行后：

![5dbdddeed9c64470aea596a5368bf158.png][]

**2.3、package.json**

"gitHooks": {
        "pre-commit": "lint-staged",
        "commit-msg": "node scripts/verify-commit-msg.js"
      }

**2.4、安装chalk，vue3+ts使用4.X版本**

pnpm add chalk@4.1.2

**2.5、/scripts/verify-commit-msg.js**

import chalk from 'chalk'; // 控制台日志标注样式
    import fs from 'fs';
    const msgPath = process.env.GIT_PARAMS || '.git/COMMIT_EDITMSG' // 读取到保存 git commit 时输入的描述信息的文件目录，一般路径如下：.git/COMMIT_EDITMSG
    const msg = fs.readFileSync(msgPath, 'utf-8').trim()
    
    const commitRE =
      /^(revert: )?(wip|release|feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types|build)($.+$)?: .{1,50}/
    
    if (!commitRE.test(msg)) {
      console.log()
      console.error(
        `  ${chalk.bgRed.white(' ERROR ')} ${chalk.red(
          `invalid commit message format.`
        )}\n\n` +
          chalk.red(
            `  Proper commit message format is required for automated changelog generation. Examples:\n\n`
          ) +
          `    ${chalk.green(`feat(compiler): add 'comments' option`)}\n` +
          `    ${chalk.green(
            `fix(v-model): handle events on blur (close #28)`
          )}\n\n` +
          chalk.red(`  See .github/COMMIT_CONVENTION.md for more details.\n`)
      )
      process.exit(1)
    }

**2.6、添加一个commit msg钩子**

npx husky add .husky/commit-msg "node scripts/verify-commit-msg.js"

![4539afe0d785451da75da69277144d62.png][]

**2.7、测试提交**

不规范示例：

![211e45bc570241d49923e82cb945d70f.png][]

规范示例：

经测试提交成功。

![f2a41cfdc73349fb9f1942829f79cad7.png][]

**过程记录：**

**记录一、**

![4cc03bdba2b048158d58fb8860cff2d2.png][]

![5ed546aabb1047879e4b99c9788dc22e.png][][ReferenceError require is not defined in ES module scope, you can use import instead\_绘绘～的博客-CSDN博客][ReferenceError require is not defined in ES module scope_ you can use import instead_-CSDN]

**记录二、**

const msgPath = process.env.GIT\_PARAMS

const msgPath = process.env.GIT\_PARAMS || '.git/COMMIT\_EDITMSG'

GIT\_PARAMS没有读到目录，本文使用静态目录，待后续研究。

**记录三、**

引入chalk、fs需要使用import，使用require报错

**记录四、 git 钩子**

[Git - githooks Documentation][]

![a8acebc5ae62f9e3c096df0446baa89c.jpeg][]

**参考链接：**

[Git钩子 GitHook - 简书][Git_ GitHook -]

[husky的使用 - 简书][husky_ -]

[VUE 3.0 源码 scripts/verifyCommit.js 文件 对git提交时输入的描述信息进行规范\_git\_params\_老罗-laoluo的博客-CSDN博客][VUE 3.0 _ scripts_verifyCommit.js _ _git_git_params_-laoluo_-CSDN]

[ReferenceError require is not defined in ES module scope, you can use import instead\_绘绘～的博客-CSDN博客][ReferenceError require is not defined in ES module scope_ you can use import instead_-CSDN]

[Vue3项目工程化配置：Prettier + Eslint + husky + commitlint - 点击领取][Vue3_Prettier _ Eslint _ husky _ commitlint -]

[vite vue3 规范化与Git Hooks详解\_vue.js\_脚本之家][vite vue3 _Git Hooks_vue.js]

[https://www.cnblogs.com/heyhaiyang/p/15256588.html][https_www.cnblogs.com_heyhaiyang_p_15256588.html]

[前端工程规范化-eslint、stylelint、prettier、git hooks\_51CTO博客\_前端模块化规范][-eslint_stylelint_prettier_git hooks_51CTO]

[【Vue3】标准化大厂编程规范解决方案之ESLint + Git Hooks\_51CTO博客\_vue3 生产][Vue3_ESLint _ Git Hooks_51CTO_vue3]

[Git commit 消息的格式与约定式提交\_哔哩哔哩\_bilibili][Git commit _bilibili]

[vite vue3 规范化与Git Hooks][vite vue3 _Git Hooks]

[Vue3 + Vite 前端工程化-基础篇 - 知乎][Vue3 _ Vite _-_ -]

[Git - githooks Documentation]: https://git-scm.com/docs/githooks
[https_github.com_typicode_husky_readme]: https://github.com/typicode/husky#readme
[gitHooks_ commit-msg_snow_li_-CSDN]: https://blog.csdn.net/snowball_li/article/details/121850069
[1d52e2c7fdb840478e7e7aa48bf3e490.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2fd19c81b83d42d3b969cf8221d10e55.png
[5dbdddeed9c64470aea596a5368bf158.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/39f0b73616044652bcb850b02f302395.png
[4539afe0d785451da75da69277144d62.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4596f80f76a74e3fbe72ec38bbdb1ba7.png
[211e45bc570241d49923e82cb945d70f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5644bbcaa0db41529bef69f73ce43ecf.png
[f2a41cfdc73349fb9f1942829f79cad7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8a7916127faf49c89682ff5ed0b77438.png
[4cc03bdba2b048158d58fb8860cff2d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/415351b8462a42738f54650631c70a73.png
[5ed546aabb1047879e4b99c9788dc22e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1b6f1bc6baf04e7aa83a9869f89c1342.png
[ReferenceError require is not defined in ES module scope_ you can use import instead_-CSDN]: https://blog.csdn.net/m0_51126511/article/details/127883038
[a8acebc5ae62f9e3c096df0446baa89c.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/835ad2c34617401ab4ce4f42bdfd276e.png
[Git_ GitHook -]: https://www.jianshu.com/p/f2a3936947a1
[husky_ -]: https://www.jianshu.com/p/4da42c9b4cf1
[VUE 3.0 _ scripts_verifyCommit.js _ _git_git_params_-laoluo_-CSDN]: https://blog.csdn.net/roywang6/article/details/122018800
[Vue3_Prettier _ Eslint _ husky _ commitlint -]: https://www.dianjilingqu.com/217969.html
[vite vue3 _Git Hooks_vue.js]: https://www.jb51.net/article/265070.htm
[https_www.cnblogs.com_heyhaiyang_p_15256588.html]: https://www.cnblogs.com/heyhaiyang/p/15256588.html
[-eslint_stylelint_prettier_git hooks_51CTO]: https://blog.51cto.com/u_15127597/4360100?articleABtest=0
[Vue3_ESLint _ Git Hooks_51CTO_vue3]: https://blog.51cto.com/u_14184703/5672254?u_atoken=ca95e324-84a1-41ae-a45a-ff230cd51fec&u_asession=015W7uPdwzc-pBhfrDdDaeQfjiyUeb9u2qhHW1q_qqBJkpHDgiArXh2Ywfjwy8d7H3X0KNBwm7Lovlpxjd_P_q4JsKWYrT3W_NKPr8w6oU7K_eYANGuh8LG8-IV-rAH4QVVFjc8Hwf80_Hj71oftrFFWBkFo3NEHBv0PZUm6pbxQU&u_asig=05wanIMMdgd47zVbFsycM4GxBC7Kj9IhMEpSUCLBcvFaiecE-EewPv_Ii2Hs3aRi_TgGYRpgEYKF2n9i6jNMPVnAnQS08ORocssUGxkGy9_5dS3vZB4hKy9athlpFiHl64NsTaEwdoE3k8QHMoW144PxG-D84QSNA0mkDBhb0ULDv9JS7q8ZD7Xtz2Ly-b0kmuyAKRFSVJkkdwVUnyHAIJzdxJ5ZebmOF3TYFXj0wMVXpQLG5CrYlBH0bhMUH69jfCSj27OMyLB1WOd1YIQRc8zO3h9VXwMyh6PgyDIVSG1W8FiFuFEjEWEPkgegue97TCaIWP5L_LncI-7YJZfHhFoZEQVUhJ-yxBIpQyavLGz3KqJSyihXNtRBFce3_rpsmomWspDxyAEEo4kbsryBKb9Q&u_aref=J%2FtdNmiyE3m%2BSdUDvAqVQDVN3SQ%3D
[Git commit _bilibili]: https://www.bilibili.com/video/BV1CL4y1P7eh/?spm_id_from=333.337.search-card.all.click&vd_source=704e2597123fc066b03283e82eb866c0
[vite vue3 _Git Hooks]: https://www.bbsmax.com/A/Vx5MmaNY5N/
[Vue3 _ Vite _-_ -]: https://zhuanlan.zhihu.com/p/428909652