【git规范--husky的使用】

这篇具有很好参考价值的文章主要介绍了【git规范--husky的使用】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

git提交规范

一、 前言

在团队开发中,或者自己的项目中,我们都会用到git来管理我们的代码,但是当我们commit(git commit)的时候,是没有规范的,有的时我们偷懒甚至git commit -m'..',这种提交虽然当时爽,但如果有一天我们需要回滚版本的时候,git relog,妈耶,这都是啥啊,如果在团队开发中这种情况更让人绝望。这时候,指定制定一套commit规范显得格外重要,我们可以借助huskyCommitizen这两个工具帮助我们来管理commit

二、2. Husky

定义

  • git有自己的hooks(钩子),其实就是类似于vue的生命周期
    • 比如在提交代码前,会调用pre-commit hook
    • 如果不好理解hook,那么你就想vue中,页面加载时会先调用created函数,当commit的时候会先调用pre-commit,这么一举例是不是好理解点,如果还是不理解,没关系,先用,后面有机会在理解
  • 这些hook都在.git/hooks中以.sample结尾的文件就是hook
  • 如果我们手动调用,那么就会很麻烦,所以husky这个工具就孕育而生,对,这个工具就是让我们调用这些git hook简单点

安装

  • npx husky-init && npm install

  • 上面的命令会帮我们做以下的操作(官网给的解释,可以了解即可)

    1. package.jsonscript中添加"prepare": "husky install",
    2. 在当前根目录创建.husky文件夹,并且在当前文件夹中创建一个pre-commit的文件
      1. 这个文件其实就是一个可执行文件,他的作用就是commit之前会调用这个文件
    3. 配置git hook的路径

使用

  • 当我们执行git commit时,就会先执行pre-commit文件的内容了

  • 我们可以在其中添加添加自己的命令,比如npx eslint

  • 意思是commit之前先用eslint来检查代码

  • #!/usr/bin/env sh
    . "$(dirname -- "$0")/_/husky.sh"
    
    npx eslint
    

添加hook

  • 上面说到在安装的时候会帮我们创建一个pre-commithook文件,那么我们自己想要添加一个hook该怎么做呢,比如我们想要添加一个在commit时候执行的hook

  • git hook 官网写的很清楚哦,这里就不再细述每个hook是干嘛的了。git 钩子

  • 做法很简答,执行以下命令即可

  • 解读一下其实也不难

  • npx husky add .husky/commit-msg 使用husky在.husky文件夹下添加是commit-msg的钩子

  • 'npx --no -- commitlint --edit "$1"' 表示在调用该hook时候要执行的命令

  • 所以通用命令是npx husky add .husky/钩子 '命令'

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

三、 Commitizen

定义和规范

  • 这是一个规范我们提交代码的工具

规范

Type 作用
feat 新增特性 (feature)
fix 修复 Bug(bug fix)
docs 修改文档 (documentation)
style 代码格式修改(white-space, formatting, missing semi colons, etc)
refactor 代码重构(refactor)
perf 改善性能(A code change that improves performance)
test 测试(when adding missing tests)
build 变更项目构建或外部依赖(例如 scopes: webpack、gulp、npm 等)
ci 更改持续集成软件的配置文件和 package 中的 scripts 命令,例如 scopes: Travis, Circle 等
chore 变更构建流程或辅助工具(比如更改测试环境)
revert 代码回退

安装

# 安装Commitizen
npm install commitizen -D
# 安装cz-conventional-changelog,并且初始化cz-conventional-changelog
npx commitizen init cz-conventional-changelog --save-dev --save-exact

使用

  • 安装完毕后,之后我们要用npx cz来代替git commit

    • 安装完毕后会在node_modules/bin创建一个cz的可执行文件
  • 执行npx cz会依次出现以下的选项

  • # 选择一个此次commit的类型
    1.Select the type of change that you're committing: 
    # 此次commit影响的文件有哪些 比如我这次提交只是修改a.vue中的某个东西 那么就只影响到a.vue
    2.What is the scope of this change (e.g. component or file name):
    # 简短的描述一下这次具体的改动最多91个字符
    3. Write a short, imperative tense description of the change (max 91 chars)
    # 详细的描写一下你的改动 如果没有按空格键跳过
    4.Provide a longer description of the change: (press enter to skip)
    # 这次改动是重大的改动吗 (比如发布了大的版本)
    5.Are there any breaking changes? 
    # 这次改动修复了别人提交的issues(这个选项针对开源项目,写n即可)
    6.Does this change affect any open issues? 
    
  • 完成以上的步骤你的commit才算是完成

修改commitizen提交指令

  • 如果不想每次都是用npx cz,有的人会感觉别扭,或者记不住

  • 这时候可以在package.jsonscript添加一个指令

  • {
      "script": {
        commit: "cz"
      }
    }
    
  • 这样我们就可以使用npm run commit来代替git commit

四、代码提交验证

  • 上面我们虽然规范了代码提交的风格,但是我们commit的时候不按照该规范依然可以提交成功,那么这时候这个就成了防君子不防小人了,团队中难免有漏网之鱼(哈哈哈~)
  • 所以我们还需要通过commitlint来限制提交

安装

  • npm i @commitlint/config-conventional @commitlint/cli -D
    

使用

  • 步骤一:在根目录添加commitlint.config.js文件

  • 步骤二:配置文件

  • // 我们这里直接继承官方给的默认规则,如果想要更改,自动查
    module.exports = {
      extends: ['@commitlint/config-conventional']
    }
    
  • 步骤三:使用husky生成commit-msg(这是commit时的hook)文件,验证提交信息:

  • npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
    
  • 现在我们commit的时候如果不符合规范是无法commit哦

