VSCode 更漂亮的格式 HTML 以一种奇怪的方式（下一行的大于号）

Question

从今天开始 VSCode 安装了 Prettier Extension 后，我的 HTML 格式变得非常奇怪。例如：

<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>

注意新行中的 >。有没有其他人有同样的经历并有解决方案？

Answer 1

您应该在项目的 .prettierrc 文件中设置 "htmlWhitespaceSensitivity": "ignore"。

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

Answer 2

由于问题终于得到解决：您现在可以在更漂亮的设置中使用 bracketSameLine: true 来控制行为。

VSCode 更漂亮的格式 HTML 以一种奇怪的方式（下一行的大于号）

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

visual-studio-code

prettier