前言

通过工具规范git提交信息也是工程化的一部分,在前端领域有一些工具为我们提供了相关功能,在这里做一下使用总结。

commitlint

  1. commitlint是什么?

    就像eslint用来检查js代码是否标准,commitlint用来检查提交信息是否满足固定格式的工具。

    同样,commitlint提供了一些规则供我们配置。

  2. commitlint怎么用?

    和eslint一样,commitlint提供了相应的api供我们调用、或者和其他工具集成

    安装:npm install -g @commitlint/cli @commitlint/config-conventional 其中@commitlint/config-conventional是常用的插件。 commitlint常用命令:

    • commitlint -e 命令就可以检查.git/COMMIT_EDITMSG里面的commit message是否符合格式;
    • commitlint -e ./aaa 命令就可以检查文件./aaa里面内容是否符合格式;
    • commitlint -E HUSKY_GIT_PARAMS 读取环境变量HUSKY_GIT_PARAMS对应的文件的内容,默是.git/COMMIT_EDITMSG
  3. 配置文件 commitlint.config.js/.commitlintrc.js

    类似于.eslintrc.js文件,用来配置commitlint规则。extends字段类似于eslint的extends

    module.exports = {
    extends: ['@commitlint/config-conventional'],
    rules: {
    'header-max-length': [2, 'always', 60],
    },
    };

commitizen

  1. commitizen是什么?

    正常git commit 我们可以写出符合commitlint的提交信息,但是如果有命令行提示我们一步步的写就更方便了,于是出现了commitizen就是一个这样的工具。

  2. commitizen怎么用?

    • npm install commitizen 之后使用 git cz 来替代 git commit 提交信息。
    • npm install cz-customizable

    cz-customizable 是可自定义的Commitizen插件,

    commitizen中有个 Commitizen friendly的概念,如果是Commitizen-friendly ,执行git cz会进入交互式操作;如果不是Commitizen-friendly就会和普通git commit一样。一般项目在没有安装相关插件的情况下不是Commitizen-friendly, 要做到Commitizen-friendly需要adapter,比如:cz-customizable 或者cz-conventional-changelog 。cz-customizable 用的更多一些。

  3. 配置cz-customizable

    指定commitizen用哪个adapter:

    // package.json
    "config": {
    "commitizen": {
    "path": "node_modules/cz-customizable"
    },
    "cz-customizable": {
    "config": "config/path/to/my/config.js"
    }
    }

    创建.cz-config.js自定义提交规则。

     - types: 描述修改的性质是什么,是bugfix还是feat,在这里进行定义。
    - scopes: 定义之后,我们就可以通过上下键去选择 scope
    - scopeOverrides: 针对每一个type去定义scope
    - allowBreakingChanges: 设置为 ['feat', 'fix'],只有我们type选择了 feat 或者是 fix,才会询问我们 breaking message.
    - allowCustomScopes: 设置为 true,在 scope 选择的时候,会有 empty 和 custom 可以选择,顾名思义,选择 empty 表示 scope 缺省,如果选择 custom,则可以自己输入信息
    - skipQuestions: 指定跳过哪些步骤,例如跳过我们刚刚说的详细描述,设置其为 scope: ['body'],假设我们的项目也不会涉及到关联 issue,我们可以设置其为 scope: ['body', 'footer']
    - subjectLimit: 描述的长度限制

    cz-customizable 会首先在项目根目录下寻找: .cz-config.js 或 .config/cz-config.js,如果找不到,会去主目录寻找。我们也可以在 package.json 中手动去指定配置文件的路径

总结

可以使用commitlint做提交信息的校验, 也可以使用commitizen简化提交的负担,还可以使用husky将这些约束放到提交钩子里,这些都是在本地做的校验,开发者其实是可以跳过这些校验和约束的,那么如果要做更严格的约束就需要在远程git服务器上增加校验处理。

