前端提交信息规范 commit规范 commitlint husky commitizen

技术同学开发中有没有出现 ：
因某种原因当需要回滚，这时候一看之前提交的massage真的乌烟瘴气 无法分辨回滚到哪次提交
当我们版本update的时候，开发了很多功能历时一个月准备上线了，领导突然过来让你整理一下这次更新details发给他，一个月内的修改你是否会有忘记的呢，小朋友
如果你使用了约定式提交 那你就不会出现这种问题

约定式提交

网站介绍
限制团队提交massage的内容 当其他同事尝试 commit -m "2023/1/11" 这样的提交内容时就会给他友好的提示不让他提交 。 通常很多人在提交 git 信息的时候，为了图方便，大多都会简单的写一些奇怪的描述，开发一时爽，维护火葬场
当你使用了提交规范也会让你的项目逼格更高一点

下面我们看下尤大大团队的vue2仓库提交是否简介明了呢，我们动手体验一把尤大大同款约定式提交

安装commitizen 及其适配器

• 安装规范化提交插件

npm install -g commitizen cz-conventional-changelog

• 配置适配器

echo ‘{ “path”: “cz-conventional-changelog” }’ > mac用户
echo { “path”: “cz-conventional-changelog” } > C:\Users\你的账号.czrc windows用户

• 至此，第一步全局安装Commitizen完成。在任何一个git仓库中运行git cz，就可以通过Commitizen来填写commit message完成提交。

你可以尝试修改一些东西然后去提交他
提交的时候别用commit -m 我们先用git cz 来感受一些东西
// 选择你的提交类型  每个类型什么意思看网站（https://www.conventionalcommits.org/zh-hans/v1.0.0）
? Select the type of change that you're committing: (Use arrow keys)
> feat:     A new feature
  fix:      A bug fix
  docs:     Documentation only changes
  style:    Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
  refactor: A code change that neither fixes a bug nor adds a feature
  perf:     A code change that improves performance
  test:     Adding missing tests or correcting existing tests
(Move up and down to reveal more choices)

// 对某些模块有影响 回车下一步
What is the scope of this change (e.g. component or file name): (press enter to skip)
// 简短描述
Write a short, imperative tense description of the change (max 90 chars):
// 长描述
Provide a longer description of the change: (press enter to skip)
// 有什么突破性的变化吗
Are there any breaking changes?
// 是否改变了issues
Does this change affect any open issues?

• 提交的类型约定式提交网站有介绍的哦
• 这里提交如果你选择了Does this change affect any open issues? 当你push之后时候会把你的与i写issues一起关闭掉

husky + commitlint 提交校验

npm 版本须大于等于 7.24.2，过低的话可能会导致下面有的命令无法使用
commitlint 结合 husky 可以在 git commit 时校验 commit 信息是否符合规范

• 安装 husky

npm i husky -D // 安装husky
npx husky install // 初始化husky
npm set-script prepare “husky install” // 写入script脚本
npx husky add .husky/pre-commit “npm test” // 创建一个hook 再commit-m 前置执行个npm 命令

在上面这些操作中创建了.husky文件夹 创建了pre-commit 文件 里面内容为npm test"
pre-commit 文件是git 的hooks 在提交之前会触发
git 的hooks官网介绍

.husky中的pre-commit文件和script中的prepare命令可以删了

• 安装 commitlint

npm i @commitlint/config-conventional @commitlint/cli -S
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit ${1}'  // 配置校验提交信息钩子
// 创建.commitlintrc.js配置文件内容如下 自定义提交内容约束
module.exports = {
// 继承的规则
extends: ["@commitlint/config-conventional"],
// 定义规则类型
rules: {
  // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
  "type-enum": [
    2,
    "always",
    [
      "feat", // 增加新功能
      "fix", // 修复 bug
      "add", // 增加代码逻辑
      "del", // 删除功能
      "update", // 更新功能
      "docs", // 文档相关的改动
      "style", // 不影响代码逻辑的改动，例如修改空格，缩进等
      "build", // 构造工具或者相关依赖的改动
      "refactor", //  代码重构
      "revert", // 撤销，版本回退
      "test", // 添加或修改测试
      "perf", // 提高性能的改动
      "chore", // 修改 src 或者 test 的其余修改，例如构建过程或辅助工具的变动
      "ci", // CI 配置，脚本文件等改动
    ],
  ],
  // subject 大小写不做校验
  "subject-case": [0], 
},
plugins: [
  {
    rules: {
      "commit-rule": ({ raw }) => {
        return [
          /^\[(feat|fix|add|del|update|docs|style|build|refactor|revert|test|perf|chore)].+/g.test(raw),
          `commit备注信息格式错误，格式为 <[type] 修改内容>，type支持${types.join(",")}`,
        ];
      },
    },
  },
],
};

上面.commitlintrc.js文件是你的自定义配置 对提交内容的约束

• 测试提交内容

修改一个文件
git add .
git commit -m "xxxx"
// 如果出现了提交信息不对恭喜你就完成了配置

如果出现了·Error [ERR_REQUIRE_ESM]: require() of ES Module·的报错 说明你的项目不支持 require 模块 将 package.json 文件 “type”: “module” 去掉

• standard-version（自动生成日志，push后会自动打tag）

  npm install standard-version --save-dev
  npm set-script release "standard-version"
  npm run release
  
  // 功能1：会自动生成changelog日志文件 这里面会记录你的的哪个版本修改新增修复了哪些功能
  // 功能2：会自动升级版本号 如果没有中大版本更新更新最后一位 如果有重大版本更新 就倒数第二位更新
  // 当你根据提示push的时候还会帮你打tag
  

至此恭喜你已经配置好提交校验了，快去试试吧

如果实在觉得麻烦的朋友可以去下载我的 vite+vue3+ts的仓库已经配置好了哦
1 安装commitizen 上面有步骤
2 下载代码 github

春节将至 小吕在杭州祝大家新年快乐 -小吕 2023-1-11

更简洁安装方案

• 在项目根目录下，运行以下命令安装必要的依赖：

npm install --save-dev @commitlint/cli @commitlint/config-conventional husky commitizen

• 在项目根目录下创建一个 .commitlintrc.js 文件，并添加以下内容：

const types = [
 "feat", // 增加新功能
 "fix", // 修复 bug
 "add", // 增加代码逻辑
 "del", // 删除功能
 "update", // 更新功能
 "docs", // 文档相关的改动
 "style", // 不影响代码逻辑的改动，例如修改空格，缩进等
 "build", // 构造工具或者相关依赖的改动
 "refactor", // 代码重构
 "revert", // 撤销，版本回退
 "test", // 添加或修改测试
 "perf", // 提高性能的改动
 "chore", // 修改 src 或者 test 的其余修改，例如构建过程或辅助工具的变动
 "ci", // CI 配置，脚本文件等改动
];

module.exports = {
 extends: ['@commitlint/config-conventional'],
 rules: {
   'type-enum': [2, 'always', types],
   'subject-case': [0],
},
plugins: [],
};

• 在 package.json 文件中添加以下内容：

{
 "scripts": {
   "commit": "git-cz"
 },
 "config": {
   "commitizen": {
     "path": "cz-conventional-changelog"
   }
 },
 "husky": {
   "hooks": {
     "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
   }
 }
}

• 运行以下命令以初始化 husky：

npx husky install

• 在 .husky 目录中创建 commit-msg 文件，并将以下内容添加到文件中：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

• 测试

git add . && git commit -m "xxxx"
如果提交失败就对了