前言

在使用 ant design pro 时，git 提交报错

> running commit-msg hook: fabric verify-commit

   ERROR  提交日志不符合规范

  合法的提交日志格式如下(emoji 和 模块可选填)：

     feat(模块): 添加了个很棒的功能

     fix(模块): 修复了一些 bug

     docs(模块): 更新了一下文档

     UI(模块): 修改了一下样式

     chore(模块): 对脚手架做了些更改

     locale(模块): 为国际化做了微小的贡献

    See .github/commit-convention.md for more details.

Angular 规范 是目前使用最广的写法，比较合理和系统化，并且有配套的工具。

ant design pro 内置了 fabric 作为了编码规范，fabric 提供了严格但是不严苛的 lint 规则集，包含 eslint，stylelint，prettier三种工具，可以显著的提升代码质量，规范代码风格。

有几种可以提交的方式：

  • 提交时忽略
git commit -a -m '提交语' --no-verify
  • 卸载插件，需要手动将引入包删除
  • 规范提交
  • vscode使用插件提交

规范 Commit message 的好处

在开发过程中，Git 每次提交代码，都需要写 Commit message（提交说明），规范的 Commit message 有很多好处：

  • 方便快速浏览查找，回溯之前的工作内容
  • 可以直接从 commit 生成 Change log (发布时用于说明版本差异)

目前我们并没有对 commit message 进行规范，造成以下麻烦：

  • 每个人风格不同，格式凌乱，查看很不方便
  • 部分 commit 没有填写 message，事后难以得知对应修改的作用

规范 Commit message 不仅能解决上述问题，而且基本没有副作用和学习成本，应该尽早加上。

规范使用

每次提交，Commit message 都包括三个部分：Header，Body 和 Footer。

Commit message 不能包含换行符，否则会报 ERROR 提交日志不符合规范

<type>(<scope>): <subject>

// 空一行

<body>

// 空一行

<footer>

其中，Header 是必需的，Body 和 Footer 可以省略。

不管是哪一个部分，任何一行都不得超过72个字符（或100个字符）。这是为了避免自动换行影响美观。

Header

Header部分只有一行，包括三个字段：type（必需）、scope（可选）和subject（必需）。

type

type用于说明 commit 的类别，只允许使用下面7个标识。

  • feat：新功能（feature）
  • fix：修补bug
  • docs：文档（documentation）
  • style： 格式（不影响代码运行的变动）
  • refactor：重构（即不是新增功能，也不是修改bug的代码变动）
  • test：增加测试
  • chore：构建过程或辅助工具的变动

如果 type 为 feat 和 fix，则该 commit 将肯定出现在 Change log 之中。其他情况（docs、chore、style、refactor、test）由你决定，要不要放入 Change log，建议是不要。

scope

scope用于说明 commit 影响的范围，比如数据层、控制层、视图层等等，视项目不同而不同。

subject

ubject是 commit 目的的简短描述，不超过50个字符。

  • 以动词开头，使用第一人称现在时，比如change，而不是changed或changes
  • 第一个字母小写
  • 结尾不加句号（.）

Body

Body 部分是对本次 commit 的详细描述，可以分成多行。下面是一个范例。

More detailed explanatory text, if necessary.  Wrap it to

about 72 characters or so. 

Further paragraphs come after blank lines.

- Bullet points are okay, too

- Use a hanging indent

有两个注意点。

（1）使用第一人称现在时，比如使用change而不是changed或changes。

（2）应该说明代码变动的动机，以及与以前行为的对比。

Footer

Footer 部分只用于两种情况。

不兼容变动

如果当前代码与上一个版本不兼容，则 Footer 部分以BREAKING CHANGE开头，后面是对变动的描述、以及变动理由和迁移方法。

BREAKING CHANGE: isolate scope bindings definition has changed.

    To migrate the code follow the example below:

    Before:

    scope: {

      myAttr: 'attribute',

    }

    After:

    scope: {

      myAttr: '@',

    }

    The removed `inject` wasn't generaly useful for directives so there should be no code using it.

关闭 Issue

如果当前 commit 针对某个issue，那么可以在 Footer 部分关闭这个 issue 。

Closes #234

也可以一次关闭多个 issue 。

Closes #123, #245, #992

Revert

还有一种特殊情况，如果当前 commit 用于撤销以前的 commit，则必须以revert:开头，后面跟着被撤销 Commit 的 Header。

revert: feat(pencil): add 'graphiteWidth' option

This reverts commit 667ecc1654a317a13331b17617d973392f415f02.

Body部分的格式是固定的，必须写成 This reverts commit &lt;hash>.，其中的hash是被撤销 commit 的 SHA 标识符。

如果当前 commit 与被撤销的 commit，在同一个发布（release）里面，那么它们都不会出现在 Change log 里面。如果两者在不同的发布，那么当前 commit，会出现在 Change log 的Reverts小标题下面。

git commit Examples

修改属于 Button 组件的新特性，新增了 primary 类型的按钮：

git commit -m "feat(Button): 新增 primary 类型按钮"

修改属于全局样式的调整，修改了文字颜色，对应的 issue 编号为 567：

git commit -m "style(Global): 修改文字颜色 close #567"

提交信息必须满足以下正则表达式：

/^(revert: )?(feat|fix|docs|style|refactor|perf|test|workflow|build|ci|chore|types|wip|dep)(\(.+\))?: .{1,50}/

Changelog

后续会从 commit 信息自动生成 changelog ，只有以下类型标签修改会被纳入到 changelog：

  • feat ：新特性
  • refactor ：重构
  • fix ：问题修复
  • style ：样式改动
  • types ：类型定义相关
  • dep ：新增依赖或依赖版本变动
  • docs ：文档相关
  • perf : 性能优化
  • test : 增加测试
  • chore : 构建过程或辅助工具的变动
  • revert : 回退版本
  • build : 打包
  • ci : 持续集成修改

