js前端架构Git commit提交规范

目录
  • Git commit 规范
    • 为什么要写好 Git Commit?
    • 如何写好Git Commit
    • 利用插件（commitizen）
  • Git hooks
    • 客户端 Hooks
    • 服务端 Hooks
  • 项目使用
    • Git Husky
    • link-staged

Git commit 规范

在工作中避免不了多人协作，协作避免不了有一个规范的流程，让大家有效的去合作；让项目有条不紊的进行。自然使用 git 规范进行把控也是项目中必不可少的技术了。

为什么要写好 Git Commit?

  • 提供更多的历史信息，方便快速浏览
  • 可以过滤某些commit（比如文档改动），方便快速查找信息
  # 过滤日志信息
  git log HEAD --pretty=format:%s --grep 关键字
  • 可以直接从commit生成Change log

如何写好Git Commit

业界使用比较广泛的是Angular规范

<type>(<scope>):<subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
  • 标题行：必填，描述主要修改类型和内容
  • 主要内容：描述为什么修改，做什么样的修改，以及开发的思路等等
  • 页脚注释：放 Breaking Changes 或 Closed Issuses

type | commit 类型

类型 详细介绍
feat 新功能、新特性
fix bugfix，修改问题
refactor 代码重构
docs 文档修改
style 代码格式修改，注意不是css修改
test 测试用例修改
chore 其他修改，比如构建，依赖管理

scope | commit影响的范围 比如：route、component、utils、build.....

  • subject:commit 的概述，建议符合 50/72 formatting
  • body：commit 具体修改内容，可以分为多行，建议符合50/72 formatting
  • footer：一些备注，通常是BREAKING CHANGE 或 修改的bug链接

利用插件（commitizen）

利用commitizen，提交规范的commit。

  • commitizen 用于提示用户输入或选择，生成规范的commit
  • cz-conventional-changelog 用于生成changelog
# 1. 下载cz-conventional-changelog changelog插件
npm install -g commitizen cz-conventional-changelog
# 2. package.json 配置

{
    "scripts": {
    # 以后提交commit 直接执行npm run commit
       "commit": "git-cz",
    },
    # config用来设置一些项目不怎么变化的项目配置，用户用的时候可以使用如下用法：process.env.npm_package_config_commitizen
    "config": {
      "commitizen": {
        "path": "./node_modules/cz-conventional-changelog"
      }
  }
}

# 也可以使用以下配置，配置全局变量
# 命令行中输入以下命令，配置到czrc目录下,也可以用vim编辑~/.czrc添加到文件中去{ "path": "cz-conventional-changelog"}
echo '{ "path": "cz-conventional-changelog"}' > ~/.czrc

自定义文档格式,commit用中文去写（扩展）

# 1.下载
npm install -g cz-customizable
# 2. package.json 配置
...
"config": {
  "commitizen": {
    "path": "node_modules/cz-customizable"
  },
  "cz-customizable": {
    "config": "./cz.config.js"
  }
}

# 也可以使用以下配置，配置全局变量
echo '{ "path": "cz-customizable"}' > ~/.czrc
# echo添加或vim编辑添加
vim .czrc
# 添加配置 { "path": "cz-customizable"}

# 3.创建配置文件
touch ./cz.config.js

cz.config.js

module.exports = {
  //可选类型
  types: [
    { value: 'feat', name: 'feat:   新功能' },
    { value: 'fix', name: 'fix:   修复' },
    { value: 'docs', name: 'docs:   文档变更' },
    { value: 'style', name: 'style:   代码格式(不影响代码运行的变动)' },
    {
      value: 'refactor',
      name: 'refactor:重构(既不是增加feature)，也不是修复bug'
    },
    { value: 'perf', name: 'perf:   性能优化' },
    { value: 'test', name: 'test:   增加测试' },
    { value: 'chore', name: 'chore:   构建过程或辅助功能的变动' },
    { value: 'revert', name: 'revert:   回退' },
    { value: 'build', name: 'build:   打包' },
    { value: 'revert', name: 'revert:   回退' }
  ],
  //消息步骤
  messages: {
    type: '请选择提交类型',
    customScope: '请输入修改范围(可选)',
    subject: '请简要描述提交(必填)',
    body: '请输入详细描述(可选)',
    footer: '请输入要关闭的issue(可选)',
    confirmCommit: '确认以上信息提交?(y/n)'
  },
  //跳过问题
  skipQuestion: ['body', 'footer'],
  //subject文字长度默认是
  subjectLimit: 72
}

