JavaScript开发过程中规范commit msg意义详解

目录
  • 规范 commit msg 的意义
  • commitizen
  • commitlint
  • 安装依赖
    • 添加 .commitlint.config.js 文件
    • 配置 git hooks
    • 总结一下：
      • step 1: 安装依赖
      • step 2: 添加配置文件
  • git cz 的原理

规范 commit msg 的意义

规范化、格式化的 commit message 可以让我们更好的追踪需求的演进、回滚时能够快速的找到提交、最次也能让我们的仓库显的更专业。

团队如何规范 commit msg呢，靠宣讲、靠文档？当然得靠工具生成和约束。前端圈轮子那么多，这种工具不在话下。

  • commitizen 问答式生成 commit msg 格式化
  • commitlint 校验卡控 commit msg 规范化

commitizen

commitizen: simple commit conventions for internet citizens.

commitizen/cz-cli 借助它提供的 git cz 命令替代 git commit 命令，生成符合规范的 commit message。

commitizen 默认的提交规范是 angular 团队强规定的，若想自定义我们还需配合 Adapter（适配器）此处我们用cz-customizable。

下面我们直接来介绍项目级配置。

进行 commitizen 配置

执行 npm install -D commitizen、npm install -D cz-customizable命令

然后在 package.json文件中 scripts 和 config 字段进行配置

{
  "scripts": {
    "commit": "cz"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    },
    "cz-customizable": {
      "config": ".cz-configrc.js"
    }
  }
}

添加 .cz-configrc.js文件

在项目的根目录下执行 npm run commit试试吧

后续t npm run commit 替换 git commit

commitlint

如何保证组内成员都使用npm run commit命令呢？当然是用工具。

这里我们用 commitlint，作用和 eslint 类似。利用 git hooks 拦截不符合规范的 commit msg。

安装依赖

npm install --save-dev @commitlint/{config-conventional,cli}
npm install yorkie --save-dev

添加 .commitlint.config.js 文件

扩展开源配置，然后再添加部分个性化 rules

配置 git hooks

为了拦截不规范的 commit msg，需要利用 git hooks 的 commit-msg 自动执行 commitlint

"gitHooks": {
  "commit-msg": "commitlint -e $GIT_PARAMS"
}

乱输入一个 commit msg 试试，发现非常神奇。卡控生效了。

按照以上步骤就可以规范你们团队的 commit msg了。

总结一下：

step 1: 安装依赖

npm install -D commitizen cz-customizable
npm install -D @commitlint/{config-conventional,cli}
npm install -D yorkie

step 2: 添加配置文件

自定义格式的commitizen配置文件 .cz-configrc.js ，校验规范的 .commitlint.config.js 文件

配置 package.json

{
  "scripts": {
    "commit": "cz"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    },
    "cz-customizable": {
      "config": ".cz-configrc.js"
    }
  },
  "gitHooks": {
    "commit-msg": "commitlint -e $GIT_PARAMS"
  }
}

git cz 的原理

如果你是全局按照的 commitizen，你还能用 git cz命令代替 npm run commit。

git cz 是什么玩意？ git 的命令，还 commitizen 的命令。

通过查阅资料 git cz 是 commitizen 利用 git 的文件命名规范生成的自定义 git 命令。

Git遵循命名约定git-<subcmd>自动解析PATH中可执行文件中的子命令。 这些子命令可以用git <subcmd>执行。

我们看下 commitizen 仓库 package.json 的 bin 字段。真香大白了，就是 git 的自定义命令

 "bin": {
    "cz": "./bin/git-cz",
    "git-cz": "./bin/git-cz",
    "commitizen": "./bin/commitizen"
  },

