husky与lint-staged学习

husky简介

Husky是一个Git hook工具，可以帮助我们在git事件发生时自动运行脚本。git hook是一种机制，它允许在git执行操作时自动支行特定脚本，以执行自定义操作。

https://typicode.github.io/husky/zh/

git hook有： https://git-scm.com/docs/githooks

在提交或推送时，自动化 检查提交信息、检查代码 和 运行测试。

快速开始

安装：

pnpm add --save-dev husky

git管理：

如果已经被git管理就不用了。

git init

husky init:

pnpm exec husky init

执行完这个命令后，会在项目中添加.husky目录，添加pre-commit文件，pre-commit中有 pnpm test命令。

就是commit之前执行pnpm test命令。 可以换成：

echo "执行自定义脚本"

测试：

git commit -m "xxxx"

安装lint-staged

Lint-staged 是 一个工具，可以在git暂存区的文件上运行,就是只检查暂存区的文件。lint-staged支持多种lint工具，如eslint、perttier、stylelint等。

https://github.com/lint-staged/lint-staged

安装及使用

pnpm add install --save-dev lint-staged

配置规则：

在项目的package.json中添加lint-staged配置：

"lint-staged": {
    "*.{js,ts,vue}": [
      "prettier --write",
      "eslint --fix"
    ],
    "*.css" : "prettier --write"
  }

上面配置是所有js/ts/vue使用eslint 和 prettier修复。css 进行并发的prettier修复。

更多配置还是看git的readme文件吧。

可以创建一些不符合规则的语句用于测试。

执行：

pnpm exec lint-staged

执行之前，一定要保证已经提交至暂存区，就是执行了git add 操作，没有重新add但是重修改了这个文件，执行lint-staged后出现还原情况。

整合进husky

在pre-commit中添加：

pnpm exec lint-staged

也可以配置成package.json中脚本，再使用脚本执行。

"scripts": {
  // ... 省略 ...
  "lint": "lint-staged"
}

在pre-commit中添加：

pnpm lint