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.
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
>
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
I know this question is months old, but I posted something similar on Prettier's issues and found a better solution. Leaving it here for people who land here by search.
Set the option --html-whitespace-sensitivity
to ignore
and you will get your desired output:
<ng-container *ngIf="emailRef.hasError('email')">
A valid email address must be used
</ng-container>
Although this is not recommended as whitespace formatting can cause issues like extra spacing around text and stuff, which might affect your UI design's consistency.
More info about this here: https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting
Thanks to this reply on GitHub: https://github.com/prettier/prettier/issues/9381#issuecomment-707156908
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.