天天提交代码,git commit 提交时能规范一下吗?

简介: 接下来我就来实践一下,首先我这里使用的是pnpm安装依赖的。今天主要是在提交代码时稍微自动化一点,并且让提交规范统一一些。

image.png


前言:大家好,我是 那个曾经的少年回来了。10年前我也曾经年轻过,如今已步入被淘汰的年龄,但如下幡然醒悟,所以活在当下,每天努力一点点,来看看2024年的时候自己会是什么样子吧,2024年的前端又会是什么样子,而2024年的中国乃至全球又会变成什么样子,如果你也有想法,那还不赶紧行动起来。期待是美好的,但是更重要的是要为美好而为之奋斗付诸于行动。


1、前言


写好git commit提交有什么好处呢?


  • 查看提交的log也非常的优雅,这个就不多提了


  • 方便查找日志记录,通过简单的过滤便能定位到具体想要查找的log


  • 方便问题回溯,通过git log就能查找到当时提交的代码文件,以及修改的代码


  • 其实如果使用过github的release, 可以直接根据feat和fix来过滤提取日志发布版本


接下来我就来实践一下,首先我这里使用的是pnpm安装依赖的。今天主要是在提交代码时稍微自动化一点,并且让提交规范统一一些。


具体操作的源码项目 github.com/aehyok/taro…


2、commitizen插件


pnpm i commitizen -D 


此时我们先 git add .,然后就可以使用一下 git cz,所以现在可以直接在package.json中添加一个scripts


// && 代表`git add .和 `git cz` 两个指令串行执行,
// 先执行前一个,执行完后再执行后一个
"git": "git add . && git cz"


那么接下来直接执行  pnpm git


image.png


输入commit的提交信息,保存,关闭小窗,因为我这里用的是gitExtensions图形操作程序,随后git push提交即可,但是这样其实只是换了一个命令而已,并没有什么实质性的改变。那接下来就让它改变一下吧


3、cz-customizable设置提交模板


pnpm i cz-customizable -D


安装完之后在package.json中添加如下节点


"config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  },


同时可以再根目录创建.cz-config.js,这里有一份官网提供的模板 github.com/leoforfree/…


下面这个是我自己修改后的提交模板


module.exports = {
  // type 类型(定义之后,可通过上下键选择)
  types: [
    { value: 'feat', name: 'feat:     新增功能' },
    { value: 'fix', name: 'fix:      修复 bug' },
    { value: 'docs', name: 'docs:     文档变更' },
    {
      value: 'style',
      name: 'style:    代码格式(不影响功能,例如空格、分号等格式修正)'
    },
    {
      value: 'refactor',
      name: 'refactor: 代码重构(不包括 bug 修复、功能新增)'
    },
    { value: 'perf', name: 'perf:     性能优化' },
    { value: 'chore', name: 'chore:     其他修改, 比如构建流程, 依赖管理、版本好修正.' }
  ],
  // scope 类型(定义之后,可通过上下键选择)
  scopes: [
    ['components', '组件相关'],
    ['hooks', 'hook 相关'],
    ['utils', 'utils 相关'],
    ['element-ui', '对 element-ui 的调整'],
    ['styles', '样式相关'],
    ['deps', '项目依赖'],
    ['auth', '对 auth 修改'],
    ['other', '其他修改'],
    // 如果选择 custom,后面会让你再输入一个自定义的 scope。也可以不设置此项,把后面的 allowCustomScopes 设置为 true
    ['custom', '以上都不是?我要自定义']
  ].map(([value, description]) => {
    return {
      value,
      name: `${value.padEnd(30)} (${description})`
    }
  }),
  // 是否允许自定义填写 scope,在 scope 选择的时候,会有 empty 和 custom 可以选择。
  // allowCustomScopes: true,
  // allowTicketNumber: false,
  // isTicketNumberRequired: false,
  // ticketNumberPrefix: 'TICKET-',
  // ticketNumberRegExp: '\\d{1,5}',
  // 针对每一个 type 去定义对应的 scopes,例如 fix
  /*
    scopeOverrides: {
      fix: [
        { name: 'merge' },
        { name: 'style' },
        { name: 'e2eTest' },
        { name: 'unitTest' }
      ]
    },
    */
  // 交互提示信息
  messages: {
    type: '确保本次提交遵循:前端代码规范!\n选择你要提交的类型:',
    scope: '\n选择一个 scope(可选):',
    // 选择 scope: custom 时会出下面的提示
    customScope: '请输入自定义的 scope:',
    subject: '填写简短精炼的变更描述:\n',
    body: '填写更加详细的变更描述(可选)。使用 "|" 换行:\n',
    breaking: '列举非兼容性重大的变更(可选):\n',
    footer: '列举出所有变更的 ISSUES CLOSED(可选)。 例如: #31, #34:\n',
    confirmCommit: '确认提交?'
  },
  // 设置只有 type 选择了 feat 或 fix,才询问 breaking message
  allowBreakingChanges: ['feat', 'fix'],
  // 跳过要询问的步骤
  skipQuestions: ['scope', 'body', 'breaking', 'footer'],
  subjectLimit: 100, // subject 限制长度
  breaklineChar: '|' // 换行符,支持 body 和 footer
  // footerPrefix : 'ISSUES CLOSED:'
  // askForBreakingChangeFirst : true,
}


