使用 husky 和 lint-staged 实现 pre commit

代码规范是前端工程化中非常重要的一步，我们希望在提交代码前，对暂存的代码进行格式化、语法检查、测试等操作，以保证代码的质量。

husky 是一个 git hook 工具，可以在 git hook 中执行脚本，lint-staged 可以在 git hook 中执行指定的文件，让脚本只对暂存的文件执行。

因此，我们可以使用 husky 和 lint-staged 一起来配置 pre commit，实现在提交代码前对暂存的文件进行格式化、语法检查等操作。

• husky 官网：typicode.github.io/husky/
• lint-staged 官网： github.com/lint-staged…

v9 的配置方式和 v8 有所不同，本文介绍 husky v9 的配置方式。

如果需要 husky v8 迁移 v9，可以参考：github.com/typicode/hu…

安装依赖

安装在开发依赖中

bun add -D husky lint-staged
# or
pnpm add -D husky lint-staged
# or
npm install --save-dev husky lint-staged

执行命令

bunx husky init
# or
pnpx husky init
# or
npx husky init

husky 会在根目录下生成一个 .husky 文件夹，里面包含了 pre-commit 等配置文件。

配置 package.json

这段配置依赖 prettier 和 eslint，如果你没有安装，请先配置 prettier 和 eslint。如果需要在 pre-commit 时对图片进行压缩，还需要安装 tiny-files。

我希望在 pre-commit 的时候对暂存的代码执行以下脚本：

• 对 vue/js/ts/tsx 文件执行格式化和语法修复
  • 依赖 prettier 和 eslint
• 对 css 等文件执行格式化
  • 依赖 prettier
• 对图片文件执行 tiny 压缩（可选）
  • 需要 tiny 的 key，可以在 tinypng.com/ 获取
  • 依赖 tiny-files，参考安装和使用：github.com/leglegend/t…

在 package.json 中添加如下配置：

{
  "scripts": {
    // ...
  },
  "dependencies": {
    // ...
  },
  "devDependencies": {
    // ...
  },
  "lint-staged": {
    "*.{vue,js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --fix"
    ],
    "*.{css,scss,md,json}": "prettier --write",
    "*.{png,jpg,jpeg}": "tiny-files --key <tiny key>" # 可选
  }
}

配置 pre commit

npx lint-staged --relative

测试

git add .
git commit -m "chore: add husky"

如果有语法问题无法自动修复，会提交失败。如果你使用 VSCode 可视化提交，弹窗报错不会告诉你问题原因，请在控制台手动执行 git commit -m 'feat: any'，查看控制台报错，手动修复代码问题后再次提交。

最后，注意每次修改 lint-staged 后都要重新执行 bun/pnpm/npm prepare （执行 install 时也会执行 prepare），pre commit 才会生效。