vue单文件组件需用vetur/volar调度prettier并配置prettier-plugin-vue及"parser": "vue"，否则v-if等指令会被错误格式化；jsx须用babel解析器，混用模板语法的html应避免自动格式化。
带模板语法的 HTML 不能直接用标准 HTML 格式化器处理——Prettier 默认不识别 v-if、{{ }} 或 JSX 标签，强行格式化会破坏结构或静默失败。
Vue 单文件组件（.vue）怎么正确格式化
VS Code 默认的 HTML 格式化器对 <template></template> 块完全无效，它只认原生 HTML。Vetur（或 Volar）才是关键调度者，但必须配对底层工具：
-
v-if、v-for等指令属于 Vue 编译时语法，Vetur 会把<template></template>当作 HTML 类型交给 Prettier 处理，前提是 Prettier 已安装并启用prettier-plugin-vue - 必须在项目根目录配置
.prettierrc，且显式指定"parser": "vue"，否则 Prettier 会 fallback 到普通 HTML 解析器，导致:class="{ active }"被错误折行或属性重排 -
<script></script>块需匹配对应 parser：TypeScript 用"parser": "typescript"，否则defineComponent({})可能报错 - 常见坑：
htmlWhitespaceSensitivity: "strict"在 Vue 模板中容易把<div><p>文本</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div>拆成多行，若需紧凑排版，得设为"ignore"并配合/* prettier-ignore */注释局部跳过
React JSX 模板为什么 Prettier 有时不生效
JSX 不是 HTML，它是 JavaScript 的语法扩展。Prettier 对 JSX 的支持依赖 babel 或 flow parser，不是开箱即用：
- 命令行格式化 JSX 文件必须加
--parser babel，否则<mybutton onclick="{handleClick}"></mybutton>会被当作非法 HTML 报错 - VS Code 中右键 “Format Document With” 必须选 Prettier（而非默认 JavaScript 格式化器），且确保工作区已安装
prettier和@prettier/plugin-react - JSX 中的属性换行规则和 HTML 不同：
className、onClick等首字母小写属性不会被误转成大写，但data-*属性若没加引号（如data-id={id}），Prettier 可能补双引号变成data-id="{id}"—— 这是合法 JS 表达式，但语义已变 - 嵌套 JSX 如
{items.map(i => <li key="{i.id}">{i.name}</li>)}，Prettier 默认会展开成多行；若想压成单行，只能靠/* prettier-ignore */或调整jsxSingleQuote+printWidth
混用模板语法的 HTML 片段（如服务端返回）怎么处理
这类内容既不是纯 HTML，也不是完整 .vue/.tsx 文件，Prettier 和编辑器插件基本放弃治疗：
- 浏览器原生不解析
{{ user.name }}或，所以任何基于 DOMParser 的格式化器都会把它们当文本保留，无法智能缩进 - 唯一可行方案是白名单过滤：用正则提前剥离模板占位符（如
/\{\{[^}]*\}\}/g），格式化剩余 HTML，再还原——但风险高，易破坏表达式结构 - 更稳妥的做法是拒绝格式化：在
.prettierignore中加入*.html或特定路径，改用 ESLint +eslint-plugin-html做基础校验（比如检查标签闭合），而非排版 - 如果必须人工维护，建议统一用
<!-- prettier-ignore -->包裹整段，避免自动工具介入
真正难的不是选哪个工具，而是分清“谁该负责哪一层”：浏览器只管渲染，框架编译器负责转换模板，格式化器只该处理最终可执行的代码形态。混淆这三层，就会反复掉进 v-model 被删掉、jsx 报错、或 {{ }} 被当成注释的坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
