prettier会强制重排html属性顺序以提升可读性与一致性，按id、class、data-*（字母序）、src/href/alt等固定优先级排序，非bug而是设计行为。
HTML格式化后属性顺序变了是正常现象，不是bug
只要用了 prettier 或类似工具，属性重排就是设计行为——它不保留你手写的原始顺序，而是按固定规则重新组织，目的是提升可读性与团队一致性。浏览器完全不关心属性顺序，class="a" id="b" 和 id="b" class="a" 渲染结果一模一样。
prettier 的 HTML 属性排序规则是固定的
它内部有一套硬编码的优先级顺序，大致如下（从高到低）：
id-
class、name、data-*（所有 data- 属性按字母序） -
src、href、alt、title等常用语义属性 -
style、onclick等内联行为/样式属性（排最后）
例如：<img alt="desc" id="logo" class="main" src="a.jpg" onclick="do()"> 经 prettier --parser html 处理后会变成：<img id="logo" class="main" src="a.jpg" alt="desc" onclick="do()">。这不是“乱序”，而是明确执行了排序逻辑。
别指望绕过这个排序，也别用插件强行禁用
目前没有官方配置项能关闭属性重排；html.format.enable 关的是 VS Code 内置格式器，不影响 prettier 的行为；第三方插件如 sort-html-attributes 仅做简单字母序，反而和 prettier 冲突，导致保存两次格式化、产生无意义 diff。
- 想保持手写顺序？只能关掉自动格式化，但代价是团队协作时 diff 难读、CR 效率低
- 想自定义排序？
prettier不开放该能力；DOMParser + 手写遍历可以，但维护成本高，只适合极特殊场景 - 注意：
data-属性会被按字母升序排列，data-zoo一定排在data-app后面
真正该关注的是“排序是否影响运行时”
绝大多数情况不影响。但有两个边缘点容易被忽略：
-
style属性里多个 CSS 声明的顺序仍由你控制，prettier不解析其内容；但如果你把 CSS 写成style="color:red; font-size:12px"，它不会帮你按 CSS 声明顺序规则重排 - 某些老旧框架（如早期 AngularJS）依赖属性声明顺序触发指令优先级，这种场景下格式化后可能出问题——但这是框架缺陷，不是格式化的问题
所以与其纠结“为什么变了”，不如确认：你的模板、构建流程、运行环境是否真对属性顺序有隐式依赖。多数时候，它只是看起来不习惯而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