注意

  • 如果一次修改涉及到多个类型，对比上述编号排序并选择编号最小的，或者选择最贴切的。
  • 在切分支开发时需要注意，目前 merge request 通常没有启用 squash commits ，所以对于暂时不确定是否会被采用的修改，请使用 chore wip 等不会被纳入 changelog 的标签。
  • 对于涉及到某个或多个 issue 的修改，请在提交信息中附带 close #1234 格式的标注。

vscode使用插件提交

  1. vscode 安装 git-commit-plugin 插件

  2. 使用命令快捷方式打开命令窗口或单击 git 插件导航栏上的图标showGitCommit

  3. 输入提交信息，该信息会自动生成符合规范的提交消息

http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html

ant design pro git提交error； Angular 团队git提交规范的更多相关文章

  1. ant design pro （十三）advanced 错误处理

    一.概述 原文地址:https://pro.ant.design/docs/error-cn 二.详细 2.1.页面级报错 2.1.1.应用场景 路由直接引导到报错页面,比如你输入的网址没有匹配到任何 ...

  2. ant design pro （十二）advanced UI 测试

    一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可 ...

  3. 阿里开源项目之Ant Design Pro

    本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...

  4. ant design pro（一）安装、目录结构、项目加载启动【原始、以及idea开发】

    一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...

  5. Ant Design Pro快速入门

    在上一篇文章中,我们介绍了如何构建一个Ant Design Pro的环境. 同时讲解了如何启动服务并查看前端页面功能. 在本文中,我们将简单讲解如何在Ant Design Pro框架下实现自己的业务功 ...

  6. 【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记（三）

    前言:前一篇记录了[后台管理系统]目前进展开发中遇到的一些应用点,这一篇会梳理一些自己学习Ant Design Pro源码的功能点.附:Ant Design Pro 在线预览地址. Dashboard ...

  7. 初探ant design pro

    1.增加路由子页面&配置菜单 因为ant design pro采取的是umi路由配置,所以只要在对应的文件夹下新建相关的文件夹以及文件,它会自动解析.按照如下的步骤做即可 PS.如果想要给菜单 ...

  8. 使用ant design pro搭建项目

    脚手架搭建 git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project 然后 cd my-proje ...

  9. Nginx 部署 Ant Design pro

    利用Ant Design pro开发的项目,如何用Nginx部署呢? 第一步:把项目打包,打包命令如下: npm run build 运行完毕会在项目目录下生成dist文件夹. 第二步:想要测试打包好 ...

  10. ant design pro超详细入门教程

    1.Ant Design Pro 初了解 说到ant design pro,得先了解一下ant design是个什么东西?ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架 ...

随机推荐

  1. 龙哥量化：通达信DRAWICON的图标副图显示效果（鸡肋，可以不看）

    新建一个副图指标,复制粘贴源码,先看一下效果图 DRAWTEXT_FIX(1,0.01,0.01,0,'通达信中DRAWICON的图标,方便大家折腾指标'),COLORMAGENTA; A:=CURR ...

  2. Qt开源作品1-视频流播放ffmpeg内核

    一.前言 好久以前就写过这个工具,后来因为Qt版本的不断升级以及ffmpeg也经历过好多次的迭代,可能从官网下载的ffmpeg搭配原来的代码不能正确编译,因为很多api已经变了,所以这次特意抽空全部整 ...

  3. Qml 中实现毛玻璃效果

    [写在前面] 毛玻璃效果(Acrylic Effect)是一种常见的 UI 设计风格,它通过模糊背景并添加透明度和噪声效果,使界面元素看起来像是半透明的磨砂玻璃. 本文将介绍如何使用 Qml 实现这种 ...

  4. 当github遇到了Halloween，神奇的彩蛋出现了！

    往年每个万圣节github都会修改配色方案,今天才发现,so记录这个不平凡的2020年的github的彩蛋,希望一切都会慢慢好起来.

  5. LCR 164. 破解闯关密码

    破解闯关密码 闯关游戏需要破解一组密码,闯关组给出的有关密码的线索是: 一个拥有密码所有元素的非负整数数组 password 密码是 password 中所有元素拼接后得到的最小的一个数 请编写一个程 ...

  6. leetcode-Linux 简介

    https://leetcode-cn.com/leetbook/read/awesome-linux-handbook/eg4ecm/ Linux 系统是一种金字塔模型的系统,如下所示 应用程序发起 ...

  7. superset 图表加水印

    转载wenqiang1208的文章 superset 作为一个数据可视化的工具,其中的图表,报表数据是非常敏感的,为了防止数据外泄,大部分公司需要在敏感图表上加上水印. 本篇文章有2种方式去介绍如何在 ...

  8. 使用Python的一维卷积

    学习&转载文章:使用Python的一维卷积 背景 在开发机器学习算法时,最重要的事情之一(如果不是最重要的话)是提取最相关的特征,这是在项目的特征工程部分中完成的. 在CNNs中,此过程由网络 ...

  9. JavaScript 事件绑定：立即执行函数的闭包 vs let的块作用域

    以下两个写法,在执行时是等价的: // 立即执行函数表达式写法 var btns_var = document.getElementsByTagName('button'); for(var i = ...

  10. 第一！天翼云领跑中国边缘云laaS市场！

    近日,弗若斯特沙利文(Frost & Sullivan,简称"沙利文")联合头豹研究院发布<2023年中国边缘云市场报告>,天翼云在2023H1中国边缘云Iaa ...