Question

我正在努力尝试为Angular HTML组件配置更漂亮的格式。我尝试了不同的配置覆盖，但无法获得所需的内容。

默认情况下，在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

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

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

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

Answer 2

我知道这个问题已有几个月的历史，但是我在Prettier的问题上发表了类似的内容，并找到了更好的解决方案。通过搜索将其留在这里。

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

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

尽管不建议这样做，因为空格格式设置可能会导致诸如文本和内容之间的额外间距之类的问题，这可能会影响UI设计的一致性。