React项目中Husky与lint-staged无法触发Prettier格式化问题排查

1. Husky 未正确绑定 pre-commit 钩子 #

由于 Git 仓库在 frontend 目录外部，需确保 Husky 能关联到仓库的 Git 钩子系统：

• 若未初始化 Husky，先在 frontend 目录执行：npx husky install
• 添加 pre-commit 钩子：npx husky add .husky/pre-commit "npx lint-staged"
• 也可直接在 frontend/package.json 中配置 Husky 钩子：

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
  

2. lint-staged 未配置 Prettier 格式化规则 #

在 frontend/package.json 中添加 lint-staged 配置，指定需要格式化的文件类型及执行命令：

"lint-staged": {
  "**/*.{js,jsx,ts,tsx,json,css,md}": [
    "prettier --write",
    "git add"
  ]
}

可根据项目实际文件类型调整后缀（比如仅保留 .jsx、.tsx）。

3. 缺少 Prettier 配置文件 #

需在 frontend 目录下创建 Prettier 配置文件，比如 .prettierrc：

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

或直接在 frontend/package.json 中添加 prettier 字段：

"prettier": {
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

无配置文件时，Prettier 可能无法识别格式化规则，导致不执行操作。

4. 钩子脚本需适配仓库目录结构 #

若执行钩子时出现依赖找不到的问题，修改 .husky/pre-commit 脚本，先切换到 frontend 目录再执行命令：

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

cd frontend && npx lint-staged

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