如何通过Husky预提交钩子让Prettier格式化文件纳入同次提交

步骤1：安装/重新安装lint-staged #

确保项目已安装lint-staged，若之前配置失败，执行以下命令重新安装：

yarn add lint-staged --dev

步骤2：配置lint-staged规则 #

在package.json中添加lint-staged字段，指定仅处理暂存区的文件，格式化修复后自动重新暂存：

{
  // ... 保留原有配置
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ]
  }
}

该配置会对src目录下的所有JS/JSX/TS/TSX文件执行：Prettier格式化 → ESLint自动修复 → 将修改后的文件重新加入暂存区。

步骤3：修改Husky预提交钩子 #

替换原有钩子内容，改为调用lint-staged并保留测试命令：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

lint-staged && clear && yarn test -- --watchAll=false

此时提交时，lint-staged会自动处理暂存文件，格式化后的修改会被纳入本次提交。

额外配置：确保ESLint与Prettier协同工作 #

更新package.json中的eslintConfig，集成Airbnb规则与Prettier，避免格式冲突：

{
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "airbnb",
      "airbnb-typescript",
      "prettier"
    ],
    "plugins": ["prettier"],
    "rules": {
      "prettier/prettier": "error"
    }
  }
}

内容的提问来源于stack exchange，提问作者cblnpa