VSCode 保存时自动格式化 Prettier 不是装个插件就完事，核心是把“默认格式化器”显式绑定给 Prettier，并确保保存触发开关未被语言级设置覆盖。
先说结论：必须同时满足插件安装、默认格式化器绑定、保存开关开启三个条件，缺一不可。
- 适合：前端项目统一代码风格，减少 Review 时的格式争论
- 先准备：安装 esbenp.prettier-vscode 插件及项目级 prettier 包
- 验收：保存文件后代码缩进和引号立即变化，且状态栏显示 Prettier
命令速用版
如果是新项目，建议在项目根目录执行以下命令安装依赖，并在 settings.json 中填入基础配置：
npm install `--save-dev` prettiersettings.json 关键配置：
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}可选 .prettierrc 配置示例：
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}原理简述
VSCode 默认不会自动“认领”文件格式化权，即使插件已安装。必须显式绑定默认格式化器，否则保存时调用的可能是内置格式器或 ESLint，导致 Prettier 完全不介入。此外，语言专属设置（如 [javascript]）优先级高于全局设置，若局部关闭了 formatOnSave，全局开关也会失效。
分步处理
1. 安装官方插件：在扩展市场搜索 Prettier - Code formatter，确认发布者为 Esben Petersen，ID 为 esbenp.prettier-vscode。
2. 配置默认格式化器：打开命令面板（Ctrl+Shift+P），输入 Format Document With，选择 Configure Default Formatter，选中 Prettier。更稳妥的做法是在项目 .vscode/settings.json 中写死 editor.defaultFormatter。
3. 开启保存格式化：确保 editor.formatOnSave 为 true。若只对特定语言生效，需在语言块中单独配置，例如 "[typescript]": { "editor.formatOnSave": true }。
4. 创建配置文件：在项目根目录创建 .prettierrc 或 .prettierrc.json，确保语法正确。注意 Prettier 插件会从当前文件目录向上查找配置文件，建议统一放在项目根目录以避免冲突。
怎么验证是否生效
打开一个.js 或.ts 文件，查看右下角状态栏。如果显示 Prettier 而非 ESLint 或 None，说明绑定成功。故意打乱代码缩进和引号，按 Ctrl+S 保存，若代码立即恢复整齐且无报错，即配置生效。
常见坑
1. 配置文件语法错误：.prettierrc.json 末尾多逗号或使用 ES Module 语法（import/export）会导致静默失效，建议只用 JSON 格式或 CommonJS 导出。
2. ESLint 冲突：若同时开启 ESLint 自动修复和 Prettier 格式化，规则重叠会导致代码反复横跳。建议安装 eslint-config-prettier 关闭 ESLint 格式类规则。
3. 语言标识识别错误：TypeScript 文件有时被识别为 typescriptreact，需在设置中补充 "[typescriptreact]" 的格式化配置。