运行 pnpm git


image.png


根据指引提示,然后输入提交信息,推送到服务器就完成了,查看git log可以发现


image.png


4、总结


其实还可以将脚本修改一下


"git": "git add . && git cz && git push"


这样三个指令会串行执行,一个接着一个执行,如果提交没什么问题的话,很自然就推送到远端了。


我的个人博客:vue.tuokecat.com/blog

我的个人github:github.com/aehyok

我的前端项目:pnpm + monorepo + qiankun + vue3 + vite3 + 工具库、组件库 + 工程化 + 自动化

不断完善中,整体框架都有了

在线预览:vue.tuokecat.com

github源码:github.com/aehyok/vue-…

目录
相关文章
|
3月前
|
IDE 网络安全 开发工具
【Azure App Service】Local Git App Service的仓库代码遇见卡住不Clone代码的问题
【Azure App Service】Local Git App Service的仓库代码遇见卡住不Clone代码的问题
【Azure App Service】Local Git App Service的仓库代码遇见卡住不Clone代码的问题
|
1月前
|
开发工具 git
git如何修改提交代码时的名字和邮箱?
git如何修改提交代码时的名字和邮箱?
59 4
|
1月前
|
Java Linux 开发工具
IDEA中git提交前如何关闭code analysis以及开启格式化代码
【10月更文挑战第12天】本文介绍了在 IntelliJ IDEA 中关闭代码分析和开启代码格式化的步骤。关闭代码分析可通过取消默认启用检查或针对特定规则进行调整实现,同时可通过设置 VCS 静默模式在提交时跳过检查。开启代码格式化则需在 `Settings` 中配置 `Code Style` 规则,并通过创建 Git 钩子实现提交前自动格式化。
213 3
|
2月前
|
开发工具 git
GIT:如何合并已commit的信息并进行push操作
通过上述步骤,您可以有效地合并已提交的信息,并保持项目的提交历史整洁。记得在执行这些操作之前备份当前工作状态,以防万一。这样的做法不仅有助于项目维护,也能提升团队协作的效率。
147 4
|
2月前
|
Shell 网络安全 开发工具
git与gitee结合使用,提交代码,文件到远程仓库
本文介绍了如何将Git与Gitee结合使用来提交代码文件到远程仓库。内容涵盖了Git的安装和环境变量配置、SSH公钥的生成和配置、在Gitee上创建仓库、设置Git的全局用户信息、初始化本地仓库、添加远程仓库地址、提交文件和推送到远程仓库的步骤。此外,还提供了如何克隆远程仓库到本地的命令。
git与gitee结合使用,提交代码,文件到远程仓库
|
1月前
|
JavaScript 前端开发 开发工具
一身反骨的我,用--no-verify绕开了git代码提交限制!
【10月更文挑战第7天】一身反骨的我,用--no-verify绕开了git代码提交限制!
104 0
|
2月前
|
开发工具 git
GIT:如何合并已commit的信息并进行push操作
通过上述步骤,您可以有效地合并已提交的信息,并保持项目的提交历史整洁。记得在执行这些操作之前备份当前工作状态,以防万一。这样的做法不仅有助于项目维护,也能提升团队协作的效率。
242 3
|
3月前
|
消息中间件 小程序 Java
【规范】看看人家Git提交描述,那叫一个规矩
本文通过IDEA中的Git描述规范插件【git commit message helper】,介绍了Git提交描述的规范流程,强调了团队开发中统一标准的重要性,并通过实例展示了规范的提交记录如何提高代码管理和维护效率。最后,文章提供了几个实用的Git提交描述案例,帮助读者更好地理解和应用这些规范。
68 0
【规范】看看人家Git提交描述,那叫一个规矩
|
3月前
|
敏捷开发 小程序 持续交付
【规范】Git分支管理,看看我司是咋整的
本文介绍了Git分支管理规范的重要性及其在企业中的应用。通过规范化的分支管理,可加速团队协作、确保代码质量、维护主分支稳定,并支持敏捷开发。文中详细描述了主分支(如master、develop)和辅助分支(如feature、hotfix)的作用,并提供了实际开发流程示例,包括开发前、开发中、提测、预生产和部署上线等阶段的操作方法。旨在帮助团队提高效率和代码质量。
171 0
【规范】Git分支管理,看看我司是咋整的
|
3月前
|
测试技术 持续交付 开发工具
[译] 为何每次 Git Commit 要尽可能小?
[译] 为何每次 Git Commit 要尽可能小?