vite vue3 规范化与Git Hooks
在 《JS 模块化》系列开篇中,曾提到前端技术的发展不断融入很多后端思想,形成前端的“四个现代化”:工程化、模块化、规范化、流程化。在该系列文章中已详细介绍了模块化的发展及四种模块化规范。本文简单聊聊规范化中的 git 规范。
1 规范化
在企业级开发中,“一千个读者有一千个哈姆雷特”是很常见的事,每个程序员对技术的理解、视角和掌握程度参差不齐,导致编写的代码五花八门。规范化包括很多,我在企业实践中重点关注两个方面:代码规范 和 git 提交规范。
代码规范最基础的是代码格式,不同的代码格式虽然运行起来没有问题,但代码超级难看,代码乱七八糟、一堆 warning,虽然不影响运行,但看着太恶心,就像下面的情形:
- 估计是为了节省纸张,空格全省略,代码全挤在一起:
const a=b+c
const fn=()=>{}
fn(){}
for(let i=0; i<10; i++){}
- 单引号、双引号混合使用,上一行用单引号,下一行偏要用双引号;
- 上一行加分号,后一行省略分号;
- 定义了一些从没有使用的变量;
- 分支判断中只有一句话坚决不写花括号;
- ......
我不能说上面的风格是错误的(写代码就像玩音乐一样,不能说绝对的对错,只是理解不同罢了),无论怎么写,至少一个团队还是应该保证统一的风格吧。于是咱们就使用了 .editorconfig 和 eslint。
.editorconfig 对编辑器的基本格式做了限制,但比较粗糙;eslint 就进行了详细的约束。无论选择 standard 、airbnb、prettier 任何一种,都是为了强制团队使用统一的代码风格。
在 《创建 vite vue3 项目》一文中已讨论了如何在基于 vite 的 vue3 项目中如何整合 eslint。
本文重点讨论 git 提交规范。
2 git 提交规范
大家应该都是使用 git 管理代码吧?如果你在企业还是使用 SVN 管理代码,那可以赶快跑路了。git 提交代码使用 git commit -m '描述' 命令。但描述信息很多情况下都是随意填写,git 提交规范就是针对这个描述信息的约束。
2.1 Angular 规范
Angular 团队规范是目前使用较多的 git 提交规范 —— 约定式提交。规范要求提交的描述信息格式为:
<type>[optional scope]: <description>
[optional body]
[optional footer(s)]
含有 optional 表示可选,故必填的内容是 type 和 description。
type 表示这次提交的类型,包括如下值:
type | 含义 |
---|---|
feat | 新功能 |
fix | 修复 |
docs | 文档变更 |
style | 代码格式(不影响代码运行) |
refactor | 重构(不增加新功能,也不是修改 bug) |
perf | 性能优化 |
test | 添加测试 |
chore | 修改构建过程或辅助工具 |
revert | 回退 |
build | 打包 |
例如,实现了一个修改用户列表功能,此时提交代码使用如下命令:
git commit -m 'feat: 实现用户列表'
修改了 vite.config.ts 的配置,压缩打包文件:
git commit -m 'chore: 修改vite生产配置'
2.2 Commitizen
确定了git 提交时描述信息的规范,那如何让人遵守执行呢?首先需要让开发同事知道提交信息的内容,此时可以使用工具 commitizen 来完成。commitizen 是一个 git 提交规范化的工具,提供了 git cz 命令来代替传统的 git commit 命令。使用 git cz 来提交代码,commitizen 会一步步提示输入的字段,并提交所填写的必需字段。换句话说,使用 git cz 命令,底层最后会执行 git commit,但在执行 git commit 前,会校验描述信息是否符合规范。如果不符合规范,则不会执行 git commit,提交失败。
- 全局安装 commitizen
yarn global add commitizen
- 在工程中安装 cz-conventional-changelog
yarn add cz-conventional-changelog -D
- 在工程中初始化 commitizen 的约定式提交:
commitizen init cz-conventional-changelog --yarn --dev --exact
执行完该命令,package.json 文件中会自动生成如下配置:
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
完成上述步骤后,便可以使用 git cz 命令来提交代码了。
添加需要提交的文件,添加文件后执行 git cz 命令,提示如下:
使用上下键选择提交的类型,按照提示输入相关内容或必填内容即可完成提交。
3 git hooks
上面实现了 Git 提交规范,但仍然有不听话的同学会使用 git commit,如此一来提交信息依旧是乱七八糟的,此时便需要使用 git hooks 了。
3.1 什么是 git hooks
hooks 意思是“钩子”,也就是在执行某个操作之前或之后要做的事。git hooks 就是 git 操作的钩子,在 git 执行某个操作之前或之后要做的事,如 git 提交后、提交后、合并前、合并后、rebase前、rebase后等。在这里需要重点关注的 git 钩子有两个:
- pre-commit
pre-commit 是 git commit 执行前的钩子,会在获取提交描述信息且提交前被调用,根据该钩子决定是否拒绝提交。可以在这个钩子中对代码进行 eslint 检查。
- commit-msg
commit-msg 也是 git commit 执行前的钩子,用来规范化标准格式,根据标准和提交的描述信息决定是否拒绝提交。可以在这个钩子中检查提价信息是否符合规范。
3.2 commitlint 和 husky
理解 git hooks 后,就是如何在工程中引入上述钩子。此时需要使用到 husky 和 commitlint。两者结合起来可以在提交的描述信息不规范时会导致提交失败,并提示错误。首先安装配置 commitlint。
- 安装 husky 和 commitlink 相关依赖:
yarn add husky @commitlint/cli @commitlint/config-conventional -D
- 在项目根目录创建 commitlint.config.cjs 配置文件:
module.exports = {
extends: [
'@commitlint/config-conventional'
]
}
- 初始化 husky
npx husky install
执行完成后,项目根目录会自动生成一个 .husky 文件夹。
3.3 pre-commit 和 commit-msg 钩子
接下来需要使用 lint-staged 对git 暂存区(git add . 的内容)文件进行 eslint 检查。
- 安装 lint-staged
yarn add lint-staged -D
- 在 package.json 中添加 scripts:
"scripts": {
...
"lint": "eslint \"src/**/*.{js,ts,vue,jsx,tsx}\" --fix"
},
- 在 package.json 添加 lint-staged 配置:
{
.....
"lint-staged": {
"*.{js,ts,jsx,tsx,vue}": [
"npm run lint"
]
}
}
- 分别执行下列命令,为 husky 添加 commit 前的 hook,让其执行 eslint 和 commitlint :
npx husky add .husky/pre-commit 'npx lint-staged'
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
执行完该命令后,会自动在 .husky/ 目录下生成 pre-commi 文件和 commit-msg 文件。
pre-commit 文件内容如下:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
commit-msg 文件内容如下:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no-install commitlint --edit ""
3.4 测试
到此为止便完成了配置,可以按如下步骤进行测试:
git add .
git commit -m '测试提交'
控制台会出现如下错误提示:
使用 git cz 命令重新提交,便可以成功提交。
各位还可以弄点 eslint 错误再提交试试效果。
vite vue3 规范化与Git Hooks的更多相关文章
- [git hooks] pre-commit 配置
在开发过程中,通常使用 eslint 来规范团队的代码风格.但是 eslint 只能在开发服务器启动的时候才去检验代码.如果一个人在不启动开发服务器的情况下,修改了代码直接提交到git,那么别人pul ...
- Git Hooks、GitLab CI持续集成以及使用Jenkins实现自动化任务
Git Hooks.GitLab CI持续集成以及使用Jenkins实现自动化任务 前言 在一个共享项目(或者说多人协同开发的项目)的开发过程中,为有效确保团队成员编码风格的统一,确保部署方式的统一, ...
- 使用Git Hooks实现开发部署任务自动化
前言 版本控制,这是现代软件开发的核心需求之一.有了它,软件项目可以安全的跟踪代码变更并执行回溯.完整性检查.协同开发等多种操作.在各种版本控制软件中,git是近年来最流行的软件之一,它的去中心化架构 ...
- 用 Git Hooks 进行自动部署
原文发表于 http://ourai.ws/posts/deployment-with-git-hooks/ 昨天开始接手开发公司前端团队的主页,在稍微修改点东西后推送到远程仓库想看下线上结果时发现并 ...
- 012-基于 git hooks 的前端代码质量控制解决方案
原文看这里:https://github.com/kuitos/kui...全部文章看这里 https://github.com/kuitos/kui... 国际惯例先说下故事背景 通常情况下,如果我 ...
- 通过Gradle Plugin实现Git Hooks检测机制
背景 项目组多人协作进行项目开发时,经常遇到如下情况:如Git Commit信息混乱,又如提交者信息用了自己非公司的私人邮箱等等.因此,有必要在Git操作过程中的适当时间点上,进行必要的如统一规范.安 ...
- [NPM] Run npm scripts with git hooks
In this lesson we will look about how we can integrate with git hooks to help enforce a certain leve ...
- 搭建Git服务器环境----Git hooks代码自动部署
引言:自己想搭一套git的服务端环境,不想用github码云等.经多方资料整合,实验总结,以下是亲测有效的方式.可用于公司日常开发 一.搭建Git环境 ① 安装 Git Linux 做为服务器端系统, ...
- 8.3 Customizing Git - Git Hooks
https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks https://github.com/git/git/blob/master/temp ...
随机推荐
- 整除分块套杜教筛为什么是 O(n^2/3) 的
假设我们要筛一个东西叫做 \(f\) . 记 \[D(n)=\left\{n,\left\lfloor\dfrac n2\right\rfloor,\left\lfloor\dfrac n3\righ ...
- 2501-Logback的使用与配置范例xml
在项目中logback一般配合slf4j使用,slf4j是面上的框架,logback才是真正记录处理日志的框架. 参考文献: Java日志框架:logback详解 http://www.importn ...
- 关于又拍云免费cdn全网加速服务的长期评测(各种踩坑)
原文转载自「刘悦的技术博客」 ( https://v3u.cn/a_id_128 ) 妇孺皆知,前端优化中最重要的优化手段之一就是cdn加速,所谓cdn加速就是采用更多的缓存服务器(CDN边缘节点), ...
- Javaweb-文件上传和邮件发送
1.文件上传 新建空项目 准备工作 在maven仓库里下载commons io 和 commons fileupload两个jar包 实用类介绍 文件上传注意事项 为保证服务器安全,上传文件应该放在外 ...
- you need to load the kernel first
背景:在用第三方软件备份win10系统时,提示you need to load the kernel first 1.进BIOS把硬盘AHCI 模式调整成 SATA. 2.检查硬盘数据线是否插紧.主板 ...
- C#《原CSharp》第四回 人常见岁月更替 却难知人文相继
纪芾显然此时并不是很能理解纪老爷子口中是也不是这句话的意思,不过他依然将这个要点记在了心里,方便以后悟出其最终门道的时候进行比对. "今天,我在璃月港北边的一户人家,遇到了一个挺有意思的后生 ...
- MyBatis-Plus 配置文件
MyBatis-Plus在实际工作中常用到的配置,供自己和大家查阅学习. mybatis-plus: mapperPackage: com.**.**.mapper # 对应的 XML 文件位置 ma ...
- java-分支结构(四种基本分支结构的认识)
分支结构:有条件的执行某语句,并非每句必走 1)if结构:1条路 2)if...else结构:2条路 3)if...else if结构:多条路 4)switch...case结构:多条路 优点:效率高 ...
- 安装 NetworkManager(Debian最小化安装)
Debian最小化安装是没有NetworkManager 1 安装: 2 [root@debian]apt install -y netwok-manager 1 启动(查看网卡): 2 [root@ ...
- 给网站添加pjax无刷新,换页音乐不中断
自从博客加了悬浮音乐播放器后就一直在折腾换页音乐不中断的功能 在网上查找后发现想要实现换页音乐不中断的功能必须要为博客加pjax,于是又苦苦寻找并尝试了一番 最后发现网上实现pjax功能基本上是两种方 ...