git 提交之规范校验 (eslint+husky+prettier)

简介: git 提交之规范校验 (eslint+husky+prettier)

开发过程中为了统一团队编码规范,会用 Eslint 去检查和自动修复 js 代码。但是代码规范检查不通过,还是可以提交 commit 记录的,这显然是有问题的, 还好 git hook 提供了很多钩子函数绑定在 git 各个命令上,这样就可以把 eslint 代码检查放在 pre-commit hook 中, 这样如果eslint 检查不通过就不让提交了。

1、Git hooks(git钩子)

默认情况下项目中 .git/hooks(.git文件夹下的hooks文件夹) 中已经内置了很多 hook,比如 pre-commit。如下图:


image.png


image.png

这些hooks文件夹下有很多git默认自带的钩子文件,这里我们主要使用pre-commit这个钩子文件。

我们找到.git/hooks/pre-commit文件,修改当前文件里的内容为:

echo '我是测试pre-commit钩子命令的'

然后在git 面板里执行git commit 命令,可以看到我们在执行git commit 命令时候触发了pre-commit钩子,输出了:'我是测试pre-commit钩子命令的'。如下图


image.png


image.png


我们在.git/hooks/pre-commit文件里执行了输出一行字,那如果我们修改当然文件,让文件执行eslint校验,如下图


image.png


image.png


注意.git/hooks/pre-commit文件里写 npm run eslint 那么一定要在package.json文件里添加如下代码:

"scripts": {
  "eslint": "eslint --ext .js,.vue zdyProject/" //注意这个zdyProject/是我测试的文件目录,请根据自己代码自行修改
},

到这里基本就完成了git提交时执行eslint校验功能了。但是在实际的团队项目里我们并不会这样做,因为我们是团队合作,.git/hooks/pre-commit文件修改后只会在本地,并不能上传到git上供其它成员使用,因为git会忽略.git文件夹下的文件。这个时候husky就可以解决这个问题。

2、husky

github为了解决.git配置不能提交远程仓库的问题,husky 出来了,husky 在你npm i安装完依赖只有自动执行husky install。

2.1、安装husky

npm install husky -D
2.2、使用husky

编辑package.json在script里添加prepare的值为husky install

"scripts": {
    "prepare":"husky install"
  },

然后执行npm run prepare,这个命令做了什么事呢 ?实际上就是创建 .husky 目录,修改了.git/config文件里的hooksPath字段(设置 .husky 目录为 git hooks 目录)


image.png


image.png


我们在.husky目录下创建一个pre-commit文件,里面放入代码 npm run eslint(如下图a)。

我们随便修改一下项目里的文件,然后执行git add .,git commit -m '测试husky',发现代码已经被拦截,没有提交,因为index.vue代码不符合规范(效果如下图a)。

image.png

a.png

到这里husky的简单配置已经完成,但是试想一下有没有问题?,假如项目里有a.js,b.js文件,我修改了a.js,b.js文件,但是我执行了git add a.js(也就是只把a.js文件提到了git缓存),那如果我们现在git commit 应该也只应该校验a.js才对,但是按照上面的配置,我们会在git commit的时候会校验的项目下的全部文件,这显然不对,也就是我们.husky目录下的pre-commit文件内容显然是不能够做到这样的,这时候就必须改写pre-commit文件内容,pre-commit文件是一个shell文件,对前端而言肯定是一大难题,不好写。这个时候就要用到lint-staged,用它来解决这个问题。

3、lint-staged

lint-staged作用:对 Git 暂存区代码文件进行 bash 命令操作等等。

先安装

npm i lint-staged -D

package.json添加script

"scripts": {
  "eslint": "lint-staged"
},
"lint-staged": {
    "*.{js,vue}": [
      "prettier --write",
      "eslint --ext .js,.vue"
    ]
  }

随便修改一下项目里a.js,b.js文件,然后执行git add a.js,git commit -m 'test',可以发现调用了 eslint 去检查代码,eslint只检查了a.js文件,并没有校验b.js文件。检查不通过就退出commit。如下图b

image.png


相关文章
|
6月前
|
人工智能 缓存 开发工具
结合企业实践来规范你的Git commit(含插件使用指南)
结合企业实践来规范你的Git commit(含插件使用指南)
结合企业实践来规范你的Git commit(含插件使用指南)
|
1月前
|
前端开发 开发工具 git
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
34 5
|
1月前
|
前端开发 开发工具 git
搭建Registry&Harbor私有仓库、Dockerfile(八)+前端一些好学好用的代码规范-git hook+husky + commitlint
搭建Registry&Harbor私有仓库、Dockerfile(八)+前端一些好学好用的代码规范-git hook+husky + commitlint
19 0
|
3月前
|
消息中间件 小程序 Java
【规范】看看人家Git提交描述,那叫一个规矩
本文通过IDEA中的Git描述规范插件【git commit message helper】,介绍了Git提交描述的规范流程,强调了团队开发中统一标准的重要性,并通过实例展示了规范的提交记录如何提高代码管理和维护效率。最后,文章提供了几个实用的Git提交描述案例,帮助读者更好地理解和应用这些规范。
70 0
【规范】看看人家Git提交描述,那叫一个规矩
|
3月前
|
敏捷开发 小程序 持续交付
【规范】Git分支管理,看看我司是咋整的
本文介绍了Git分支管理规范的重要性及其在企业中的应用。通过规范化的分支管理,可加速团队协作、确保代码质量、维护主分支稳定,并支持敏捷开发。文中详细描述了主分支(如master、develop)和辅助分支(如feature、hotfix)的作用,并提供了实际开发流程示例,包括开发前、开发中、提测、预生产和部署上线等阶段的操作方法。旨在帮助团队提高效率和代码质量。
172 0
【规范】Git分支管理,看看我司是咋整的
|
3月前
|
开发工具 git
Git——commit的提交规范
Git——commit的提交规范
106 4
|
3月前
|
JavaScript 测试技术 开发工具
Git 分支设计规范
Git 分支设计规范
195 11
|
4月前
|
前端开发 JavaScript 开发工具
前端优化之路:git commit 校验拦截
前面在git分支规范那篇文章里,介绍了commit提交规范,但是想要做到高效落地执行,就需要做些别的功课。
|
3月前
|
存储 测试技术 开发工具
企业Git 规范的必要性-阿里云开发者社区
既然认同需要一份 Git 规范,那么这个规范需要规范哪些内容,解决哪些问题。
|
3月前
|
监控 程序员 开发工具
如何规范Git提交-参考阿里云开发者社区
这篇文章分享了如何规范Git提交,介绍了commit message的格式规范,并通过webhook监控机制来确保代码提交的规范性,从而提高研发效率和代码维护质量。