大家好，我是 那个曾经的少年回来了。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官网可以发现，它的配置方式有好几种的，这里我使用的是第二种，如下图所示，当然你也可以去尝试其他的方式，比如第一种使用也非常的广泛，这里需要承接我的上一篇，开头文章有提到，有需要的可以点击查看。
2.2、husky git钩子
husky 是一个可以配置 git 钩子变得更简单的工具。支持所有的git钩子。好像大致有30个左右的钩子，有兴趣的可以去查查，这里我主要使用了两个钩子。
pnpm i husky -D
在package.json中添加
"hu": "husky install"
并在项目根目录的命令行中执行 pnpm hu,执行完毕之后可以在项目中观察到多了一个文件夹 .husky，两个钩子函数， commit-msg 和 pre-commit。
- 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
这个时候可以发现通过commitlint进行校验，发现我们的commit内容是不规范的，间接的对git commit 进行了规范的校验。
3.2、一个命令一条龙
// package.json中的scripts添加 "git": "git add . && git cz && git push", //然后执行pnpm git
- 选择代码修改类型
- 输入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-…
