Prettier插件不支持“运行前格式化”，VS Code无此原生机制，仅支持保存时或手动触发格式化；需通过启用editor.formatOnSave、正确配置语言块及prettier路径等实现间接效果。
prettier 插件本身不支持“运行前”格式化——VS Code 没有“运行前触发格式化”的原生机制，你真正能控制的只有**保存时**或**手动触发时**。所谓“运行前自动格式化”，实际是靠配置保存即格式化 + 配合运行命令的执行顺序来间接达成。
为什么“运行前格式化”不存在？
VS Code 的调试器（Debug）和任务系统（tasks.json）默认不拦截或前置执行格式化动作。按下 F5 启动调试、或运行 npm run dev 时，编辑器不会自动先调用 prettier。它只会在你显式保存文件后，按配置决定是否格式化。
如何让代码在运行前“看起来已格式化”？
核心思路：把格式化动作绑定到保存环节，并确保保存即生效，再配合运行流程的习惯操作（比如先保存再运行）。这不是魔法，而是可靠链路：
-
editor.formatOnSave必须为true，且写在项目级.vscode/settings.json中（避免被用户设置覆盖） -
editor.defaultFormatter必须设为"esbenp.prettier-vscode"，不能拼错或漏掉-vscode - 为关键语言显式启用保存格式化，例如：
"[javascript]": { "editor.formatOnSave": true }、"[typescript]": { "editor.formatOnSave": true }、"[vue]": { "editor.formatOnSave": true } - 加
"prettier.requireConfig": true，强制插件只读取项目根目录的.prettierrc.json或prettier.config.js，避免回退到不可控的默认值 - 若用
pnpm或yarn@4+，在settings.json中补上："prettier.prettierPath": "./node_modules/prettier/index.cjs"，否则插件可能找不到本地包
别指望 ESLint 或 task 自动帮你“运行前格式化”
常见误区是以为配了 eslint.autoFixOnSave 或在 tasks.json 里加个 prettier --write 就能“运行前兜底”。但：
-
eslint.autoFixOnSave和prettier规则冲突时，会互相覆盖，导致保存后样式抖动；必须用eslint-config-prettier关掉 ESLint 所有格式类规则 -
tasks.json里的prettier命令只能格式化指定路径，无法感知当前编辑中的未保存文件；而且它跑在终端，和编辑器格式化逻辑无关 - VS Code 的
preLaunchTask虽可配置“启动调试前执行的任务”，但它不等待格式化完成就直接启调试器，且对多文件、增量修改无感知
真正起效的关键细节
最容易被忽略的是语言识别和配置作用域：
- 打开一个
.ts文件，右下角状态栏必须显示Prettier，而不是ESLint或None；若显示不对，说明语言块没配或被覆盖 -
.prettierrc.json必须是标准 JSON（不能有注释、末尾逗号），且放在项目根目录；prettier.config.js若用 ESM 项目，得写export default { ... }，CommonJS 项目得用module.exports = { ... } - 如果团队用
.editorconfig，检查indent_style和tab_width是否与.prettierrc.json中的useTabs、tabWidth冲突，否则缩进会打架
Ctrl+S —— 这不是缺陷，而是 VS Code 编辑器模型的设计边界。想跳过这一步？那就得在构建流程里加 prettier --check 或 --write 作为 CI/CD 校验项，而不是依赖编辑器。 
