更好的格式HTML标签与Vetur？

Question

我注意到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>

我查看了更漂亮的选项，但没有找到任何相关的配置设置。

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

在我的.prettierrc.json中有：

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

Answer 1

更漂亮的人为你提供了两种选择：

• printWidth表示行长https://prettier.io/docs/en/options.html#print-width
• htmlWhitespaceSensitivity用于处理括号https://prettier.io/docs/en/options.html#html-whitespace-sensitivity

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

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

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

正如您在日常HTML工作期间可能注意到的，以下两种情况不会产生相同的输出： 12 3 => 1 2 3 123 => 123 这是因为空格在内联元素中很重要。

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