必须手动指定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"> 被拆成三行
Prettier 不是乱拆，是在严格执行 printWidth。默认 80，但 HTML 属性名长、值也长（比如 data-test-id、aria-label），80 极易触发换行，反而降低可读性。
-
printWidth: 100是更务实的选择：够宽，能保住多数单行属性；又不至于宽到让超长标签挤成一行难以维护 -
htmlWhitespaceSensitivity: "css"必须设：否则<p><img>text</p>可能被折成多行，破坏行内元素渲染逻辑 - 别碰
bracketSameLine: true：HTML 多属性时，>跑到最后一行末尾，找结束标签像寻宝
align、float、style 为啥没被格式化或警告
Prettier 压根不解析样式语义。它只动结构：标签嵌套、属性顺序、引号、缩进、换行。其余全是“不可见区域”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
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> 也还是挤在一行，改起来费眼。