以上就是JavaScript开发过程中规范commit msg意义详解的详细内容，更多关于开发规范commit msg意义的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 使用eslint和githooks统一前端风格的技巧

    前端团队开发时,是必须要有一个统一的前端规范的,用一套统一的规范来规范开发者,可以有效的避免在提交和拉取代码时造成的代码错乱问题,这边文章主要讲下我们团队的代码规范使用,eslint结合vscode保存时自动修复不规范代码,githooks提交代码时的eslint校验和信息规范. 添加eslint vue-cli3构建一个新项目(包含eslint模块),完成后添加 .eslintrc.js 配置如下: module.exports = { root: true, parserOptions: {

  • git提交验证规范并自动生成日志文件的方法

    每次git提交信息的时候会先验证提交的格式是否符合规范,符合规范并运行eslint 两者都符合之后才可正常提交,并可以根据提交的信息自动生成日志信息. 一般是遵循 Angular Commit Message 校验commit 格式 主要使用 @commitlint/cli @commitlint/config-conventional 来校验commit是否符合规范 一般可以全局安装or本地安装 install 全局 npm install -g @commitlint/cli @commit

  • Vue前端开发规范整理(推荐)

    基于Vue官方风格指南整理 一.强制 1. 组件名为多个单词 组件名应该始终是多个单词的,根组件 App 除外. 正例: export default { name: 'TodoItem', // ... } 反例: export default { name: 'Todo', // ... } 2. 组件数据 组件的 data 必须是一个函数. 当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方),它的值必须是返回一个对象的函数. 正例: // In a .vue fi

  • JavaScript开发过程中规范commit msg意义详解

    目录 规范 commit msg 的意义 commitizen commitlint 安装依赖 添加 .commitlint.config.js 文件 配置 git hooks 总结一下: step 1: 安装依赖 step 2: 添加配置文件 git cz 的原理 规范 commit msg 的意义 规范化.格式化的 commit message 可以让我们更好的追踪需求的演进.回滚时能够快速的找到提交.最次也能让我们的仓库显的更专业. 团队如何规范 commit msg呢,靠宣讲.靠文档?当

  • Javascript ES6中数据类型Symbol的使用详解

    介绍 Symbol 是一种特殊的.不可变的数据类型,可以作为对象属性的标识符使用,表示独一无二的值.Symbol 对象是一个 symbol primitive data type 的隐式对象包装器. 它是JavaScript语言的第七种数据类型,前6种分别是:Undefined.Null.Boolean.String.Number.Object. 语法 Symbol([description]) Parameters description : 可选的字符串.可用于调试但不访问符号本身的符号的说

  • JavaScript正则表达式中的ignoreCase属性使用详解

    ignoreCase是正则表达式对象的只读布尔属性.它指定是否一个特定的正则表达式执行不区分大小写的匹配.,它与"i"属性创建. 语法 RegExpObject.ignoreCase 下面是参数的详细信息: NA 返回值: 如果"i"修改被设置返回"TRUE",否则返回"FALSE". 例子: <html> <head> <title>JavaScript RegExp ignoreCase

  • JavaScript中浅讲ajax图文详解

    JavaScript中浅讲ajax图文详解

    1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开

  • JavaScript中push(),join() 函数 实例详解

    定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选

  • JavaScript 中调用 Kotlin 方法实例详解

    JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =

  • JavaScript中的splice方法用法详解

    JavaScript中的splice主要用来对js中的数组进行操作,包括删除,添加,替换等. 注意:这种方法会改变原始数组!. 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项) 3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数.第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项) 示例:

  • JavaScript中window和document用法详解

    JavaScript中window和document用法详解

    一.验证表单 封装一个函数用于验证手机号 /** * @param {String}eleId * @param {Object}reg */ function checkInput(eleId,reg) { var ele = document.getElementById(eleId); ele.onblur = function (ev) { if(!reg.test(this.value)){ //不匹配 this.style.borderColor = "#ff0000" /

  • JavaScript 中this指向问题案例详解

    总结 全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ➡️ 构造出来的实例 箭头函数 ➡️ 定义时外层作用域中的 this 对象的方法 ➡️ 该对象 call().apply().bind() ➡️ 第一个参数 全局环境 无论是否在严格模式下,this 均指向 window 对象. console.log(this === window) // true // 严格模式 'use strict' console.log(this === window

  • JavaScript中Array的filter函数详解

    目录 描述 理解 示例 原生实现 描述 filter为数组中的每个元素调用一次callback函数,并利用所有使得callback返回 true 或等价于 true 的值的元素创建一个新数组.callback只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用.那些没有通过callback 测试的元素会被跳过,不会被包含在新数组中. 理解 filter不会改变原数组,它返回过滤后的新数组. filter遍历的元素范围在第一次调用callback之前就已经确定了.在调用f

随机推荐