prettier 对 vue/svelte/astro 等混合模板的 html 片段默认不生效，需显式配置 parser（如 "vue"）和 htmlwhitespacesensitivity:"css"，并禁用嵌入语言格式化以避免破坏逻辑。
Prettier 对混合模板（如 Vue、Svelte、Astro）中的 HTML 片段默认不生效，必须显式指定 parser 并处理 whitespace 敏感性，否则会静默跳过或格式错乱。
为什么 prettier --write 对 <template></template> 块没反应
Prettier 默认只识别独立的 .html 文件；遇到 .vue、.svelte 或 .astro 时，它按文件后缀选择 parser，而不会自动解析其中的 HTML 模板区域。若未配置 parser，它可能把整个文件当 JS 或 TS 解析，导致标签被错误重排甚至破坏逻辑。
- Vue 单文件组件需在
.prettierrc中设"parser": "vue"，且确保安装了@prettier/plugin-vue - Svelte 需
"parser": "svelte"+@prettier/plugin-svelte - Astro 则依赖
"parser": "astro"（Prettier v3.0+ 内置支持） - 命令行中不能只写
prettier --write src/**/*.vue，必须加--parser vue，否则无效
htmlWhitespaceSensitivity 设成什么才不丢空格
混合模板里常有内联文本，比如 <p>Hello <span>{{ name }}</span></p>。若设 "htmlWhitespaceSensitivity": "strict"，Prettier 可能删掉 Hello 和 <span></span> 之间的空格，渲染出 Hello{{ name }} —— 这是真实 bug，不是预期行为。
- 生产环境推荐
"htmlWhitespaceSensitivity": "css"：它把 HTML 当作 CSS 盒模型处理，保留有意义的空白（如文本节点间的空格），忽略标签间的换行缩进 - 绝对不要用
"ignore"：它会让所有空白都不可控，<div> <p>A</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>B</p> </div>可能被压成一行，破坏语义可读性 - 该选项对纯
.html文件影响小，但在含插值、指令、条件块的模板中是关键开关
如何避免格式化破坏服务端逻辑标签
像 、<?php echo $title ?> 或 Nunjucks 的 {% extends "base.html" %} 这类非标准 HTML 标签，Prettier 无法识别，强行格式化会打乱结构甚至报错。
- 在模板顶部加注释
<!-- prettier-ignore -->，整块跳过 - 或在
.prettierrc中用"embeddedLanguageFormatting": "off"关闭对 script/style 外部嵌入语言的处理（适用于 EJS、PHP 混排） - 更稳妥的做法：把这些逻辑抽离到单独的构建步骤（如 Vite 插件预处理），让最终交给 Prettier 的 HTML 是“干净”的
- 别指望正则替换解决——混着变量插值和条件语法时，正则极易误伤
VS Code 保存时格式化为何只动了 JS 不动 template
VS Code 的 “Format Document” 默认调用的是内置 HTML 格式化器（vscode-html-languageservice），它根本不知道 <template></template> 是什么，只会格式化顶层 HTML，对 Vue/Svelte/Astro 的模板块完全无视。
- 必须手动设置默认格式化工具：右键 → “Format Document With…” → 选 “Prettier”（不是 “Default Formatter”）
- 检查右下角状态栏，确认当前语法模式是
Vue/Svelte/Astro，不是HTML或Plain Text - 在
settings.json中配"[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }等语言专属规则 - 启用
"editor.formatOnSave": true后，仅对当前语言模式生效——切错语法类型就等于关掉了格式化
真正麻烦的从来不是“怎么按快捷键”，而是你手里的模板是否经过语法归一化：服务端 include、客户端插值、编译时指令混在一起时，没有哪个格式化器能 100% 安全处理。最省心的做法，是把模板拆成“纯 HTML 结构层”和“逻辑层”，前者交 Prettier，后者交 ESLint 或专用 linter。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
