Prettier是VSCode中最可靠主流的格式化扩展，开箱即用且官方推荐；它专注样式统一，与ESLint分工协作，需正确配置默认格式化器、禁用冲突扩展并启用formatOnSave等关键设置。
Prettier 是当前最可靠、最主流的 VSCode 代码格式化扩展，尤其对 JavaScript/TypeScript/HTML/CSS/JSON 等前端常用语言，它不依赖项目配置就能开箱即用，但若项目已有 .prettierrc 或 prettier.config.js，它会自动读取并生效。
为什么选 Prettier 而不是 Beautify 或内置格式化？
VSCode 内置的格式化能力极弱——比如对 JS 文件，它只做基础缩进，不处理括号换行、引号统一、分号有无等风格问题；Beautify 已多年未维护，不支持现代语法（如可选链、top-level await），且和 ESLint 冲突率高；而 Prettier 是唯一被 React/Vue/Angular 官方文档明确推荐的格式化工具，所有主流框架脚手架（Vite、Create React App、Vue CLI）默认集成它。
常见错误现象：Ctrl+Shift+I 没反应、Shift+Alt+F 格式化后引号还是单引号、保存后没变化——基本都是因为没设为默认格式化器，或装了多个冲突扩展（如同时启用 Beautify 和 Prettier）。
- 必须安装官方扩展：
Prettier - Code formatter（作者：esbenp） - 安装后务必执行命令：
Preferences: Configure Default Formatter，并为当前语言（如[javascript]）选中esbenp.prettier-vscode - 右下角状态栏点击语言模式旁的“格式化器”图标，确认显示的是
Prettier，不是None或其他名字 - 禁用所有旧式格式化扩展（
Beautify、JavaScript Booster等），它们会劫持快捷键
如何让保存时自动格式化且不和 ESLint 冲突？
ESLint 和 Prettier 不是二选一，而是分工合作：ESLint 检查逻辑错误和规则（如变量未定义、禁止 console），Prettier 只管样式（空格、换行、引号）。两者共存时，必须禁用 ESLint 中所有与格式相关的规则，否则会出现“ESLint 修完又报错，Prettier 再改又触发 ESLint”的死循环。
关键配置项都在 settings.json 中：
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"prettier.requireConfig": false,
"eslint.validate": ["javascript", "typescript", "vue"]
}注意几个硬性条件：
-
"prettier.requireConfig": false：避免没有.prettierrc时直接跳过格式化（新手常踩） -
"source.fixAll.eslint"必须写全名，不能简写成"source.fixAll"，后者对 ESLint 无效 - 必须安装
eslint-config-prettier并在 ESLint 配置中启用它，否则格式类规则不会关闭 - 如果项目用 TypeScript，确保
eslint.config.js中包含...tseslint.configs.recommended，否则类型相关规则不生效
格式化快捷键失效或作用范围不对怎么办？
VSCode 的格式化命令分三类，对应不同行为，很多人混淆导致误操作：
-
Ctrl+Shift+I（Win/Linux）或Cmd+Shift+I（macOS）：仅格式化当前光标所在作用域（如一个函数块），不是整文件 -
Shift+Alt+F（Win/Linux）或Option+Shift+F（macOS）：格式化整个文档，这是最常用动作 -
Ctrl+K Ctrl+F（Win/Linux）或Cmd+K Cmd+F（macOS）：只格式化已选中的代码段
如果某个快捷键没反应，先检查是否被系统或其他扩展占用（比如某些输入法会劫持 Ctrl+Shift+I）；再打开命令面板（Ctrl+Shift+P），输入 “format”，看是否列出 Format Document 和 Format Selection —— 如果没出现，说明当前文件类型没注册格式化提供者，大概率是语言模式识别错了（例如 .js 文件被识别成 plain text），点击右下角语言模式手动切回 JavaScript。
复杂点在于：Vue 单文件组件中，<script> 和 <template> 块可能被不同格式化器接管。Prettier 默认支持 <template>，但需额外配置才能格式化 <script setup> 中的 TS 代码——这需要在 settings.json 中显式加上："[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }。
