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

最新推荐文章于 2025-04-28 12:04:14 发布

快雪时晴-初晴融雪

最新推荐文章于 2025-04-28 12:04:14 发布

阅读量848

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 vue.js git

本文链接：https://blog.csdn.net/snowball_li/article/details/129351690

前端专栏收录该内容

317 篇文章

订阅专栏

本文详细记录了在Vue3和TypeScript项目中如何使用husky来设置Git钩子，特别是`commit-msg`钩子，以确保提交信息遵循特定的格式。通过安装和配置husky，以及编写`verify-commit-msg.js`脚本，可以强制执行commit信息的规则，如使用`feat`,`fix`等关键字，并提供错误提示。此外，文章还提到了在配置过程中遇到的问题和解决方案。

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

一、背景

Git - githooks Documentation

https://github.com/typicode/husky#readme

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

执行后：

2.2、初始化husky

npx husky install .husky

执行后：

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"

2.7、测试提交

不规范示例：

规范示例：

经测试提交成功。

过程记录：

记录一、

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

参考链接：

Git钩子 GitHook - 简书

husky的使用 - 简书

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博客

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

vite vue3 规范化与Git Hooks详解_vue.js_脚本之家

https://www.cnblogs.com/heyhaiyang/p/15256588.html

前端工程规范化-eslint、stylelint、prettier、git hooks_51CTO博客_前端模块化规范

【Vue3】标准化大厂编程规范解决方案之ESLint + Git Hooks_51CTO博客_vue3 生产

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

vite vue3 规范化与Git Hooks

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