必须手动指定prettier为html默认格式化器，并禁用内置格式器；关键配置是printwidth:100和htmlwhitespacesensitivity:"css"，prettier仅格式化结构，不处理样式语义。

VS Code 里 Prettier 默认不处理 HTML 文件，不是插件没装、也不是配置写错，而是它根本没被授权接管 html 类型——必须手动指定默认格式化器，否则右键“Format Document”永远看不到 Prettier。

怎么让 Prettier 真正接管 HTML 文件

这是最常卡住的第一步。即使装了插件、写了 .prettierrc，VS Code 仍会优先用内置 HTML 格式化器（html.format.enable 控制），Prettier 被静默忽略。

• 打开任意一个 .html 文件，在编辑区右键 → Format Document With… → Configure Default Formatter…
• 从列表中选 Prettier - Code formatter（注意名字要完全匹配，别选错分支）
• 顺手打开 Settings → Text Editor → Formatting → Format On Save，勾上
• 检查项目根目录的 .vscode/settings.json 或全局设置，删掉或注释掉 "html.format.enable": true —— 这行和 Prettier 冲突，留着就白配

为什么 <div class="a b" data-id="123"> 被拆成三行<p>Prettier 不是乱拆，是在严格执行 <code>printWidth。默认 80，但 HTML 属性名长、值也长（比如 data-test-id、aria-label），80 极易触发换行，反而降低可读性。

• printWidth: 100 是更务实的选择：够宽，能保住多数单行属性；又不至于宽到让超长标签挤成一行难以维护
• htmlWhitespaceSensitivity: "css" 必须设：否则 <p><img>text</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a> <p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 可能被折成多行，破坏行内元素渲染逻辑
• 别碰 bracketSameLine: true：HTML 多属性时，> 跑到最后一行末尾，找结束标签像寻宝

align、float、style 为啥没被格式化或警告

Prettier 压根不解析样式语义。它只动结构：标签嵌套、属性顺序、引号、缩进、换行。其余全是“不可见区域”。

• align="right" 是废弃属性，Prettier 不修复、不提示、不重写
• style="float: left" 属于 CSS 字符串，Prettier 默认不解析 CSS（除非你额外配了 CSS 相关 parser）
• 图片是否对齐、文字是否居中，由浏览器渲染决定，和标签换行缩进无关——想改显示效果，该写 CSS，不是调 Prettier

怎么让含图片的 HTML 块看起来更整齐

目标不是控制图片怎么显示，而是让带 <img> 的 HTML 片段在编辑器里好读、好改、不易手误。

• 启用 wrapAttributes: "force-aligned"：属性多时自动每行一个，并对齐等号，比如 src=、alt=、loading= 都垂直对齐
• singleQuote: true 统一引号风格，避免 Emmet 补全双引号后又被格式化来回折腾
• 别单独调 indentWidth 去“对齐图片”：它影响所有标签缩进，且对视觉对齐无实质帮助

最易被忽略的是 html.format.enable 和 wrapAttributes 的组合效果：前者不关，Prettier 永远不生效；后者不用，再多属性的 <img> 也还是挤在一行，改起来费眼。