更漂亮的括号SameLine 设置为 true 不适用于自闭合元素 Vuejs

Question

我使用的是 prettier 扩展版本 2.7.1。

我设置了一些配置，包括把bracketSameLine设置为true。在setting.json文件中。

{
    "prettier.bracketSameLine": true
}

我还添加了其他配置：

描述说“括号同一行”如果true，放置 > 多行，我在工作区和用户设置中将其设置为 true 。

然而，当我用 prettier 格式化我的 Vue 文件时，结果似乎没有按我的预期工作。因为描述还说“不适用于自关闭元素”。缺少什么配置来应用于自关闭元素？

输入：

<small id="helper id" class="form-text text-muted">A longish piece of text here</small>

<p
  *ngIf="this.parent.descriptors && this.parent.descriptors.length"
  class="post-meta">
  <span
     class="post-meta__item"
    *ngFor="let descriptor of this.parent.descriptors"
    >Another piece of text here</span>
</p>

输出：

<small id="helper id" class="form-text text-muted">A longish piece of text here</small>

<p *ngIf="this.parent.descriptors && this.parent.descriptors.length" class="post-meta">
  <span class="post-meta__item" *ngFor="let descriptor of this.parent.descriptors"
    >Another piece of text here</span
  >
</p>

预期行为：

<small id="helper id" class="form-text text-muted">A longish piece of text here</small>

<p *ngIf="this.parent.descriptors && this.parent.descriptors.length" class="post-meta">
  <span class="post-meta__item" *ngFor="let descriptor of this.parent.descriptors">
    Another piece of text here</span>
</p>

只是同一行中的字符“>”。我不想只用一个字符添加额外的行。

当前的另一种意想不到的行为

Answer 1

1. 在 VSCode 中打开项目文件夹。

2. 如果您没有 .prettierrc 文件，请在项目的根目录中创建一个文件。

3. 打开 .prettierrc 文件并将其添加到其中

{
  "htmlWhitespaceSensitivity": "ignore",
  "bracketSameLine": true
}