git commit前检测husky与pre-commit

2018-08-10 admin

一、前言

现在最流行的版本管理工具非git莫属,而良好的代码规范有助于项目的维护,为了防止一些不规范的代码 commitpush到远端,我们可以在git命令执行前用一些钩子来检测并阻止。现在大前端主要有两种git钩子插件:husky(jquery与next.js都在用),pre-commit(antd在用)。 下面我将现介绍一个git钩子,再介绍下huskypre-commit的用法

二、git钩子

用过git的小伙伴们都知道git有很多命令commitpushrebase等等。那这些命令主要是在执行.git文件夹中的东西,那么git 钩子目录就是在.git文件夹的hooks下,如下所示:

    cd .git/hooks
    ls -l

hook.png

上图为各个钩子的案例脚本,可以把sample去掉,直接编写shell脚本来执行。 而前端的小伙伴们则可以用插件huskypre-commit,来使钩子生效。

注意: 一般.git为隐藏文件,可以把项目拖入IDE中查看,.git文件里的内容一般不允许手动更改的。

三、husky

husky能够防止不规范代码被commit、push、merge等等。 首先安装husky

    npm install husky --save-dev

    yarn add husky --dev

编辑package.json文件,如:

{
  "scripts": {
    "precommit": "webpack  --config ./web/webpack.config.js",
    "...": "..."
  }
}

当你git commit的时候,将会现现执行 precommit里的脚本,没有问题了再提交。

husky.png

具体案例可查看https://github.com/raoenhui/create-img

四、pre-commit

pre-commit能够防止不规范代码被commit,没有husky这么全面,但是你可以接着安装pre-push等插件来防止对应的git操作。下面以pre-commit为例:

首先安装pre-commit

    npm install pre-commit --save-dev

编辑package.json文件,如:

"scripts": {
    "test": "echo \"Error: I SHOULD FAIL LOLOLOLOLOL \" && exit 1",
    "foo": "echo \"fooo\" && exit 0",
    "bar": "echo \"bar\" && exit 0"
  },
  "pre-commit": [
    "foo",
    "bar",
    "test"
  ]

pre-commit的配置项非常灵活,还可以下面这样写:

{
  "precommit": "foo, bar, test"
  "pre-commit": "foo, bar, test"
  "pre-commit": ["foo", "bar", "test"]
  "precommit": ["foo", "bar", "test"],
  "precommit": {
    "run": "foo, bar, test",
  },
  "pre-commit": {
    "run": ["foo", "bar", "test"],
  },
  "precommit": {
    "run": ["foo", "bar", "test"],
  },
  "pre-commit": {
    "run": "foo, bar, test",
  }
}

你配置好后,执行git commit命令,它将会依次执行foo、bar、test来检测完善代码。

五、总结

我们已经怎么用git钩子插件了,那么我们一般用它来做什么呢。 prevent commit时,我们可以把eslint以及test命令加上,检测代码规范:

"scripts": {
    "precommit": "lint-staged && npm run test"
  }

prevent publish 主干分支时,我们可以把tag打上:

"scripts": {
    "precommit": "npm run tag"
  }

具体怎么自动化打tag标签,可以参考我的另外篇文章https://raoenhui.github.io/nodejs/git/2018/03/30/nodejs%E8%87%AA%E5%8A%A8%E7%94%9F%E6%88%90tag

参考资料

Happy coding … :)

原文链接:https://segmentfault.com/a/1190000015953265

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37664.html

文章标题:git commit前检测husky与pre-commit

相关文章
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
移动端网页设计经验与心得
智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上。 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝、黑、白,界面单调,并且要尽可能的设计简单。 现在情况就大不相同了,软件上we...
2015-12-23
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
Easyui Tree获取当前选择节点的所有顶级父节点
只支持四层目录结构,比较笨的一个方法 JS代码 var node = $('#tree').tree('getSelected'); //获取该节点所有父节点 ...
2017-03-17
javascript:;与javascript:void(0)区别
javascript:;直接返回undefined javascript:void(0);要去执行一次表达式“0”,然后返回undefined ...
2017-05-12
express不是内部或外部命令
最新express4.0版本中将命令工具分家出来了(项目地址:https://github.com/expressjs/generator) 安装一个命令工具,命令如下: npm install -g express-generator ...
2015-11-12
性能与生态双突破 HTML5重现爆发曙光
走过早熟的WebAPP,也经历过概念性的“轻应用”,HTML5这个被视作移动互联网未来的技术标准,终于在2015年看到了爆发的曙光。1月 15日,搜狐发布基于HTML5的“手机搜狐网3.0,加上微信几天前开放HTML5接口,HTML5很可能...
2015-11-12
2015年预测:Web体验与以往的五大不同
在过去的一年,我们见证了Uber的崛起、Apple加入了可穿戴设备的竞赛中、以及诸如Facebook收购Whatapp这类大的并购事件。那么在2015年我们将看到哪些巨大的改变?这里列出了五个对未来的预测 更清洁、简单的内容 2013年...
2015-11-11
Bootstrap显示与隐藏简单实现代码
本文实例为大家分享了bootstrap显示隐藏的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta http...
2017-03-14
回到顶部