Prettier 目前不支持将 HTML 开始标签与首个属性保留在同一行的格式化行为，这是其固有设计决定的“强制换行”规则，且无对应配置项可关闭。
如何在 prettier 中保持 html 标签首属性与起始标签同行？prettier 目前不支持将 html 开始标签与首个属性保留在同一行的格式化行为，这是其固有设计决定的“强制换行”规则，且无对应配置项可关闭。
Prettier 的设计哲学强调一致性与低配置性，因此对 HTML 标签的格式化采用统一策略：所有属性（包括第一个）均独占一行，并缩进对齐。无论 printWidth 设置多宽、是否启用 singleAttributePerLine: true（该选项仅控制“是否每个属性强制换行”，而非“是否允许首属性同行”），Prettier 始终会将
<!-- Prettier 强制输出（不可更改） --> <div class="test-class" any-attr> </div>
而你期望的如下格式——即起始标签与首个属性位于同一行——在当前所有 Prettier 版本（v3.x 及之前）中均无法通过配置实现：
<!-- ❌ Prettier 不支持此格式 --> <div class="test-class" any-attr> </div>
⚠️ 注意事项：
- singleAttributePerLine: true 并非控制“首行合并”，而是确保每个属性独立成行（即使原本可并列）；设为 false 也不会让首个属性回归到标签行——Prettier 仍会换行。
- 调整 printWidth（如设为 200）同样无效：Prettier 对 HTML 标签的换行逻辑不依赖行宽阈值，而是基于语法结构硬编码。
- 社区已多次提出类似需求（如 issue #5297），但核心团队明确表示这属于“有意为之的设计选择”，暂无计划添加相关选项。
✅ 替代方案建议：
- 若项目对 HTML 行内格式有强约束，可考虑切换至更可配置的格式化工具（如 Prettyhtml 或 eslint-plugin-html + 自定义规则）；
- 或在 Prettier 基础上，用 ESLint 的 vue/max-attributes-per-line（Vue）或 jsx-max-props-per-line（React）等插件补充校验（注意：这些仅报错，不自动修复）；
- 短期协作场景下，可在特定文件顶部添加 注释临时跳过格式化（不推荐大规模使用）。
总之，这不是配置遗漏，而是 Prettier “约定优于配置”理念的体现——接受其默认行为，是使用它的前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
