whlit's blog

Appearance

使用 simple-git-hooks 进行提交前格式化 ​

simple-git-hooks 是一个简单的 git hooks 的集成工具，它具有零依赖、配置简单、轻量级等特点。

安装 ​

sh
$ npm i -D simple-git-hooks
sh
$ pnpm i -D simple-git-hooks
sh
$ yarn add -D simple-git-hooks

配置 ​

在 package.json 中添加 simple-git-hooks 配置

json
{
  "scripts": {
    "docs:dev": "vitepress dev",
    "docs:build": "vitepress build",
    "docs:preview": "vitepress preview",
    "format": "prettier --write ."
  },
  "devDependencies": {
    "lint-staged": "^15.2.7",
    "prettier": "^3.2.5",
    "simple-git-hooks": "^2.11.1",
    "vitepress": "^1.0.1"
  },
  "simple-git-hooks": {

    "pre-commit": "pnpm lint-staged"
  }, 
  "lint-staged": {
    "*": "prettier --write --ignore-unknown"
  }
}

更新 Git hooks ​

运行cli脚本来将hooks命令更新到git hooks中

sh
$ npx simple-git-hooks
sh
$ pnpm simple-git-hooks
sh
$ ynpx simple-git-hooks
sh
$ yarn dlx simple-git-hooks

结合 prettier 和 lint-staged 使用 ​

prettier 是一个代码格式化工具，用于格式化代码。lint-staged 是一个只对暂存区的文件执行命令的工具。

  • 安装prettier

prettier的安装配置可以参照Vite + React + TypeScript + ESLint + Prettier

  • 安装lint-staged
sh
$ npm i -D lint-staged
sh
$ pnpm i -D lint-staged
sh
$ yarn add -D lint-staged
  • 配置lint-staged

在 package.json 中添加 lint-staged 配置

json
{
  "scripts": {
    "docs:dev": "vitepress dev",
    "docs:build": "vitepress build",
    "docs:preview": "vitepress preview",
    "format": "prettier --write ."
  },
  "devDependencies": {
    "lint-staged": "^15.2.7",
    "prettier": "^3.2.5",
    "simple-git-hooks": "^2.11.1",
    "vitepress": "^1.0.1"
  },
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged"
  },
  "lint-staged": {

    "*": "prettier --write --ignore-unknown"
  } 
}

也可以针对文件类型进行配置

json
{
  "lint-staged": {
    "*.js": "eslint",
    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.md": "prettier --write",
    "!(*.js|*.ts|*.md)": "prettier --write"
  }
}

提交不生效 ​

如果之前使用的是husky，现在使用simple-git-hooks不生效，可能是因为husky修改了core.hooksPath的值。

sh
$ git config core.hooksPath

使用上面的命令查询当前git仓库的hooks路径，如果目录不是.git/hooks，则需要修改。

sh
$ git config core.hooksPath ./.git/hooks

链接 ​