用git hook 提交前检查

前言

git hook大家一般都有所了解，在git提交的时候，我们可以去触发git的钩子，去做一系列的事情，例如commit前跑单测、commit的内容检查、eslit是否可以通过等等 如果对git hook不太了解的同学推荐大家这篇文章 一文带你彻底学会 Git Hooks 配置

关于git hook的工具，现在也有很多轮子可以用：

1. git-hook
2. husky
3. simple-git-hooks

husky 和 simple-git-hook 实际都是git的简化工具，可以使我们更加简单的使用git hook,

husky

husky的使用是在package.json里直接配置钩子需要的操作

// package.json
{
    ...,
    husky: {
        hook: {
            'pre-commit': 'lint-staged',
            'commit-msg': 'commitlint'
        }
    }
}

这里使用 husky 出发 pre-commit 的钩子函数时，去执行另外一个命令，叫做 lint-staged 的命令，lint-stage 是为了区分哪些代码需要检查的，提交时我们仅需要检查暂存区内的内容，不需要全部修改文件都检查，lint-staged 配置如下, 其中图片进行了单独处理，使用了 imagemin-lint-staged

module.exports = {
  '*.{js,ts}': ['yarn lint:eslint', 'yarn lint:prettier', 'yarn test:unit:git'],
  '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': [
    'yarn lint:prettier --parser json'
  ],
  'package.json': ['yarn lint:prettier'],
  '*.vue': [
    'yarn lint:eslint',
    'yarn lint:stylelint',
    'yarn lint:prettier',
    'yarn test:unit:git'
  ],
  '*.scss': ['yarn lint:stylelint', 'yarn lint:prettier'],
  '*.md': ['yarn lint:markdownlint', 'yarn lint:prettier'],
  '*.{png,jpeg,jpg,gif,svg}': ['imagemin-lint-staged']
}

而commit-msg的钩子则触发了commitlint命令,使用的包是@commitlint/cli，并且引用了git提交的推荐配置@commitlint/config-conventional

//commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
}

simple-git-hook

simple-git-hook的使用更加简单，只针对hook，在上面husky的基础上， 给package.json改成下面这样即可

{
    ...,
    simple-git-hooks: {
        'pre-commit': 'lint-staged',
        'commit-msg': 'commitlint'
    }
}

总结

如果对git的使用只有hook的话，没有必要去安装 husky,只需要安装更加简便的simple-git-hooks即可，如果对git定制化需求比较多，再安装husky