Git Hooks

前端工程化模块化开发

如果团队中某个成员没有按照要求使用lint工具,在代码提交至仓库之前未执行lint工作,把有问题的代码提交到了远程仓库。

如果口头约定让大家进行lint操作只是形式,所以可以通过Git Hooks在代码提交前强制lint

# Git Hooks介绍

  • Git Hooks也称之为git钩子,每个钩子都对应一个任务,比如commit,push
  • 通过 shell脚本可以编写钩子任务触发时要具体执行的操作

# Git Hooks工作机制

  1. 创建一个文件夹githooks-sample,然后使用git init初始化一个仓库
  2. .git/hooks/中有很多的.sample文件,每一个sample就是一个钩子。
  3. 我们需要重点关心pre-commit.sample的钩子,它对应的就是我们的commit操作,当我们触发commit操作的时候就可以触发里面的任务。
  4. .git/hooks/中新建一个文件,名为pre-commit,写测试代码
#!/bin/sh
echo "before commit"
1
2
  1. githooks-sample中创建demo.txt文件
touch demo.txt
vim demo.txt
1
2

随便编辑一些东西,保存之后git提交到本地

$ git commit -m '2222'
# 这里可以看到pre-commit里面的代码输出了。
before commit
[master (root-commit) 6f48ff4] 2222
 1 file changed, 1 insertion(+)
 create mode 100644 demo.txt

1
2
3
4
5
6
7

这样我们就可以在钩子执行的时候定义一些我们要执行的任务。我们就可以在commit之前强制执行lint操作。

# ESLint 结合 Git Hooks

面临的问题: 很多前端开发者并不擅长使用shell脚本来编写功能,所以 有人开发了一个npm模块 —— Husky

# Husky

Husky可以实现在不编写脚本的情况下也可以直接使用Git Hooks带来的一些功能。

  1. 安装eslintnpm i eslint -D并初始化,安装模块npm install husky -D,在.git/hooks/中我们可以看到文件中有很多自定义的钩子

image

  1. 准备文件index.js
const a=1;
1
  1. 在package.json中填写配置
{
  ...
  "scripts": {
    "test": "eslint index.js"
  },
  ...
  "husky":{
  // 钩子对象里面写对应的任务
    "hooks": {
      "pre-commit": "npm run test"
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  1. .gitignorenode_modules忽略,进行git提交git commit -m 'commit lint',可以看到eslint有输出,这样代码就不会直接提交到仓库中了。

image

但是如果我们除了在提交前检查完eslint还要进行格式化,那这个husky就不够用了。需要另一个插件 —— lint-staged

# lint-staged

  1. 安装模块 npm i lint-staged -D,在安装格式化工具npm i prettier -D
  2. 在package.json中进行配置选项
{
  ...
  "scripts": {
    "test": "eslint index.js",
    // 这里使用命令
    "precommit": "lint-staged"
  },
  ...
  "husky": {
    "hooks": {
      // 这里执行precommit命令
      "pre-commit": "npm run precommit"
    }
  },
  "lint-staged": {
    // 这里要进行严格的语法配置,值是一个数组,依次执行命令
    "*.js": [
      "eslint",
      // 这里执行eslint之后执行perttier
      "prettier"
    ]
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  1. an在命令行中提交代码就可以看到先执行eslint,之后执行prettier

image

这里旨在演示怎么用,具体的东西还需要查阅相关文档。

更新时间: 2021-12-18 20:56