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

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

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

使用husky在提交代码时借助 git 提供的钩子对代码进行检测
提交之前通过eslint和prettier进行代码校验和格式化
使用commitizen和standard-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 信息是否符合规范。

二、commitizen 和 standard-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 中记录 feat 和 fix 类型的提交。如果想记录其他类型的提交，需要如下步骤：

在项目的根目录下创建一个名为 .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命令推送到远程仓库。