更漂亮的格式化配置

Question

我正在努力为 Angular HTML 组件配置 Prettier 格式。我尝试了不同的配置覆盖，但我无法得到我想要的。

默认情况下，在 VS Code + Prettier 上，以下标记：

<ng-container *ngIf="emailRef.hasError('email')">A valid email address must be used</ng-container>

被格式化为（因为行长）：

<ng-container *ngIf="emailRef.hasError('email')"
  >A valid email address must be used</ng-container
>

我一点都不喜欢。我不希望 Prettier 像那样拆分标签。我宁愿：

<ng-container *ngIf="emailRef.hasError('email')">
  A valid email address must be used
</ng-container>

有谁知道如何覆盖其默认行为？当使用多个属性时，我可以使用默认格式，例如：

<input
  id="email"
  name="email"
  type="email"
  email
  required
  [(ngModel)]="email"
  #emailRef="ngModel"
/>

Answer 1

我知道这个问题已经有几个月了，但我在 Prettier 的问题上发布了类似的内容并找到了更好的解决方案。留给通过搜索到达这里的人。

将选项设置--html-whitespace-sensitivity为ignore，您将获得所需的输出：

<ng-container *ngIf="emailRef.hasError('email')">
  A valid email address must be used
</ng-container>

尽管不建议这样做，因为空白格式可能会导致文本和内容周围出现额外间距等问题，这可能会影响 UI 设计的一致性。

Answer 2

对我有用的是在内容与开始和结束标签之间添加空格：

<ng-container *ngIf="emailRef.hasError('email')"> A valid email address must be used </ng-container>

使用空格，更漂亮地正确格式化它