React项目如何通过devDependencies配置Prettier实现保存/提交前自动格式化

完全可行。这套基于项目内依赖收敛Prettier规则的方案是目前团队统一代码格式化规范的通用落地方式，完全不需要依赖开发者本地VSCode的个性化配置，所有规则、执行逻辑、依赖版本都存在项目代码仓库内，团队成员拉取代码安装依赖后即可获得一致的格式化效果。

你当前的基础依赖已经准备齐全，但有两个问题会导致配置不生效：

1. 你安装的是Husky v8版本，原package.json中写的husky.hooks字段是Husky v4及更早版本的配置方式，v8版本已不再支持该写法，会导致pre-commit钩子不执行。
2. package.json中dependencies配置块的最后一项"redux-thunk": "^2.4.1"末尾多了一个冗余逗号，标准JSON语法不支持该写法，会导致依赖安装时报解析错误，需要先删掉这个逗号。

1. 配置commit前自动格式化 #

首先删除package.json中冗余的husky配置块：

// 删掉这整段
"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged"
  }
}

在项目根目录执行以下命令，生成符合Husky v8规范的pre-commit钩子：

npx husky add .husky/pre-commit "npx pretty-quick --staged"

执行完成后给钩子文件添加可执行权限（Mac/Linux直接执行，Windows系统在Git Bash环境下执行即可）：

chmod +x .husky/pre-commit

这一步配置完成后，所有开发者执行npm install时会自动触发prepare脚本安装Husky钩子，每次执行git commit操作时，都会自动调用项目node_modules中安装的固定版本Prettier，对暂存区的代码执行格式化，不会调用开发者本地全局安装的Prettier。

建议在项目根目录新增.prettierignore文件，指定不需要格式化的路径，避免格式化构建产物、依赖目录等非业务代码，参考配置：

node_modules
build
dist
coverage
.env
.env.*

2. 配置保存时自动格式化（不依赖本地VSCode全局配置） #

不需要让开发者手动修改个人VSCode设置，只需要在项目根目录创建.vscode目录，在目录内新增settings.json文件，将该文件提交到代码仓库即可。VSCode打开项目时会优先读取该目录下的配置，优先级高于用户本地全局配置，且不会修改用户的全局VSCode设置，完全满足配置隔离的要求。

.vscode/settings.json参考配置：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.prettierPath": "./node_modules/prettier",
  "prettier.requireConfig": true,
  "prettier.useEditorConfig": false
}

核心配置说明：

• editor.formatOnSave: true：开启当前项目的保存自动格式化，不会影响用户其他项目的设置
• prettier.prettierPath：强制VSCode Prettier插件使用项目node_modules内安装的固定版本Prettier，而非用户本地全局安装的版本
• prettier.requireConfig：要求必须存在项目级Prettier配置才会执行格式化，避免误用到全局规则

为了避免团队成员漏装Prettier插件，可以在.vscode目录下新增extensions.json文件，配置插件推荐，VSCode打开项目时会自动提示安装推荐插件，不需要用户手动搜索：

{
  "recommendations": [
    "esbenp.prettier-vscode"
  ]
}

3. 配置验证 #

配置完成后可以通过两个场景验证效果：

• 打开任意业务代码文件，故意打乱缩进、调整行宽到超过120字符，按下保存快捷键，代码会自动按照.prettierrc.json中定义的规则格式化
• 提交一段不符合格式化规则的代码，执行git commit操作，提交动作触发前会自动对暂存区的代码执行格式化，格式化完成后才会进入后续提交流程

• 所有需要的依赖都已经在你的devDependencies中声明，不需要额外安装新包
• 所有配置文件都提交到Git仓库后，团队成员拉取最新代码只需要执行一次npm install，所有配置即可自动生效，不需要手动修改任何本地编辑器设置
• 后续需要调整格式化规则时，只需要修改项目根目录的.prettierrc.json文件，所有成员拉取最新代码后会自动应用新规则，不需要逐个调整本地配置

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