使用 Vetur 更好地格式化 HTML 标签?

Better formatting for HTML tags with Vetur?

我注意到 Vetur 现在使用 prettier 来格式化 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
}

prettier 为您提供两种选择:

要获得所需的输出,您可能需要:

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

默认情况下 htmlWhitespaceSensivity 设置为 'css',因为:

as you may notice during daily HTML works, the following two cases won't produce the same output:

1<b> 2 </b>3 => 1 2 3

1<b>2</b>3 => 123

This happens because whitespace is significant in inline elements.

来自 : https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting