Prettier需手动设为默认格式化器并启用formatOnSave,检查语言模式、插件加载、配置文件、忽略路径及项目依赖。

检查 Prettier 是否已设为默认 JavaScript/TypeScript 格式化工具
VSCode 不会自动把 Prettier 当作格式化器,即使你装了插件。它默认用内置的格式化器(比如 vscode.typescript-language-features),所以保存时根本不会调用 Prettier。
你需要手动指定:打开设置(Cmd+, 或 Ctrl+,),搜索 default formatter,找到对应语言的设置项,例如:
-
Editor: Default Formatter→ 全局设置(不推荐) -
JavaScript > Format: Default Formatter→ 设为esbenp.prettier-vscode -
TypeScript > Format: Default Formatter→ 同样设为esbenp.prettier-vscode
注意:如果项目里有 .prettierrc 或 prettier.config.js,VSCode 会自动读取;但若配置文件语法错误(比如多了一个逗号),Prettier 会静默失败——此时保存无反应,也无报错提示。
确认保存时“格式化”功能确实被触发
VSCode 的 editor.formatOnSave 必须开启,且不能被工作区或语言特定设置覆盖。
- 检查全局设置中
Editor: Format On Save是true - 在项目根目录打开文件时,留意右下角状态栏是否显示当前语言模式(如
JavaScript React),某些语言模式(如Plain Text)不支持格式化 - 按
Shift+Alt+F手动格式化,看是否生效:如果手动也不行,说明格式化器没加载成功;如果手动可以但保存不行,就是formatOnSave被禁用了 - 检查是否有冲突扩展,比如
Beautify、ESLint插件启用了eslint.autoFixOnSave(旧版),它可能抢占保存钩子并阻止 Prettier 运行
排查 Prettier 插件自身未正确加载
插件启用状态和版本兼容性常被忽略。VSCode 1.8x+ 对插件 API 有调整,老版本 prettier-vscode(如 v9.x 以下)可能无法初始化。
- 在扩展面板搜索
Prettier,确认安装的是官方esbenp.prettier-vscode(作者名必须是esbenp) - 点击插件右下角齿轮 →
Disable再Enable,强制重载 - 打开命令面板(
Cmd+Shift+P),输入Developer: Toggle Developer Tools,切换到 Console 标签页,保存一个文件,看是否有类似Cannot find module 'prettier'或Prettier not found的报错 - 如果有,说明插件试图从工作区
node_modules找 Prettier,但没找到——此时需在项目里运行npm install --save-dev prettier,或在插件设置中启用Prettier: Require Config并确保配置文件存在
检查文件路径是否被 Prettier 忽略
Prettier 默认跳过 node_modules、dist、build 等目录,但如果你在这些路径下编辑文件(比如调试时直接改了 node_modules/some-lib/index.js),它会直接不处理。
- 打开 VSCode 设置,搜
prettier.ignorePath,确认值是.prettierignore(默认) - 检查项目根目录是否存在
.prettierignore,内容是否意外包含了你正在编辑的文件或目录(比如写了*或src/**/*) - 在终端运行
npx prettier --find-config-path /your/file.js,看是否返回配置路径;再运行npx prettier --check /your/file.js,验证 CLI 层面能否识别并格式化该文件
最常被卡住的地方其实是:插件装了、配置写了、设置开了,但语言模式不对(比如 .ts 文件被识别成 TypeScript Auto Import 模式),或者项目里没装 prettier 包而插件又没配 fallback。这些都不会报错,只会安静地什么都不做。











