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


相关文章
|
9月前
|
开发工具 git
vue3+ts:约定式提交(git husky + gitHooks)
vue3+ts:约定式提交(git husky + gitHooks)
97 0
|
1月前
|
弹性计算 开发工具 git
如何创建符合计算巢规范的Git仓库
为了简化软件云化部署,阿里云计算巢提供了一站式平台,开发者仅需将自己的git仓库配置为符合计算巢服务规范,即可实现自动化部署到云端。官方提供了多个模板,涵盖不同架构和部署物类型,便于开发者从计算巢官方仓库fork并定制。重要文件包含config.yaml和,用于配置服务构建参数。通过计算巢控制台,即可完成服务的创建和发布,实现软件的云上部署。
|
3月前
|
前端开发 测试技术 持续交付
【开发规范】Git Commit 规范
【1月更文挑战第26天】【开发规范】Git Commit 规范
|
3月前
|
数据可视化 测试技术 持续交付
Git Flow规范在工作中的使用流程
Git Flow规范在工作中的使用流程
39 0
|
3月前
|
JavaScript 测试技术 持续交付
2020你应该知道的git commit规范
2020你应该知道的git commit规范
89 0
|
4月前
|
设计模式 程序员 Go
Git操作不规范,战友提刀来相见!
Git操作不规范,战友提刀来相见!
|
4月前
|
开发工具 git
|
5月前
|
开发工具 git
百度搜索:蓝易云【Git提交规范详解】
请注意,具体的Git提交规范可以根据团队的实际需求进行定制和调整。以上提供的是一种常见的规范作为参考,您可以根据团队的喜好和项目特点进行适当的修改。
38 0
|
5月前
|
算法 数据可视化 开发工具
第三代软件开发-Git提交规范
欢迎来到我们的 QML & C++ 项目!这个项目结合了 QML(Qt Meta-Object Language)和 C++ 的强大功能,旨在开发出色的用户界面和高性能的后端逻辑。 在项目中,我们利用 QML 的声明式语法和可视化设计能力创建出现代化的用户界面。通过直观的编码和可重用的组件,我们能够迅速开发出丰富多样的界面效果和动画效果。同时,我们利用 QML 强大的集成能力,轻松将 C++ 的底层逻辑和数据模型集成到前端界面中。 在后端方面,我们使用 C++ 编写高性能的算法、数据处理和计算逻辑。C++ 是一种强大的编程语言,能够提供卓越的性能和可扩展性。我们的团队致力于优化代码,减少资
|
5月前
|
开发工具 git
DEA git提交规范插件(git commit template插件)
DEA git提交规范插件(git commit template插件)
235 0