天天提交代码,git commit的时候能做哪些校验呢?

简介: 这里提一下其实通过查看commitlint官网可以发现,它的配置方式有好几种的,这里我使用的是第二种,如下图所示,当然你也可以去尝试其他的方式,比如第一种使用也非常的广泛,这里需要承接我的上一篇,开头文章有提到,有需要的可以点击查看。

image.png


大家好,我是 那个曾经的少年回来了。10年前我也曾经年轻过,如今已步入被淘汰的年龄,但如下幡然醒悟,所以活在当下,每天努力一点点,来看看2024年的时候自己会是什么样子吧,2024年的前端又会是什么样子,而2024年的中国乃至全球又会变成什么样子,如果你也有想法,那还不赶紧行动起来。期待是美好的,但是更重要的是要为美好而为之奋斗付诸于行动。


1、前言


在上一篇中,通过一些依赖,最终调用 git cz 来替代 git commit ,并通过 npm scripts 并最终达到规范提交的message。

具体操作的源码项目 github.com/aehyok/taro…


那么本篇就来看看git commit都可以做哪些校验呢?


  • eslint 校验代码是否符合代码规范
  • prettier 格式化代码
  • 拦截校验 git commit 提交的内容
  • 其实还可以执行测试用例等等


2、如何在提交commit做一些校验


2.1、commitlint


安装


pnpm i @commitlint/cli  @commitlint/config-conventional -D 


安装完后,在项目根目录添加commitlint.config.js,并在文件中添加如下配置


module.exports = { extends: ['@commitlint/config-conventional'] }


这里提一下其实通过查看commitlint官网可以发现,它的配置方式有好几种的,这里我使用的是第二种,如下图所示,当然你也可以去尝试其他的方式,比如第一种使用也非常的广泛,这里需要承接我的上一篇,开头文章有提到,有需要的可以点击查看。


image.png


2.2、husky git钩子


husky 是一个可以配置 git 钩子变得更简单的工具。支持所有的git钩子。好像大致有30个左右的钩子,有兴趣的可以去查查,这里我主要使用了两个钩子。


pnpm i husky -D


在package.json中添加


"hu": "husky install"


并在项目根目录的命令行中执行 pnpm hu,执行完毕之后可以在项目中观察到多了一个文件夹 .husky,两个钩子函数, commit-msgpre-commit


image.png


  • commit-msg


#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit $1


  • pre-commit


#!/bin/sh
. "$(dirname "$0")/_/husky.sh"


2.3、lint-staged


pnpm i lint-staged -D
npx lint-staged


在package.json中添加


"lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --ext .js,.ts,.vue"
    ],
    "*.{js,ts,md,html,scss}": "prettier --write"
  },


2.4、prettier 、eslint


prettier和eslint相信很多前端都知道这是干什么的,这里我就不进行赘述了,有需要的直接去查一查。这里我列出我在项目中需要安装的其他一些依赖项


"eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-taro": "3.3.16",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-prettier": "^4.0.0",


2.5、prettier 配置如下


.prettierrc.js


module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: false, // 未尾逗号
  vueIndentScriptAndStyle: true,
  singleQuote: true, // 单引号
  quoteProps: 'as-needed',
  bracketSpacing: true,
  trailingComma: 'none', // 未尾分号
  jsxBracketSameLine: false,
  jsxSingleQuote: false,
  arrowParens: 'always',
  insertPragma: false,
  requirePragma: false,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'lf'
}


2.6、eslint配置


.eslintrc.js


module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: ['plugin:vue/essential', 'airbnb-base', 'plugin:prettier/recommended'],
  parserOptions: {
    ecmaVersion: 13,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    semi: 'off', // 结尾分号设置
    'comma-dangle': 'off', // 尾随一个多余的逗号
    'vue/no-multiple-template-root': 'off',
    'vue/require-v-for-key': 'off',
    'no-console': 'off', // console。log可用
    'vue/multi-word-component-names': 'off',
    'import/no-unresolved': 'off',
    'import/extensions': 'off',
    'vue/no-v-model-argument': 'off',
    'vue/no-v-for-template-key': 'off',
    'no-eval': 'off',
    'import/prefer-default-export': 'off',
    'no-undef': 'off',
    'consistent-return': 'off',
    'no-param-reassign': 'off',
    'vue/no-mutating-props': 'off',
    'import/no-extraneous-dependencies': 'off',
    'no-plusplus': 'off' // i++可用
  },
  settings: {}
}


当然还有其他的


3 实际校验


3.1、直接命令行git commit


image.png


这个时候可以发现通过commitlint进行校验,发现我们的commit内容是不规范的,间接的对git commit 进行了规范的校验。


3.2、一个命令一条龙


// package.json中的scripts添加
"git": "git add . && git cz && git push",
//然后执行pnpm git


