1. 先别急着重装Prettier 失效多半是配置打架VS Code 里 Prettier 插件不起作用是前端开发里出现频率极高的一类问题。表现通常很一致你按了保存代码纹丝不动或者右下角状态栏明明显示 Prettier格式化结果却和预期不一样再或者只有部分文件被格式化.vue、.tsx里该换行的地方没换。很多人第一反应是卸载重装插件但实测下来重装能解决的比例并不高因为真正的原因往往藏在settings.json的配置冲突里。Prettier 在 VS Code 中其实有两层身份一层是编辑器里的格式化扩展负责响应“格式化文档”和“保存时格式化”这两个动作另一层是项目里的格式化规则来源也就是.prettierrc、prettier.config.js这类配置文件。当编辑器层的开关没打开、默认格式化器被别的扩展抢走、或者项目配置和编辑器配置互相覆盖时插件就会表现为“装了但没生效”。这篇内容就围绕settings.json这个骨架把格式化开关、默认格式化器、保存时自动格式化这三件事逐项拆开给你可复制的配置片段和逐条验证动作。适合谁看正在用 VS Code 写前端、被 Prettier 时灵时不灵折磨的同学刚接手一个老项目、格式化规则和团队不一致的同学以及想把格式化这件事彻底配置稳定、不再靠重启碰运气的同学。下面所有配置都可以直接抄但更重要的是理解每一项在管什么这样下次出问题你能自己定位到具体环节而不是反复重启 IDE。2. 用 TaoToken 统一 Key 通道先把模型侧配置稳住在排查 Prettier 之前我想先说一个容易被忽略的关联点。很多同学的 VS Code 里同时装了 AI 编程插件这些插件在保存文件时也会触发自己的格式化或改写逻辑和 Prettier 抢同一个“保存动作”。如果你正在用 AI 辅助编码建议把模型调用统一走一个稳定的 Key 通道避免多个插件各自配置、互相干扰。TaoToken 提供的就是这样一个统一入口官网是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 。它的作用是让你在多个工具里复用同一套 Key而不是每个插件单独填一遍。对于本篇场景你只需要知道把 AI 插件的模型通道配置稳定后就能减少它在保存时“抢活”的概率让 Prettier 的行为更可预测。具体操作上先到控制台创建 Keyhttps://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 然后在 API Keys 页面管理你的密钥https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。如果你用的是 Claude Code 这类命令行编码工具可以参考接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。需要长期跑编码任务、Agent 场景比较多的可以看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。想先验证模型通不通直接用模型对话页面测一条请求即可https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。这一步不是必须的但它能帮你排除“AI 插件在保存时改写文件”这个干扰项。把模型侧配置固定下来后面排查 Prettier 时变量就少了一个。3. 可复制的 settings.json 骨架与逐项说明下面这份配置是排查 Prettier 失效时最常用的骨架。建议先把它整体贴进你的用户级settings.jsonCtrlShiftP输入Open User Settings (JSON)确认基础行为正常后再往项目级.vscode/settings.json里迁移团队规则。{ editor.defaultFormatter: esbenp.prettier-vscode, editor.formatOnSave: true, editor.formatOnPaste: false, editor.formatOnType: false, [javascript]: { editor.defaultFormatter: esbenp.prettier-vscode }, [typescript]: { editor.defaultFormatter: esbenp.prettier-vscode }, [json]: { editor.defaultFormatter: esbenp.prettier-vscode }, [vue]: { editor.defaultFormatter: esbenp.prettier-vscode }, prettier.requireConfig: false, prettier.useEditorConfig: true, files.eol: \n }逐项说明这几行分别管什么editor.defaultFormatter是全局默认格式化器。如果这一项被设成了别的扩展 ID比如某些 ESLint 扩展或内置格式化器那么你按格式化时走的就不是 Prettier。这是“插件装了但没生效”最常见的原因之一。editor.formatOnSave控制保存时是否触发格式化。它必须是true否则你保存多少次都不会自动格式化。注意它和语言级配置是叠加关系语言级没单独关掉才会生效。[javascript]这类语言级块用来给特定语言指定格式化器。多语言项目里全局默认可能被某个语言覆盖所以显式写一遍更稳。.vue、.tsx这类文件尤其容易漏。prettier.requireConfig设为false表示没有项目配置文件时也允许格式化。如果你设成了true而项目里又没有.prettierrcPrettier 就会拒绝工作表现就是“没反应”。排查阶段建议先设false。prettier.useEditorConfig控制是否读取.editorconfig。如果项目里有.editorconfig且缩进规则和 Prettier 冲突可能出现格式化后又被改回去的错觉。排查时可以临时设false对比。files.eol统一换行符避免 Windows 和 macOS 协作时因为 CRLF/LF 反复触发格式化差异。配置改完后一定要重启一次 VS Code 窗口CtrlShiftP输入Reload Window因为格式化器注册是在窗口启动时完成的热改配置有时不生效。4. 验证请求确认 Prettier 真的在工作配置写完怎么确认它生效了给你一套逐项验证动作按顺序做能定位到具体哪一环断了。第一步打开一个.js文件故意把代码写乱比如一行里塞多个语句、缩进全删。然后按ShiftAltFmacOS 是ShiftOptionF手动格式化。如果代码变整齐了说明格式化器和插件本身没问题问题在“保存时自动格式化”这一环。如果没反应看右下角是否弹出“没有安装用于 XX 的格式化程序”这通常意味着editor.defaultFormatter指向了不存在的扩展 ID。第二步验证保存时格式化。把editor.formatOnSave设为true后改乱代码直接CtrlS。如果没触发检查是不是被语言级配置覆盖了比如某个[javascript]块里写了editor.formatOnSave: false。语言级优先级高于全局这是很多人踩过的坑。第三步用命令面板确认当前文件的格式化器。CtrlShiftP输入Format Document With...看列表里 Prettier 是否在以及是否被标为默认。如果 Prettier 不在列表里说明扩展没激活去扩展面板确认它已启用且没有报错。第四步验证项目配置是否被读取。在项目根目录建一个.prettierrc写入{ semi: false }然后格式化一个带分号的 JS 文件。如果分号被去掉说明项目配置生效如果没去掉检查prettier.requireConfig和文件是否在项目根目录范围内。第五步排除 AI 插件干扰。临时禁用其他会在保存时写文件的扩展再重复第二步。如果这时格式化正常了说明是扩展之间抢保存动作回到第 2 节把模型通道统一配置减少冲突面。这套动作做完基本能确定问题出在“开关没开”“格式化器被抢”“项目配置没读到”还是“扩展冲突”这四类里的哪一类。5. 本篇常见错排查清单下面这些是我在实际项目里遇到频率最高的几种情况对照着查能省不少时间。Prettier 在列表里但格式化无变化。大概率是.prettierignore把当前文件排除了或者文件在node_modules、dist这类默认忽略目录里。检查项目根目录有没有.prettierignore以及当前文件路径是否被匹配。保存时格式化只对部分文件生效。检查语言级配置。比如你只配了[javascript]那.ts、.vue就不会走 Prettier。把常用语言都显式列一遍或者确认全局editor.defaultFormatter没被覆盖。格式化结果和团队不一致。通常是编辑器配置和项目配置打架。项目里有.prettierrc时以项目配置为准如果编辑器里又写了prettier.singleQuote这类选项可能产生覆盖。排查时先把编辑器里的 Prettier 选项清空只留项目配置。改了 settings.json 没反应。格式化器注册需要窗口重载。改完配置后Reload Window再不行就完全退出 VS Code 重开。只重启插件有时不够因为窗口级的注册状态没刷新。ESLint 和 Prettier 同时格式化结果来回跳。两个扩展都在保存时写文件顺序不确定。建议用eslint-config-prettier关掉 ESLint 的格式规则让 Prettier 单独负责格式ESLint 只管代码质量。状态栏显示 Prettier 但输出不对。看状态栏点击后弹出的菜单确认当前用的是哪个配置文件。有时工作区打开了多个文件夹Prettier 读的是另一个根目录的配置。6. 把配置固定下来别再靠重启碰运气Prettier 失效这件事本质是配置优先级和扩展协作的问题不是插件本身不稳定。把settings.json里的格式化开关、默认格式化器、语言级覆盖这三层理清楚再配合项目里的.prettierrc行为就能稳定下来。我自己的习惯是用户级配置只放通用开关团队规则全部放项目级.vscode/settings.json和.prettierrc这样换项目不会互相污染。如果你同时在用 AI 编程插件记得把模型通道统一到一套 Key 上减少保存时的扩展冲突。需要创建或管理 Key 的走 API Keys 页面https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 接入细节看文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 想先跑一条请求验证通道用模型对话https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。长期做编码和 Agent 任务的Coding Plan 会更省心https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。最后留一个实用技巧把这份settings.json骨架存成代码片段新机器或新项目直接贴比每次重新排查快得多。格式化配置稳定后你保存代码时该发生的就会发生不用再盯着状态栏猜它今天心情好不好。