Prettier 正确安装并激活需三步：确认扩展面板中 esbenp.pretterr-vscode 已启用、右下角语言模式匹配（如 .js 显示 JavaScript）、终端能执行 npx prettier --version；缺一不可。
VSCode 本身不带语义级代码美化能力，装对插件、配对语言模式、设对默认格式化器，三者缺一不可——否则 Ctrl+S 后代码纹丝不动，不是 VSCode 坏了，是链路断在某一处。
怎么确认 Prettier 插件已正确安装并激活
Prettier 是目前最通用的跨语言格式化工具，但“安装完成”不等于“可用”。VSCode 只有在识别到项目中存在 prettier.config.js、.prettierrc 或 .prettierrc.json 时，才会自动启用它；若项目无配置，即使插件已装，也可能退回到 VSCode 默认缩进逻辑。
- 打开扩展面板（
Ctrl+Shift+X），搜索Prettier - Code formatter，确保状态为“已启用”，且发布者是esbenp - 右下角语言模式必须匹配：打开一个
.js文件，状态栏应显示JavaScript，而非Plain Text；若显示错误，点击后手动切换 - 终端执行
npx prettier --version，能输出版本号说明 CLI 可用，插件底层调用才可靠
为什么保存时没自动格式化
editor.formatOnSave 开关只是表象，真正起效要同时满足四个条件：开关开启、语言有格式化器、该语言指定了默认格式化器、没有被 workspace 设置覆盖。
- 全局设置中勾选
Editor: Format On Save，但更推荐在项目.vscode/settings.json中显式声明：{ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" } - 对特定语言单独控制（比如只让 JS/TS 自动格式化）：
"[javascript]": { "editor.formatOnSave": true }, "[typescript]": { "editor.formatOnSave": true } - 检查是否有冲突插件：如同时装了 ESLint 和 Prettier，VSCode 可能弹出“选择默认格式化工具”提示，必须手动点选 Prettier，否则它不会接管
Vue 文件里 <style> 块不格式化怎么办
Vue 单文件组件是多语言混合体，Prettier 默认只处理 <script>，<style> 需要 Vetur（Vue 2）或 Volar（Vue 3）额外桥接。Volar 用户尤其容易漏掉这步——它默认不把 CSS/SCSS 块交给 Prettier。
- Vue 2 项目：确认装的是
octref.vetur，并在settings.json中写"vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.scss": "prettier"
- Vue 3 项目：卸载 Vetur，只装
vue.volar，并确保Prettier - Code formatter插件也已安装；再加"[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } - 无论 Vue 版本，都必须保证
files.associations已设："files.associations": { "*.vue": "vue" }，否则整个文件不被识别为 Vue 类型，后续全失效
格式化后单引号变双引号？这是 Prettier 的默认行为
Prettier 不读取 ESLint 规则，也不响应 eslint-config-prettier，它只认自己的配置。想强制单引号，必须在项目根目录加 .prettierrc：
{ "singleQuote": true, "semi": false, "tabWidth": 2 }注意：这个文件必须放在**工作区根目录**（即你用 VSCode “打开文件夹” 打开的那个文件夹），而不是 .vscode 子目录里；路径错、文件名大小写错（比如写成 prettierrc 少个点）、JSON 语法错，都会导致配置静默失败。
