必须装prettier(esbenp.prettier-vscode)作为前端/全栈通用格式化器,python需配ms-python.black-formatter或autopep8,c/c++需ms-vscode.cpptools+clang-format,xml须dotjoshjohnson.xml-tools,go/java用官方扩展内置格式器;安装后须在format document with中指定默认格式化器、确保右下角语言模式正确、项目根目录存在prettier模块及配置文件,并启用editor.formatonsave。

VS Code 代码格式化插件不是“装一个就行”,得按语言选、按用途配,否则装了也白装。
哪些插件必须装、哪些可选装
Prettier 是前端/全栈项目的事实标准,支持 JavaScript、TypeScript、HTML、CSS、Vue、JSON 等几乎所有常见文本类语言。它不解决逻辑问题,只管“怎么排版好看且统一”。
其他语言需单独处理:
- Python 推荐
ms-python.black-formatter(严格)或ms-python.autopep8(宽松) - C/C++ 必须配
ms-vscode.cpptools+clang-format可执行文件路径 - XML 必须装
DotJoshJohnson.xml-tools,VS Code 原生不支持 XML 格式化 - Go、Java 等语言用官方扩展自带格式器,不用额外装
安装后快捷键没反应?核心三件事没做
装完插件 ≠ 能用。VS Code 默认不会调用你刚装的插件,它只认“被指定为默认格式化器”的那个。
- 打开命令面板:
Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS) - 输入
Format Document With→ 选Configure Default Formatter→ 选对应插件 ID,比如esbenp.prettier-vscode - 右下角状态栏点格式化器图标,确认显示的是你选的那个名字;如果显示
No formatter available,大概率是当前文件语言模式不对(比如.vue被识别成Plain Text),点右下角语言名手动切到Vue
为什么项目里还要 npm install --save-dev prettier
Prettier 插件本身只是个“调度员”,它运行时会去项目 node_modules/.bin/prettier 找可执行模块。找不到就报错:Failed to load module 'prettier'。
- 不要只靠全局安装(
npm install -g prettier),尤其在 macOS + nvm 或 WSL 环境下,VS Code 很可能找不到路径 - 如果项目已有
.prettierrc.json或prettier.config.js,插件会自动读取;没有则 fallback 到内置默认(tabWidth: 2,semi: true),容易和团队规范冲突 - 配置文件必须放在项目根目录,且命名准确:
.prettierrc、.prettierrc.json、prettier.config.js(注意后缀和大小写)
保存自动格式化为啥有时失效
editor.formatOnSave 开关只是总闸,但它只在“当前语言已绑定默认格式化器”的前提下才真正起作用。
- 全局开启:设置里搜
format on save→ 勾选Editor: Format On Save - 更稳妥的做法是直接改
settings.json,加这两行:"editor.formatOnSave": true"editor.defaultFormatter": "esbenp.prettier-vscode" - 多语言项目务必分语言指定,避免被 Vetur、TS 自带格式器劫持:
"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
最常被忽略的点:格式化器是否真的在当前文件上生效,取决于语言模式 + 默认格式化器绑定 + 项目本地 prettier 模块三者同时满足。少一个,Shift+Alt+F 就是静音键。











