VSCode中Prettier自动格式化需明确配置语言绑定、保存触发及规则优先级。须检查状态栏显示、设置默认格式化器、配置language-specific formatOnSave，并协调ESLint仅校验不格式化。
VSCode 用 Prettier 自动格式化代码，关键不在装插件，而在配置生效逻辑——prettier 不会自动接管所有文件，必须明确告诉它“对哪些语言、在什么时机、用哪套规则格式化”，否则保存后毫无反应。
如何确认 Prettier 插件已正确启用并识别项目
很多人装完插件就以为万事大吉，但 VSCode 默认不为所有语言启用 Prettier。先检查右下角状态栏：打开一个 .js 或 .vue 文件，看是否显示 Prettier（而非 ESLint 或 None）。若没显示，说明当前文件类型未绑定格式化工具。
- 手动设置：按
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（Mac），输入Format Document With...，选Configure Default Formatter，再选Prettier - Code formatter - 更稳妥的做法是，在工作区根目录加
.vscode/settings.json，写入：{ "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.formatOnSave": true }, "[typescript]": { "editor.formatOnSave": true }, "[vue]": { "editor.formatOnSave": true } } - 注意：如果项目里有
eslint-config-prettier，但没禁用 ESLint 的自动修复（eslint.enable为true且启用了eslint.autoFixOnSave），两者可能冲突，导致保存时格式化被覆盖或报错
为什么保存不格式化？常见配置陷阱
最常踩的坑是混淆了“全局设置”和“项目级设置”，以及忽略了语言特定配置的优先级。
-
"editor.formatOnSave"必须为true，且**只对当前语言块生效**；单独写在顶层不会作用于所有语言 - 如果项目根目录存在
.prettierrc或prettier.config.js，VSCode 会自动读取——但前提是该配置文件语法合法；一个多余的逗号或export default写成module.exports =在 ESM 项目中可能静默失效 - 使用 TypeScript 时，
prettier默认不处理.ts文件的类型注解缩进；需确保配置里有"semi": false、"singleQuote": true等显式声明，否则可能沿用 VSCode 默认行为 - Vue 单文件组件中，
<script setup></script>语法需要 Prettier ≥ 2.8.0；旧版本会跳过 script 区域，看起来像“没格式化”
如何让 Prettier 和 ESLint 共存不打架
不是“禁用 ESLint”，而是让 ESLint 只负责规则检查，格式化全交给 Prettier——这是现代前端项目的标准配合方式。
- 安装两个包：
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier - 在
.eslintrc.cjs中，把prettier放在 extends 数组**最后**：extends: [ "eslint:recommended", "plugin:prettier/recommended" // 这行必须在最后 ]
- VSCode 设置中关闭 ESLint 的自动格式化：
"eslint.format.enable": false，避免它在保存时抢在 Prettier 前执行 - 如果仍遇到光标跳动、引号被反复切换等问题，检查是否误启用了
editor.formatOnType——这个功能对 JS/TS 意义不大，反而容易触发意外格式化
真正麻烦的从来不是装插件，而是搞清 VSCode 格式化链路里谁说了算：语言模式 → 默认格式化器 → 保存触发时机 → 配置文件加载顺序 → 与其他 linter 的协作边界。少一个环节没对齐，就会表现为“点了保存却没变化”。
