vs code 配置 Prettier 的关键是安装官方扩展、设为各语言默认格式化器、禁用 ESLint 自动格式化、项目级配置优先、显式启用 vue/TS 支持——任一环节出错都会导致格式化失效或混乱。
VS Code 中配置 Prettier 不需要额外写脚本或改构建流程，核心是装对扩展、设对默认格式化器、关掉可能冲突的设置——配错一步，Shift+Alt+F 就会失效或格式错乱。
安装 Prettier 扩展并设为默认格式化器
VS Code 的格式化能力依赖扩展提供具体实现。Prettier 官方扩展（名称为 Prettier - Code formatter）必须手动启用为默认，否则即使装了也不会响应快捷键。
- 在扩展市场搜索
Prettier - Code formatter，安装并重启 VS Code - 打开命令面板（
Ctrl+Shift+P或Cmd+Shift+P），运行Preferences: Configure default Formatter - 选择
esbenp.prettier-vscode（即 Prettier 扩展 ID） - 确认当前文件类型（如
.js、.ts、.vue）未被其他格式化器覆盖：右下角状态栏点击语言模式旁的“格式化器”图标，检查是否显示Prettier
避免和 ESLint 自动修复冲突
很多人同时用 ESLint + Prettier，结果 Save Actions 一开，代码被 ESLint 和 Prettier 轮流改，缩进变空格又变 tab，分号忽有忽无。根本原因是两者职责重叠，且执行顺序不明确。
- 禁用 ESLint 的自动格式化：在
settings.json中设"eslint.format.enable": false - 用
eslint-config-prettier关闭所有与 Prettier 冲突的 ESLint 规则（仅校验，不格式化） - 若需保存时自动格式化，只开启 Prettier 的
"editor.formatOnSave": true，别同时开"editor.codeActionsOnSave": { "source.fixAll.eslint": true }
项目级配置优先于全局配置
Prettier 会按顺序查找配置文件：prettier.config.js → .prettierrc → package.json 中的 prettier 字段。VS Code 全局设置（如 prettier.semi）只在项目没配时才生效，容易误以为“改了没用”。
- 推荐在项目根目录放
.prettierrc，内容示例：{ "semi": false, "singleQuote": true, "tabWidth": 2 } - 若用
prettier.config.js，注意导出必须是module.exports = {...}，ESM 语法（export default）不被 VS Code 扩展识别 - 修改配置后无需重启 VS Code，但需重新打开一个文件或触发一次格式化才能生效
Vue / typescript 文件需要额外声明支持
Prettier 默认只处理 .js、.jsx、.json 等基础类型。Vue 单文件组件和 TypeScript 文件需显式启用，否则右键“格式化文档”会提示“没有可用的格式化程序”。
- 在工作区
settings.json中添加："prettier.documentSelectors": ["**/*.vue", "**/*.ts", "**/*.tsx"] - 确保已安装对应语言支持扩展：如
Vetur（Vue）或TypeScript and javaScript Language Features（内置，但需启用） - 对
.vue文件，Prettier 默认只格式化和
，需配合prettier-plugin-vue并在配置中注册插件
最常被忽略的是：VS Code 的“默认格式化器”设置是按语言单独指定的，javascript 和 TypeScript 可能指向不同扩展；而 Prettier 扩展本身不会自动接管所有语言，必须手动确认每个目标文件类型的格式化器都选对了。