前端使用工具规范commit信息

前端,使用,工具,规范,commit,信息 · 浏览次数 : 338

小编点评

**commitlint** 是一个用于检查前端提交信息的工具,它可以用于确保提交信息的格式符合规范,并帮助开发者更轻松地实现代码版本控制。 **基本用法:** 1. 安装 `commitlint` 和 `cz-customizable` 工具: ```bash npm install commitizen cz-customizable ``` 2. 配置 `cz-customizable`: ```json { "commitizen": { "path": "node_modules/cz-customizable" }, "cz-customizable": { "config": "config/path/to/my/config.js" } } ``` 3. 使用 `git cz` 命令提交代码: ```bash git cz -m "My commit message" ``` **配置 options:** `commitlint` 可以配置一些选项,以定制代码版本控制的 behavior,例如: - `header-max-length`:指定 commit message 的最大长度。 - `scope`:指定修改代码的范围,例如 `body`、`footer` 或 `both`。 - `skipQuestions`:指定跳过的步骤,例如详细描述。 - `subjectLimit`:指定摘要的长度限制。 **其他资源:** - `commitlint 文档:` ``` $ npx commitlint --version ``` - `cz-customizable 文档:` ``` $ npm install cz-customizable $ npx cz-customizable ```

正文

前言

通过工具规范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信息相似的内容:

前端使用工具规范commit信息

前言 通过工具规范git提交信息也是工程化的一部分,在前端领域有一些工具为我们提供了相关功能,在这里做一下使用总结。 commitlint commitlint是什么? 就像eslint用来检查js代码是否标准,commitlint用来检查提交信息是否满足固定格式的工具。 同样,commitlint

为控制器生成OpenAPI注释

非常喜欢. NET 的 `///` 注释,写代码的时候就顺道完成写文档的过程,简直不要太爽了。 ASP. NET CORE 也是一样的,通过 `Swagger` 工具,可以自动生成 API 的接口文档(OpenAPI[规范](https://openapi.apifox.cn/)),提供给前端使用,

『手撕Vue-CLI』添加帮助和版本号

前言 经过上一篇『手撕Vue-CLI』编码规范检查之后,手撕 Vue-CLI 已经进阶到了代码规范检查这一步,已经将基本的工程搭建好了,然后代码规范约束也已经加入了,并且将 nue-cli 指令绑定到了全局当中,可以在任何地方使用了。 正文 接下来这篇文章呢,就要来实现一下大多数的命令行工具都会有的

[转帖]HTTP压测工具wrk使用指南

https://www.cnblogs.com/liufarui/p/11063328.html 【前言】 笔者使用wrk,是为了测试nginx转发报文的时候set_proxy_header规则,然后发现wrk尤其的好用,所以在这里写下来,以后用的时候还能查一查。 【安装】 不讲概念了,直接讲安装。

基于SqlSugar的开发框架循序渐进介绍(18)-- 基于代码生成工具Database2Sharp,快速生成Vue3+TypeScript的前端界面和Winform端界面

我们开发一个系统,在保证风格统一、代码强壮、可读性强等基础上,还能够结合代码生成工具快速开发相关后端,以及各种前端界面的,无疑是非常好的,既保证了项目的代码质量,又能够极大的提高开发效率。代码生成工具Database2Sharp是在完善的开发项目上,抽取出数据变化的部分,通过演绎、归纳、反复演绎和归纳等提炼方式抽取出相关的规则,以工具的方式来快速提高生产率,使得我们在开发各种不同的项目上的时候,能

如何在.NET电子表格应用程序中创建流程图

前言 流程图是一种常用的图形化工具,用于展示过程中事件、决策和操作的顺序和关系。它通过使用不同形状的图标和箭头线条,将任务和步骤按照特定的顺序连接起来,以便清晰地表示一个过程的执行流程。 在企业环境中,高管和经理利用流程图来规划业务流程,使他们能够识别瓶颈、优化生产力并增强决策能力……用例列表不胜枚

ebpf的简单学习

ebpf的简单学习-万事开头难 前言 bpf 值得是巴克利包过滤器 他的核心思想是在内核态增加一个可编程的虚拟机. 可以在用户态定义很多规则, 然后直接在内核态进行过滤和使用. 他的效率极高. 因为避免了上下文切换,中断等导致的cycle损失. 很多先进的工具,比如XDP以及K8S的cilium等网

玩转 PI 系列-看起来像服务器的 ARM 开发板矩阵-Firefly Cluster Server

## 前言 基于我个人的工作内容和兴趣,想要在家里搞一套服务器集群,用于容器/K8s 等方案的测试验证。 考虑过使用二手服务器,比如 Dell R730, 还搞了一套配置清单,如下: * Dell R730 * 3.5 尺寸规格硬盘 * CPU: 2686v4*2 * 内存:16g*8 * 存储:4

vue项目使用lodash节流防抖函数问题与解决

背景 在lodash函数工具库中,防抖_.debounce和节流_.throttle函数在一些频繁触发的事件中比较常用。 防抖函数_.debounce(func, [wait=0], [options=]) 创建一个 debounced(防抖动)函数,该函数会从上一次被调用后,延迟 wait 毫秒后

前端远程调试方案 Chii 的使用经验分享

前端远程调试方案 Chii 的使用经验分享 Chii 是与 weinre 一样的远程调试工具 ,主要是将 web inspector 替换为最新的 chrome devtools frontend 监控列表页面可以看到网站的标题链接,IP,useragent,可以快速定位调试页面,监控页信息完善,支