前端使用工具规范commit信息的更多相关文章

  1. Web前端开发标准规范

    web前端开发规范的意义 提高团队的协作能力 提高代码的复用利用率 可以写出质量更高,效率更好的代码 为后期维护提供更好的支持 一.命名规则 命名使用英文语义化,禁止使用特殊字符,禁止使用拼音,禁止使 ...

  2. Web 前端开发代码规范(基础)

    一. 引言 对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护. 二. HTML/CS ...

  3. 前端构建工具gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

  4. 前端构建工具gulp使用

    前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...

  5. 前端模块化工具-webpack

    详解前端模块化工具-webpack webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不 ...

  6. 前端构建工具gulp介绍

    2016年3月3日 10:46:08     晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...

  7. 前端见微知著工具篇:Grunt实现自动化

    转载说明 本篇文章为转载文章,来源为[前端福利]用grunt搭建自动化的web前端开发环境-完整教程,之所以转载,是因为本文写的太详细了,我很想自己来写,但是发现跳不出这篇文章的圈子,因为写的详尽,所 ...

  8. 前端自动化工具 -- grunt 使用简介

    grunt作为一个前端构建工具,有资源压缩,代码检查,文件合并等功能. 下面就简单了解grunt的使用. 一.环境配置 grunt是基于nodejs的,所以需要一个 nodejs 环境,未了解的可以  ...

  9. Node.js前端自动化工具:gulp

    前端自动化工具 -- gulp 使用简介 gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是 ...

  10. 前端构建工具gulpjs

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

随机推荐

  1. SpringBoot课程学习(三)

    一.YAML格式的基本语法 (1)格式: 大小写敏感 数据值前边必须有空格,作为分隔符 使用缩进表示层级关系 缩进时不允许使用Tab键,只允许使用空格(各个系统 Tab对应的 空格数目可能不同,导致层 ...

  2. C#中Math.Round()实现中国式四舍五入问题

    C#中的Math.Round()并不是使用的"四舍五入"法.实际上是四舍六入五取偶. 对于这个问题我们常见的解决方式是使用MidpointRounding.AwayFromZero ...

  3. python实现多接口翻译软件

    本实验用pyqt5做了一个小软件,里面使用了市面上主流的6种翻译软件接口:谷歌.百度.有道.金山词霸.腾讯.必应,界面如图所示: 以下是程序代码: import time,sys,os,hashlib ...

  4. Web自动化---解决登录页面随机验证码问题

    一.抛出问题 在日常的测试工作中,遇到了这样一个登录页面,如下图: 像我们之前做过UI自动化的同学就知道,自动输入账号和密码,这个简单,但是怎么样来识别验证码呢?验证码的形式有多种,有纯数字的,纯字母 ...

  5. redis的几个优化点

    1. redis读写速度慢 可以将redis单实例改为redis集群 2. redis报OOM redis内存溢出,调大redis内存:增加redis.conf中的maxmemory 的值.如果red ...

  6. 部署grafana+telegraf+influxdb 及 配置 jmeter后端监听

    搞性能测试,可以搭建Grafana+Telegraf+InfluxDB 监控平台,监控服务器资源使用率.jmeter性能测试结果等. telegraf: 是一个用 Go 编写的代理程序,可收集系统和服 ...

  7. 利用递归的方式在JSON 数据中找到某个节点的多有父节点

    在项目中遇到的问题-- 一个级联题,知道答案id  后将每一级的选项展示出来 例如 级联题的 json 数据是 [ { name: '北京', id: 1, children:[ { name: '朝 ...

  8. freeswitch的mod_curl模块

    概述 有时候,我们需要在呼叫的过程中,或过程后调用web api接口. freeswitch的mod_curl模块可以很方便的实现web api的接口调用. mod_curl模块默认不安装,需要进入模 ...

  9. Go语言核心36讲33

    我们在前几次讲的互斥锁.条件变量和原子操作都是最基本重要的同步工具.在Go语言中,除了通道之外,它们也算是最为常用的并发安全工具了. 说到通道,不知道你想过没有,之前在一些场合下里,我们使用通道的方式 ...

  10. Android Studio打开时报错if you already hava 64-bit JDK installed,define a JAVA_HOME

    出现这个问题不知道改了什么导致的,卸载了重新安装也是不行. 以及到高级设置中进行配置jdk也是无效, 解决方法为需要在路径 C:\Users\你自己的用户名\AppData\Roaming\Googl ...