Prettier完全忽略<img>的align属性、float/text-align样式及换行缩进，仅格式化标签结构和属性顺序；图片对齐应改用现代CSS，如text-align、margin: 0 auto、flex等。
HTML图片对齐代码为什么Prettier不处理
Prettier **完全忽略** <img> 的 align 属性、style 里的 float 或 text-align，也不会重排 HTML 中图片的换行或缩进逻辑——它只格式化标签结构、属性顺序和空白符，不介入样式语义。
常见错误现象：prettier --write index.html 后，<img src="a.jpg" align="right"> 没变，甚至原本写在一行的 <p><img>文字</p> 也没被拆开，你以为它“没生效”，其实是它压根不管这个事。
-
align是已废弃的 HTML4 属性，Prettier 不会修复或警告 - 内联
style="float: left"属于 CSS 范畴，Prettier 默认不解析 CSS（除非配了htmlWhitespaceSensitivity等极少数相关选项） - 图片是否“视觉上居中/右对齐”，取决于 CSS 渲染，和 HTML 标签换行、缩进无关
想让图片对齐代码“看起来整齐”，该调哪些Prettier配置
目标不是控制图片怎么显示，而是让含图片的 HTML 标签块在编辑器里更易读、不易手误。关键靠两个配置项：
-
htmlWhitespaceSensitivity: "css"—— 让 Prettier 尊重 CSS 对空白的敏感性，避免把<p><img>文字</p>错误地折成多行破坏行内布局 -
wrapAttributes: "auto"或"force-aligned"—— 当<img>属性多（比如带src、alt、loading、decoding），能强制每属性一行并对其等号，避免挤在一行难维护 - 别碰
indentWidth单独调图片——它影响所有标签，且对对齐无实质帮助
示例：开启 wrapAttributes: "force-aligned" 后，<img src="x.jpg" alt="desc" loading="lazy" width="200"> 会被格式化为：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
<img src="x.jpg" alt="desc" loading="lazy" width="200" >
图片视觉对齐该用什么替代 align 或 float
现在所有主流对齐需求，都应该用现代 CSS，而不是在 HTML 里塞过时属性或内联样式。Prettier 不动它们，但你得主动换掉：
- 文字环绕图片 → 用
display: flow-root+float: left/right（注意：float 本身没废，只是不该写在 HTML 里） - 图片居中 → 外层用
text-align: center（块级容器）或margin: 0 auto（配合display: block） - 响应式对齐 → 用
display: flex或display: grid控制容器，图片只是子元素
错误写法（Prettier 不报错，但你不该留）：<img src="a.jpg" align="middle" style="margin-left:20px">
正确写法（Prettier 会格式化 class 名和标签结构，但不管 CSS 内容）：<div class="img-wrapper"><img src="a.jpg" alt=""></div>，然后在 CSS 里定义 .img-wrapper { text-align: center; }
VS Code 里点保存就格式化，但图片相关代码总“漏掉”
不是 Prettier 漏，是 VS Code 的默认绑定可能没覆盖 HTML 文件，或者你装了冲突的插件（比如旧版 Auto Close Tag、Beautify）劫持了保存行为。
- 检查设置里
editor.formatOnSave是否为true - 确认
files.associations把*.html映射到了html语言模式（不是plaintext或javascript） - 运行命令
Developer: Show Running Extensions，禁用所有非必要的格式化插件 - 在 HTML 文件里右键 → “Format Document With…” → 手动选
Prettier，看是否生效——如果手动可以，说明自动触发链断了
容易被忽略的一点：如果你的项目根目录没有 .prettierrc 或 prettier.config.js，VS Code 可能 fallback 到全局默认配置，而它默认不启用 htmlWhitespaceSensitivity，导致图片周围空白处理不符合预期。