注意

如果遇到commitlint.config.js is treated as an ES module file as it is a .js file...这个错误,是因为在package.json文件中添加了 "type": "module",将这个属性删除即可,或者将js文件的后缀改为.cjs即可,因为"type": "module"这个属性是表示该项目都要用es module的方式导出导入文章来源地址https://www.toymoban.com/news/detail-744497.html

到了这里,关于【git规范--husky的使用】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 代码提交规范-ESLint+Prettier+husky+Commitlint

    先看下思维导图分析 装包配置.eslintrc.js 配置忽略文件 运行 详细讲解 以react 项目为例 配置文件 eslintrc文件 根目录/.eslintrc.js 设置忽略文件 .eslintignore 主要步骤 配置perttier 配置忽略文件 处理eslint的冲突 配置vscode的setting.json 配置.prettierrc.js文件 判断是否生效直接使用命令 n

    2024年02月04日
    浏览(59)
  • 从0搭建Vue3组件库(十三):引入Husky规范git提交

    虽然我们项目中引入了 prettier 和 eslint 对代码格式进行了校验,但是多人开发的时候难免依然会有人提交不符合规范的代码到仓库中,如果我们拉取到这种代码还得慢慢对其进行修改,这是一件很麻烦的事情,同时也为了避免团队成员提交五花八门message,因此我们可以引入 husky 来从

    2024年02月07日
    浏览(51)
  • React 项目配置代码提交规范 ESLint、Pretttier、Husky、CommitLint

    React 项目配置代码提交规范 ESLint、Pretttier、Husky、CommitLint 前言 团队开发的成员越来越多,项目都是由多个人进行开发和维护,每个人的代码书写习惯和风格又不尽相同,commit 的提交log 也是乱七八糟,为以后的开发和维护增添了很多困难,所以规范和约束在多人协作下,就

    2024年04月15日
    浏览(51)
  • git commit使用husky校验代码格式报错 因为没有将钩子 ‘.husky/pre-commit‘ 设置为可执行

    系统 mac husky一直没什么问题,有一天发现给git commit 的时候 终端报错 解决办法 之后在git commit 发现,husky是可以工作但是还是有报错信息 这个错误是由于系统无法找到 ‘.husky/commit-msg’ 文件或目录导致的。通常,这是因为你的项目中缺少了 ‘.husky’ 目录或者该目录中缺少

    2024年04月09日
    浏览(67)
  • 详细说明使用husky规范前端项目搭建

    什么是husky: 操作git hook的工具,主要实现代码提交前 eslint 校验和 commit 信息的规范校验,也可以避免多人合作时代码格式化不统一造成的冲突 什么是git hook: 通常分为客户端钩子和服务端钩子,这里主要介绍客户端钩子。 pre-commit: 该钩子在键入提交信息前运行。 它用于检

    2024年02月11日
    浏览(47)
  • 【vue3-element-admin】Husky + Lint-staged + Commitlint + Commitizen + cz-git 配置 Git 提交规范

    本文介绍 vue3-element-admin 如何通过 Husky + Lint-staged + Commitlint + Commitizen + cz-git 来配置 Git 提交代码规范。 核心内容是配置 Husky 的 pre-commit 和 commit-msg 两个钩子: pre-commit :Husky + Lint-staged 整合实现 Git 提交前代码规范检测/格式化 (前提:ESlint + Prettier + Stylelint 代码统一规范);

    2023年04月17日
    浏览(117)
  • 配置 Git Husky 代码提交约束

    Git Husky 是一个可以管理 Git Hooks 的工具,它可以帮助我们在代码提交的时候运行脚本,以确保代码提交符合特定的规范和约定。 在 Git 中,允许在操作特定的事件时执行特定的脚本,这些事件我们称之为 Hooks 。 Git Husky 利用这些 Hooks 实现了在代码提交前、提交信息规范校验等

    2024年02月03日
    浏览(48)
  • 如何规范使用Git及提交代码的要求

    Git是目前最流行的版本控制系统之一,它可以帮助开发人员更好地管理代码版本,并协作开发。使用Git进行代码管理需要遵循一些规范和技巧,本文将介绍如何规范地使用Git,常用的Git命令和技巧,以及如何创建分支和提交代码。 规范地使用Git可以帮助团队更好地协作开发,

    2024年02月15日
    浏览(44)
  • git代码提交规范、强制git代码提交规范、强制代码进行格式化

    1、安装commitizen和cz-customizable npm install -g commitizen@4.2.4 npm i cz-customizable@6.3.0 --save-dev 2、在package.json中进行新增 \\\"config\\\": {   \\\"commitizen\\\": {     \\\"path\\\": \\\"node_modules/cz-customizable\\\"   } } 3、初始化完成之后 将.cz-config.js配置文件 拖到根目录下 4、之后就可以用 git cz 来代替 git commit    (在

    2024年02月13日
    浏览(55)
  • Git代码提交规范

    Git 每次提交代码,都是需要写 Commit message(提交说明),否则就不允许提交。 Commit message 的格式 (三部分): Heaher ----- 必填 type --- 必需 scope --- 可选 subject --- 必需 Body ---- 可省略 Footer ---- 可省略 用于说明 commit  的类别,仅支持允许以下7个标识。 feat:新功能 (feature) fix: 修

    2023年04月09日
    浏览(86)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包