更漂亮的格式化配置

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

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

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

使用 spaces，更漂亮的格式正确

Answer 2

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

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

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

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

Prettier formatting configuration