前端提交规范 约定式提交
- 约定式提交
- 安装commitizen 及其适配器
- husky + commitlint 提交校验
- 至此恭喜你已经配置好提交校验了，快去试试吧
技术同学开发中有没有出现 ：
因某种原因当需要回滚，这时候一看之前提交的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
