CODEWITHSUNDEEP
visual-studio-codeprettier
Daniel Habenicht
Daniel Habenicht

Reputation: 2243

VSCode Prettier formats HTML in an odd way (greater-than-symbol on next line)

Since today VSCode with installed Prettier Extension formats my HTML in a really odd way. For example:

<button
  class="btn btn-secondary mr-2"
  (click)="updateEditState(EditState.preview)"
  *ngIf="!(preview | async)"
>
  <ng-container i18n="AppPreviewEditButton|Enables the Preview mode of the page@@AppPreviewButton"
    >Preview</ng-container
  >
</button>
<button class="btn btn-secondary mr-2" (click)="updateEditState(EditState.edit)" *ngIf="!(edit | async)">
  <ng-container i18n="AppPreviewEditButton|Enables the Edit mode of the page@@AppEditButton"
    >Edit</ng-container
  >
</button>

Notice the > on new lines. Did somebody else experienced the same and has a solution?

Upvotes: 11

Views: 3565

Answers (3)

abdella
abdella

Reputation: 754

Go to VS Code settings by pressing CTR + , or from the menu File > Preferences > Settings

type prettier in the search settings and check Bracket Same Line checkbox as shown blow.

enter image description here

Upvotes: 0

Daniel Habenicht
Daniel Habenicht

Reputation: 2243

Since the issue finally got resolved: You can now use bracketSameLine: true in the prettier settings to control the behaviour.

Upvotes: 4

G&#225;bor Pankotay
G&#225;bor Pankotay

Reputation: 81

You should set "htmlWhitespaceSensitivity": "ignore" in your project's .prettierrc file.

https://prettier.io/docs/en/options.html#html-whitespace-sensitivity

Upvotes: 8

Related Questions