git commit前检测husky与pre-commit

pakolagij 发布于2019-08-23 10:53 / 436人阅读

摘要：现在大前端主要有两种钩子插件与都在用，在用。而前端的小伙伴们则可以用插件与，来使钩子生效。注意一般为隐藏文件，可以把项目拖入中查看文件里的内容一般不允许手动更改的。

一、前言

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

二、git钩子

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

    cd .git/hooks
    ls -l

上图为各个钩子的案例脚本，可以把sample去掉，直接编写shell脚本来执行。
而前端的小伙伴们则可以用插件husky与pre-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里的脚本，没有问题了再提交。

具体案例可查看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

参考资料

https://raoenhui.github.io/nodejs/git/2018/08/10/preventcommit

https://www.npmjs.com/package/husky

https://www.npmjs.com/package/pre-commit

https://www.jianshu.com/p/072a96633479

Happy coding .. :)

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96778.html

Lint Your Code

摘要：形成良好统一的代码规范，有利于提高代码的可读性，减少潜在的错误，便于团队协作开发。其中是可选的，如果没有则禁用所有规则，如果有则禁用所有规则。也可以定义一个命令同时运行这两个命令，我在这里使用了我们定义了在钩子触发时会执行命令。形成良好统一的代码规范，有利于提高代码的可读性，减少潜在的错误，便于团队协作开发。本文简单介绍JS、CSS、 Git Commit 的规范工具及用法。 Lin...

hidogs 2019-08-23 10:27 评论0 收藏0
在Typescript项目中，如何优雅的使用ESLint和Prettier

摘要：对于项目的编码规范而言，主要有两种选择和。此外由于性能问题，官方决定全面采用，甚至把仓库作为测试平台，而的解析器也成为独立项目，专注解决双方兼容性问题。最近在我的项目的编码规范中全量的用代替了针对其中遇到的问题做一个记录。对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由...

chemzqm 2019-08-02 15:27 评论0 收藏0
在Typescript项目中，如何优雅的使用ESLint和Prettier

摘要：对于项目的编码规范而言，主要有两种选择和。此外由于性能问题，官方决定全面采用，甚至把仓库作为测试平台，而的解析器也成为独立项目，专注解决双方兼容性问题。最近在我的项目的编码规范中全量的用代替了针对其中遇到的问题做一个记录。对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由...

WilsonLiu95 2019-08-23 18:29 评论0 收藏0
在Typescript项目中，如何优雅的使用ESLint和Prettier

摘要：对于项目的编码规范而言，主要有两种选择和。此外由于性能问题，官方决定全面采用，甚至把仓库作为测试平台，而的解析器也成为独立项目，专注解决双方兼容性问题。最近在我的项目的编码规范中全量的用代替了针对其中遇到的问题做一个记录。对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由...

琛ｈ。 2019-08-30 11:18 评论0 收藏0
pre-commit钩子，代码质量检查

摘要：目前基本使用三款代码质量检查工具。使用脚本检查，可以参考里面如何使用文件名是在之前启用的钩子函数，利用查看当前有哪些文件修改过，只对指定文件夹中修改的文件使用进行代码检查，渐进式对整个项目实现代码规范。目前基本使用三款js代码质量检查工具： jslint, jshint, eslint。许多IDE里面也有对应的检查插件，在每次ctrl + s 保存文件的时候，检查当前文件是否符合规范...

stefanieliang 2019-08-02 11:46 评论0 收藏0