时间戳

首页 > 解决方案 > 更漂亮的格式化配置

html - 更漂亮的格式化配置

问题描述

我正在努力为 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"
/>

标签： htmlangularvisual-studio-codeprettier

解决方案

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

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

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

推荐阅读