在 WebStorm 中配置保存时自动使用 Prettier 格式化代码，能有效统一代码风格。以下汇总了关键的配置方法和注意事项。
| 配置步骤 | 关键操作 | 说明/参考 |
|---|---|---|
| ① 安装 Prettier | 在项目根目录执行 npm install prettier --save-dev |
确保在项目中本地安装 Prettier。 |
| ② 启用与关联 | Settings > Languages & Frameworks > JavaScript > Prettier | 勾选 "Enable"，并设置 "Prettier package" 为项目中的 node_modules/prettier 路径。 |
| ③ 触发方式 | 方式1 (推荐): 同②位置，勾选 "On 'Reformat Code' action" 和 "On Save"。<br>方式2: Settings > Tools > File Watchers，添加 Prettier 并启用。 | "On Save" 最直接。File Watchers 也可实现保存时自动格式化。 |
| ④ 设为默认 | 同②位置，勾选 "On 'Reformat Code' action"。 | 这样使用 WebStorm 默认格式化快捷键 (Ctrl+Alt+L) 时会调用 Prettier。 |
💡 配置注意事项
-
规则冲突：如果项目中同时配置了 ESLint，其规则可能与 Prettier 冲突。建议在 ESLint 配置中扩展
"prettier"，并使用"prettier/prettier": "error"规则，让 ESLint 报告 Prettier 格式问题。这能避免自动修复时的循环冲突。 -
团队配置：为了团队代码风格一致，项目根目录下应有
.prettierrc配置文件，定义具体规则（如单引号、缩进等）。WebStorm 会优先采用这些规则。 -
共享设置：若想团队共享 WebStorm 的 Prettier 配置（如开启"On Save"），可以尝试将
.idea目录下的prettier.xml文件纳入版本控制。但注意，其他 IDE 设置也可能在此目录，需谨慎处理。
完成配置后，可以创建一个代码格式稍显凌乱的文件，保存一下看看 Prettier 是否会自动将其格式化。如果遇到问题，可以检查 Prettier 在项目中是否能独立正常运行，以及 WebStorm 中的 Prettier 包路径是否正确。
希望这些步骤能帮助你顺利配置好自动格式化。
