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命令推送到远程仓库。

相关推荐
Cyan_RA914 小时前
写译 — 我靠!短进程优先调度算法究竟是怎么一回事?
面试·github·代码规范
jason_yang15 小时前
代码规范-3大利器 prettier eslint husky
代码规范·eslint
喝拿铁写前端3 天前
表单设计的哲学:为何我们不再用div堆出区间组件?
前端·架构·代码规范
hqxstudying4 天前
Java行为型模式---模板方法模式
java·开发语言·设计模式·代码规范·模板方法模式
mrsk5 天前
每天一个小知识点,DRY究竟是什么?
前端·面试·代码规范
帅次6 天前
系统分析师-计算机系统-计算机系统概述&存储系统
系统架构·硬件架构·软件构建·个人开发·代码规范·设计规范
怪大叔95278 天前
eslint9.0之后如何安装新版本eslint+prettier规范
前端·vue.js·代码规范
Codebee9 天前
AI驱动的低代码革命:解构与重塑开发范式
人工智能·低代码·代码规范
赋范大模型技术社区10 天前
【LangChain 实战】多智能体协作实现浏览器自动化丨Agents 运行流程丨多工具串&并联调用
架构·github·代码规范
山有木兮木有枝_11 天前
JavaScript 设计模式--单例模式
前端·javascript·代码规范