React18中Husky+lint-staged调用Prettier提交格式化失败问题

问题分析 #

本地终端能正常运行prettier命令，但husky触发lint-staged执行prettier --write时提示'prettier' 不是内部或外部命令，核心原因是husky钩子的运行环境PATH变量和终端环境不一致：

• 本地安装的prettier存放在项目node_modules/.bin目录下，终端通常会自动将这个目录加入PATH（比如通过npm/yarn的shell配置）
• husky的钩子运行在简化的环境中，PATH不包含项目的node_modules/.bin，导致直接调用prettier找不到可执行文件

解决方案 #

方案1：用npx调用本地prettier #

修改lint-staged配置，通过npx指定调用项目本地的prettier：

"lint-staged": {
  "**/*.{ts,tsx}": [
    "npx prettier --write"
  ]
},

方案2：通过npm script包裹命令 #

在package.json的scripts中新增一个命令，再让lint-staged调用这个npm脚本：

"scripts": {
  ...
  "precommit": "lint-staged",
  "prepare": "cd .. && husky install my-project/.husky",
  "prettier:write": "prettier --write"
},
"lint-staged": {
  "**/*.{ts,tsx}": [
    "npm run prettier:write"
  ]
},

npm会自动处理node_modules/.bin的路径，确保能找到prettier。

方案3：手动给husky钩子添加PATH #

打开项目.husky/pre-commit文件，在开头添加PATH配置：

• 类Unix系统（Mac/Linux）：

export PATH="$PATH:./node_modules/.bin"

• Windows系统：

set PATH=%PATH%;./node_modules/.bin

这样钩子运行时就能找到node_modules/.bin下的prettier了。

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