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

2,891 阅读4分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第26天,点击查看活动详情

大家好,我是 那个曾经的少年回来了。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-…