使用 Vetur 更好地格式化 HTML 标签？答案

【问题标题】：Better formatting for HTML tags with Vetur?使用 Vetur 更好地格式化 HTML 标签？
【发布时间】：2020-10-04 07:47:12
【问题描述】：

我注意到 prettier 现在被 Vetur 用来格式化 Vue 文件的 HTML 部分。我并不总是理解它的格式：

<b-button v-else pill variant="primary" @click="submit"
  >Finish</b-button
>

如果我只添加一个 class 元素，它会：

<b-button
  v-else
  pill
  class="pb-2"
  variant="primary"
  @click="submit"
  >Finish</b-button
>

但是，由于我的编辑器的宽度超过 100 个字符，因此将其格式化为：

<b-button v-else pill class="pb-2" variant="primary" @click="submit">
  Finish
</b-button>

我查看了Prettier的options，但没有找到任何相关的配置设置。

如何告诉我的 vscode 格式化程序根据需要格式化 HTML 标记？

在我的.prettierrc.json 我有：

{
  "singleQuote": true,
  "arrowParens": "avoid",
  "jsxBracketSameLine": true
}

【问题讨论】：

【解决方案1】：

prettier 为您提供两种选择：

要获得所需的输出，您可能需要：

{
  "printWidth": 100,
  "htmlWhitespaceSensitivity": "ignore"
}

默认情况下，htmlWhitespaceSensivity 设置为 'css'，因为：

您可能会在日常 HTML 工作中注意到，以下两种情况不会产生相同的输出：

1 2 3 => 1 2 3

123 => 123

这是因为空白在行内元素中很重要。

【讨论】：