image.png


  • 选择代码修改类型
  • 输入commit提交内容
  • 再进行eslint代码规范校验
  • 再通过prettier自动格式化代码
  • 如果都校验成功,则开始真正的执行git commit -m
  • 最后一步 git push
  • 开头也说了其实还可以进行很多的事情,比如执行 测试用例 等


4、总结


这一篇其实我讲解了对git commit 提交内容的规范方式 juejin.cn/post/713448… , 紧接着本篇对git commit 提交时可以做的一些校验。如果使用的是github,刚好有发布版本的需求,还可以参考我使用的release-it进行自动化的发版juejin.cn/post/713262… .


不断的折腾我才发现自己的知识面是多么的狭小,越学习感觉要补充的知识就越多,那就不断的来优化自己的知识体系吧。


本文折腾的源码: github.com/aehyok/taro…


我的个人博客:vue.tuokecat.com/blog


我的个人github:github.com/aehyok


我的前端项目:pnpm + monorepo + qiankun + vue3 + vite3 + 工具库、组件库 + 工程化 + 自动化


不断完善中,整体框架都有了


在线预览:vue.tuokecat.com


github源码:github.com/aehyok/vue-…

目录
相关文章
|
4月前
|
IDE 网络安全 开发工具
【Azure App Service】Local Git App Service的仓库代码遇见卡住不Clone代码的问题
【Azure App Service】Local Git App Service的仓库代码遇见卡住不Clone代码的问题
【Azure App Service】Local Git App Service的仓库代码遇见卡住不Clone代码的问题
|
2月前
|
开发工具 git
git如何修改提交代码时的名字和邮箱?
git如何修改提交代码时的名字和邮箱?
217 4
|
2月前
|
Java Linux 开发工具
IDEA中git提交前如何关闭code analysis以及开启格式化代码
【10月更文挑战第12天】本文介绍了在 IntelliJ IDEA 中关闭代码分析和开启代码格式化的步骤。关闭代码分析可通过取消默认启用检查或针对特定规则进行调整实现,同时可通过设置 VCS 静默模式在提交时跳过检查。开启代码格式化则需在 `Settings` 中配置 `Code Style` 规则,并通过创建 Git 钩子实现提交前自动格式化。
706 3
|
3月前
|
开发工具 git
GIT:如何合并已commit的信息并进行push操作
通过上述步骤,您可以有效地合并已提交的信息,并保持项目的提交历史整洁。记得在执行这些操作之前备份当前工作状态,以防万一。这样的做法不仅有助于项目维护,也能提升团队协作的效率。
167 4
|
3月前
|
Shell 网络安全 开发工具
git与gitee结合使用,提交代码,文件到远程仓库
本文介绍了如何将Git与Gitee结合使用来提交代码文件到远程仓库。内容涵盖了Git的安装和环境变量配置、SSH公钥的生成和配置、在Gitee上创建仓库、设置Git的全局用户信息、初始化本地仓库、添加远程仓库地址、提交文件和推送到远程仓库的步骤。此外,还提供了如何克隆远程仓库到本地的命令。
git与gitee结合使用,提交代码,文件到远程仓库
|
3月前
|
开发工具 git
GIT:如何合并已commit的信息并进行push操作
通过上述步骤,您可以有效地合并已提交的信息,并保持项目的提交历史整洁。记得在执行这些操作之前备份当前工作状态,以防万一。这样的做法不仅有助于项目维护,也能提升团队协作的效率。
285 3
|
2月前
|
JavaScript 前端开发 开发工具
一身反骨的我,用--no-verify绕开了git代码提交限制!
【10月更文挑战第7天】一身反骨的我,用--no-verify绕开了git代码提交限制!
160 0
|
4月前
|
Shell 开发工具 git
使用 Shell 代码简化 Git 步骤
【8月更文挑战第23天】本文介绍通过Shell脚本简化Git操作的方法:1) 使用`gitc "提交信息"`可一键完成代码提交与推送至远程仓库;2) 执行`gitpull`即可从远程仓库拉取最新代码并合并到当前分支;3) 输入`gitnewbranch 分支名称`快速创建并切换到新分支。将这些自定义函数加入`.bashrc`或`.zshrc`等配置文件后,即可随时调用简化版Git命令。
|
4月前
|
测试技术 持续交付 开发工具
[译] 为何每次 Git Commit 要尽可能小?
[译] 为何每次 Git Commit 要尽可能小?
|
4月前
|
Java 开发工具 Android开发
Android Studio利用Build.gradle导入Git commit ID、Git Branch、User等版本信息
本文介绍了在Android Studio项目中通过修改`build.gradle`脚本来自动获取并添加Git的commit ID、branch名称和用户信息到BuildConfig类中,从而实现在编译时将这些版本信息加入到APK中的方法。
97 0