prettier 目前不支持将 html 开始标签的首个属性保留在同一行（即禁止首行换行），这是其固有设计限制，无任何配置选项可实现该效果。

prettier 目前不支持将 html 开始标签的首个属性保留在同一行（即禁止首行换行），这是其固有设计限制，无任何配置选项可实现该效果。

Prettier 的核心理念是“约定优于配置”，因此它刻意减少可调参数以保障团队代码风格高度统一。针对 HTML 标签属性排版，Prettier 仅提供两个相关选项：

• singleAttributePerLine（布尔值）：强制每个属性独占一行（默认 false）；
• printWidth（数字）：触发换行的行宽阈值（默认 80），但即使设为极大值（如 200），Prettier 仍会将起始标签 <div 与首个属性强制分两行。

例如，以下配置无法改变首属性换行行为：

{
  "printWidth": 120,
  "singleAttributePerLine": false,
  "htmlWhitespaceSensitivity": "strict"
}

无论 printWidth 多大，输入：

<div class="test-class" [test-binding]="true" (test-binging)="test()" any-attr></div>

始终被格式化为：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

立即学习“前端免费学习笔记（深入）”；

<div
  class="test-class"
  [test-binding]="true"
  (test-binging)="test()"
  any-attr>
</div>

⚠️ 注意事项：

• 这不是 bug，而是 Prettier 的明确设计决策（参见 GitHub issue #5977）；
• 曾有 PR 尝试引入 wrapAttributes 或类似控制项，但因违背“最小配置”原则被拒绝；
• 若项目强依赖该格式（如 Angular 模板可读性要求），可考虑：
  • 暂时禁用 Prettier 对特定文件的格式化（通过 .prettierignore 或 <!-- prettier-ignore --> 注释）；
  • 切换至更灵活的替代工具（如 PrettyHTML 或自定义 ESLint + eslint-plugin-html 规则）；
  • 在团队规范中接受 Prettier 的统一风格，避免个性化排版争议。

总结：Prettier 不提供“首属性不换行”选项，这是其一致性优先哲学的体现。开发者应权衡标准化收益与微调需求——当格式偏好与工具哲学冲突时，适配工具往往比改造工具更可持续。