更漂亮的格式配置 [英] Prettier formatting configuration
问题描述
我正在努力尝试为Angular HTML组件配置更漂亮的格式.我尝试了不同的配置覆盖,但无法获得所需的内容.
I'm pulling my hair trying to configure Prettier formatting for Angular HTML component. I tried different configuration overriding but I can't get what I want.
默认情况下,在VS Code + Prettier上,以下标记:
By default, on VS Code + Prettier, the following markup :
<ng-container *ngIf="emailRef.hasError('email')">A valid email address must be used</ng-container>
的格式设置为(由于行长):
is formatted to (because of line length) :
<ng-container *ngIf="emailRef.hasError('email')"
>A valid email address must be used</ng-container
>
我一点都不喜欢.我不希望Prettier那样分割标签.我宁愿:
which I don't like at all. I don't want Prettier to split the tag like that. I'd rather prefer :
<ng-container *ngIf="emailRef.hasError('email')">
A valid email address must be used
</ng-container>
有人知道如何覆盖其默认行为吗?使用多个属性时,我可以使用默认格式,例如:
Does anyone knows how to override its default behavior ? I'm OK with the default formatting when multiple attributes are used, like in :
<input
id="email"
name="email"
type="email"
email
required
[(ngModel)]="email"
#emailRef="ngModel"
/>
推荐答案
对我有用的是在内容与开始和结束标记之间添加一个空格:
What works for me is to add a space between the content and the opening and closing tags:
<ng-container *ngIf="emailRef.hasError('email')"> A valid email address must be used </ng-container>
使用空格,更漂亮的格式正确
With the spaces, prettier formats it correctly
这篇关于更漂亮的格式配置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!