Vue前端工程化之代码规范——husky校验、commitizen和standard-version

Vue前端工程化之代码规范------husky校验和git提交规范

统一代码规范有助于促进团队合作、提高效率,便于后期的维护。以下是我在日常工作中的实践方案,供大家参考。

  • 使用husky在提交代码时借助 git 提供的钩子对代码进行检测
  • 提交之前通过eslintprettier进行代码校验和格式化
  • 使用commitizenstandard-version规范化提交信息并且生成 changelog

以Vue3项目为例,假设你已经通过 vite 创建了一个vue3项目。

一、husky配置

安装husky: pnpm add -D husky

husky初始化,执行命令后会自动创建 .husky/_/pre-commit: pnpm dlx husky-init

pre-commit文件内容如下:

bash 复制代码
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

echo "\033[33m ------------------- 正在执行eslint校验 -------------------- \033[0m"
pnpm lint

pnpm lint可以替换成 package.json 中 script 配置的命令,在 git 提交时会触发 husky ,就会执行该命令。

继续通过命令添加 commit-msg文件: npx husky add .husky/commit-msg 'npx --no-install commitlint --edit ${1}'

如果想让 npx 强制使用本地模块,不下载远程模块,可以使用--no-install参数。如果本地不存在该模块,就会报错。反过来,如果忽略本地的同名模块,强制安装使用远程模块,可以使用--ignore-existing参数。

执行完命令后会发现多了 commit-msg 文件,与 pre-commit 同级,文件内容可修改如下:

bash 复制代码
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

echo "\033[33m ------------------- 正在校验提交信息格式 -------------------- \033[0m"
npx --no-install commitlint --edit ${1}

后续会通过这个文件内的内容,来校验 git 提交时的 message 信息是否符合规范。

二、commitizenstandard-version 配置

pnpm add -D @commitlint/config-conventional @commitlint/cli

由于目前 vite 需要 esm,所以我们不能以 cjs 形式直接在目录下创建 commitlint 配置文件。我们可以在 package.json里进行配置,具体规则可以自行修改:

css 复制代码
  "commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ],
    "rules": {
      "header-max-length": [
        2,
        "always",
        108
      ],
      "type-empty": [
        2,
        "never"
      ],
      "type-enum": [
        2,
        "always",
        [
          "feat",
          "fix",
          "init",
          "docs",
          "style",
          "refactor",
          "perf",
          "test",
          "revert",
          "build",
          "chore",
          "ci"
        ]
      ]
    }
  }

安装 commitizen: pnpm add --D commitizen

初始化:

pnpx commitizen init cz-conventional-changelog --pnpm --save-dev --save-exact

执行完 package.json 里会多出:

json 复制代码
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },

在 package.json 的 scripts 里添加一条脚本命令: "commit": "git add . && git-cz" 添加完成后,后续当你执行 pnpm commit 的时候,会自动帮你执行 git add . 和 git-cz 命令。

继续安装 standard-version: pnpm add --D standard-version

在 package.json 的 scripts 里添加一条脚本命令: "release": "standard-version"

默认情况下,standard-version 只会在 CHANGELOG.md 中记录 featfix 类型的提交。如果想记录其他类型的提交,需要如下步骤:

  • 在项目的根目录下创建一个名为 .versionrc 的文件,并粘贴复制以下内容:
swift 复制代码
{
  "header": "# 更新记录 \n\n",
  "types": [
    { "type": "feat", "section": "✨ Features | 新功能" },
    { "type": "fix", "section": "🐛 Bug Fixes | Bug 修复" },
    { "type": "init", "section": "🎉 Init | 初始化" },
    { "type": "docs", "section": "📝 Documentation | 文档" },
    { "type": "style", "section": "💄 Styles | 风格", "hidden": true },
    { "type": "refactor", "section": "♻️ Code Refactoring | 代码重构" },
    { "type": "perf", "section": "⚡ Performance Improvements | 性能优化" },
    { "type": "test", "section": "✅ Tests | 测试" },
    { "type": "revert", "section": "⏪ Revert | 回退", "hidden": true },
    { "type": "build", "section": "📦‍ Build System | 打包构建" },
    { "type": "chore", "section": "🚀 Chore | 部署相关" },
    { "type": "ci", "section": "👷 Continuous Integration | CI/CD 配置" }
  ]
}

至此,全部配置已经完成。

在日常开发中,当更新完代码之后准备推送仓库时,先执行 pnpm commit ,根据提示完成提交信息的填写,然后会进行代码格式校验和提交信息校验,检验通过之后,执行pnpm release进行 CHANGELOG 的更新以及版本发布,最后再通过git push命令推送到远程仓库。

相关推荐
肖笙XiaoSheng1 天前
使用Gemini2.5 pro 优化我的定时任务(二)
java·后端·代码规范
代码怀疑人生11 天前
将 R2DBC 查询结果映射到具有数组 postgresql 类型的列的行
代码规范
断竿散人11 天前
🛡️CSS样式污染防护终极指南:企业级CSS隔离与零冲突方案
前端·css·代码规范
颜漠笑年12 天前
看看DeepSeek是如何实现前端日历组件的?
前端·html·代码规范
CRMEB定制开发13 天前
CRMEB 代码规范指南:ThinkPHP6+Uni-app 架构下的开发标准
uni-app·商城系统·代码规范·微信商城·crmeb
Dream耀13 天前
手写 JavaScript 的 new 操作符:从空对象到完整实例的诞生过程
前端·面试·代码规范
喝拿铁写前端14 天前
前端 Emoji 注释规范实践:VSCode 插件 Emoji 注释增强器分享
前端·开源·代码规范
洛小豆14 天前
她问我Pinia两种Store定义方式,到底选哪种写法,我说我也不知道...
前端·vue.js·代码规范
用户05956611920916 天前
Java 17 + 特性与现代开发技术实操应用详解
java·机器学习·代码规范
Larva16 天前
记录使用 SwiftLint检测代码内的硬编码字符串
ios·swift·代码规范