prettier完全忽略的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><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> 也没被拆开，你以为它“没生效”，其实是它压根不管这个事。
-
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" style="max-width:90%"> 会被格式化为：
@@##@@
图片视觉对齐该用什么替代 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="x.jpg" alt="desc" loading="lazy" style="max-width:90%">
正确写法（Prettier 会格式化 class 名和标签结构，但不管 CSS 内容）：<div class="img-wrapper"><img src="a.jpg" align="middle" style="max-width:90%"></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，导致图片周围空白处理不符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