gitmoji(趣味图标-扩展）

npm i -g gitmoji-cli
gitmoji -c # git commit 提交

Git hooks

Git 钩子（hooks）是在Git仓库中特定事件（certain points）触发后被调用的脚本

可以用git init初始化git文件，在.git/hooks下有各种钩子模版，可以用例如less prepare-commit-msg.sample查看文件，里面是一段执行脚本。

  • 客户端钩子-> 由诸如提交和合并这样的操作所调用
  • 服务端钩子-> 作用于诸如接收被推送的提交这样的联网操作

客户端 Hooks

类型 详细介绍
prepare-commit-msg commit message编辑器呼起前 default commit message创建后触发，常用于生成默认的标准化的提交说明
commit-msg 开发者编写完并确认commit message后触发，常用于校验提交说明是否标准
post-commit 整个git commit完成后触发，常用于邮件通知、提醒
applypatch-msg git am提取补丁并 应用于当前分支后，准备提交触发，常用于执行测试用例或检查缓冲区代码
pre-applypatch git am提交后触发，常用于通知、补丁、邮件推送回复（此钩子不能停止git am过程）
pre-rebase 执行git rebase命令时触发
post-rewrite 执行会替换commit的命令时触发，比如git rebase 或 git cimmit-amend
post-checkout 执行git checkout命令成功后触发，可用于生成特定文档，处理大二进制文件等
post-merge 成功完成一次merge行为后触发
pre-auto-gc 执行垃圾回收前触发

服务端 Hooks

类型 详细介绍
pre-receive 当服务端收到一个push操作请求时触发，可用于检测push的内容
update 与pre-receive相似，但当一次push想更新多个分支时，pre-receive只执行一次，而此钩子会为没一分支都执行一次
post-receive 当整个push操作完成时触发，常用于服务侧同步、通知

项目使用

Git Husky

用node实现的的快速安装git hooks的工具

// npm install husky --save-dev
// package.json
{
  "husky" : {
    "hooks": {
       "pre-commit": "npm test",
        // ......
    }
  }
}

命令行 less .git/hooks/pre-commit 查看pre-commit文件，可以看见"(dirname"(dirname "(dirname"0")/husky.sh",然后可以查看less .git/hooks/husky.sh

link-staged

只会检测暂存区的文件，不会对所有的文件进行检测，也就是说我修改一个文件，只会检测当前这个文件

 # 安装代码检测工具
 npm install prettier eslint -D
 # 安装lint-staged
 npx mrm lint-staged

{
"gitHooks": {
    "pre-commit": "lint-staged"
  },
{
  "lint-staged": {
    "*.js": "eslint --cache --fix",
    "*.{js,css,md}": "prettier --write"
  }
}

以上就是js前端架构Git commit提交规范的详细内容，更多关于js架构Git commit规范的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 详解git commit --amend 用法

    有时你提交过代码之后,发现一个地方改错了,你下次提交时不想保留上一次的记录:或者你上一次的commit message的描述有误,这时候你可以使用接下来的这个命令:git commit --amend. git功能十分强大,接下来我将讲解一下git commit --amend命令的用法~ git log之后,可以看到你之前提交过的git历史: ​ 接下来,在bash里输入wq退出log状态,执行: $ git commit --amend 这时bash里会出现以下内容: ​ 其中,second

  • 关于Idea使用git时commit特别慢的问题及解决方法

    使用idea提交代码到本地git仓库时,可能会出现提交速度特别慢的情况,因为是本地提交,所以可以排除网络原因,那就有可能是电脑性能问题,一般生产力工具也不是说换就换的,主要是各种配置和环境需要重新搭建,所以换电脑对程序员来说成本还是很高的. 话不多说,先看一下最常见的情况: 出现Performing Code Analysis-字样,说明idea在进行提交代码前的分析,这个过程对于性能较差的电脑来说,一般是非常耗时的,那么我们可以在提交页面,通过简单的设置来进行解决: 如图,只要将上面两个选项前

  • Git commit --amend 修改提交信息操作

    amend翻译成中文:修改 1.修改还未push的提交 //修改最近一次提交 git commit --amend //进入注释页面,进行修改 //修改后保存退出 2.修改已经push的提交 //修改最近一次提交 git commit --amend //进入注释页面,进行修改 //修改后保存退出 //强制推送 git push --force-with-lease origin master 补充知识:git 使用amend补上遗漏文件 适用场景:上一次提交遗漏了一些文件,需要补交,但不想多一

  • 关于IDEA git 只有Commit没有Push的问题

    关于IDEA git 只有Commit没有Push的问题

    最近发现一个问题,是关于IDEA的一些骚操作的事儿~ 具体怎么回事,一起来看看. 我们都知道使用git分布式版本控制工具,提.拉 代码都会有一个本地暂存区,也就是本地仓. 这也就说我们的Commit提交到的是我们的本地仓库,Push才会推送到远程分支.那么我的IDEA快捷操作至少要有下图中的这三个快捷操作按钮 但是我同事新装的IDEA只有Update.和Commit 如下图:point_down: 怎么设置为有Push图标或者没有呢? File->Settings->Menus and Too

  • Git撤销已经推送(push)至远端仓库的提交(commit)信息操作

    有关修改提交(git commit)信息的方法可以参考: Git commit –amend 修改提交信息 有时,在git push之后,才发现还有一些代码需要进行很小的改动,这些改动在原则上不应该作为一次新的提交. 这时,我们需要撤销这次推送(git push)与提交(git commit),然后进行代码修改,再重新进行提交和推送. 为了实现这个目的,需要进行三步操作. 1.撤销提交信息 首先,通过git log查看提交信息,以便获取需要回退至的版本号: $ git log commit a4

  • js前端架构Git commit提交规范

    目录 Git commit 规范 为什么要写好 Git Commit? 如何写好Git Commit 利用插件(commitizen) Git hooks 客户端 Hooks 服务端 Hooks 项目使用 Git Husky link-staged Git commit 规范 在工作中避免不了多人协作,协作避免不了有一个规范的流程,让大家有效的去合作:让项目有条不紊的进行.自然使用 git 规范进行把控也是项目中必不可少的技术了. 为什么要写好 Git Commit? 提供更多的历史信息,方便快

  • 浅谈JS前端模块化的几种规范

    前言 有这样一个场景,客户端运行很久,但是法务部和数据部需要收集用户的一些信息,这些信息收集好之后需要进行相应的数据处理,之后上报到服务端.客户端提供一个纯粹的js执行引擎,不需要 WebView 容器.iOS 端有成熟的JavaScriptCore.Android 可以使用 V8 引擎.这样一个引擎配套有一个 SDK,访问 Native 的基础能力和数据运算能力,可以看成是一个阉割版的 Hybrid SDK 额外增加了一些数据处理能力. 问题结束了吗?处理逻辑的时候还需要用到2个库:cheer

  • JS前端架构pnpm构建Monorepo方式管理demo

    目录 写在前面 什么是Monorepo?什么是pnpm? 搞一个Monorepo的demo玩玩

  • Git Commitizen提交规范化自动生成changelog文件

    Git Commitizen提交规范化自动生成changelog文件

    目录 背景介绍 Commitizen 介绍 自动产生CHANGELOG 背景介绍 我们在使用一个比较厉害的框架或者库的时候,经常可以看到 CHANGELOG.md,维护版本更新内容. 很多时候,特别是在你开源自己的一个工具或库时,这种版本更新内容是非常有必要的,如果用户使用了你的轮子,连更新内容都不知道,试问你敢用吗? 那么这些都是怎么写的呢?每次发版都要手动记录吗?显然不是,这些都是靠提条记录生成的. 比如我们在 github 上随便找一个库:https://github.com/vuepre

  • Java Git Commit Message使用规范

    Java Git Commit Message使用规范

    目录 概述 一.Commit message 的格式 1.1 Header 1.2 Body 二.例子 2.1 feat例子 2.2 fix例子 插件推荐 概述 不知道大家在各自项目中是如何写提供代码的commit message, 我们项目有的同事写的很简单,压根不知道提交了什么内容,是新功能还是缺陷修复.本质上 commit message就是为了让团队成员知道这次提交的内容,为此,我们出了一个规范,约定团队的每个同事按照这个规范提交代码,达到通过message能够了解此次修改的内容. 一.

  • 解决使用commit提交大文件无法推送到远程库问题及git rebase使用详解

    解决这个问题并没有特别的(删除提交历史中某个文件,然后重新push),但是由于开始的使用失误,中间有使用git rebase和git reset命令处理,所以特此记录下 大文件无法push到远程仓库 问题 首先,故事(事故)的起因是这样的. 某次git push(类似测试使用,没有分支)到远程仓库时发生如下无法提交大文件的报错(大文件是一个pdf文件) $ git push Enumerating objects: 204, done. Counting objects: 100% (204/2

  • Git的使用规范流程总结

    Git的使用规范流程总结

    下面是ThoughtBot 的Git使用规范流程.我从中学到了很多,推荐你也这样使用Git. 第一步:新建分支 首先,每次开发新功能,都应该新建一个单独的分支. # 获取主干最新代码 $ git checkout master $ git pull # 新建一个开发分支myfeature $ git checkout -b myfeature 第二步:提交分支commit 分支修改后,就可以提交commit了. $ git add --all $ git status $ git commit

  • 使用validate.js实现表单数据提交前的验证方法

    现在是学的ASP.NET,关于表单验证,目前知道的,除了以前那种傻瓜式的每个表单选项都用一个函数去验证之外,有两种方法是比较方便的,今天先介绍一下第一种,在前端实现表单验证的方法--基于validate.js的表单验证方法. 注意哟,以下我都用截图的方式挂出代码,然后最后会把完整代码贴出来,提供复制粘贴,小伙伴不要急着敲哦! 1.下载和引入validate.js 首先,我们需要下载一份validate.js文件,这个文件可以去JQuery官网或者csdn等网站下载. 下载好之后,新建一个html

  • IntelliJ IDEA 2021.1 EAP 4 发布:字体粗细可调整Git commit template 支持

    IntelliJ IDEA 2021.1 EAP 4 发布:字体粗细可调整Git commit template 支持

    推荐 最新idea2021注册码永久激活(激活到2100年) IDEA最新激活码2021(IDEA2020.3.2最新永久激活方法) 正文开始 关于IntelliJ IDEA2020.1这次,我们介绍了调整字体粗细,支持Git提交模板,在Kotlin中更快地突出显示代码问题,在IntelliJ IDEA Community Edition中嵌入嵌入式共享索引等功能. 下载IntelliJ IDEA 用户体验 字体粗细可调 选择一款能完美适用于长时间编码的字体是至关重要的.最近增加的排版设置让这种

随机推荐