如何调整Vue/Volar项目中HTML标签的自动格式化规则？

要解决Volar格式化时将HTML闭合标签单独放在新行的问题，只需调整以下配置：

一、使用Volar原生格式化配置 #

在VS Code的.vscode/settings.json中添加或修改以下设置：

{
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "volar.formatting.bracketSameLine": true,
  "volar.formatting.wrapAttributes": "auto"
}

• bracketSameLine: 设为true后，无属性的标签（如<v-container>）会将闭合标签与开始标签放在同一行，避免单独换行。
• wrapAttributes: 设为auto时，当标签属性数量较多超过换行阈值，会自动将属性换行排列，匹配你需要的带属性标签格式。

二、若项目使用Prettier配合Volar #

如果项目依赖Prettier做格式化，修改项目根目录的.prettierrc（或.prettierrc.js）：

{
  "bracketSameLine": true,
  "htmlWhitespaceSensitivity": "css",
  "printWidth": 80
}

同时确保VS Code中Vue文件的默认格式化器设为Prettier：

{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

配置后效果验证 #

设置完成后，代码会被格式化为你期望的样式：

无属性标签格式： #

<v-container>
  <div class="d-flex justify-start">
    {{ contactsStore.contacts.length }} Kontakte
  </div>
</v-container>

带多属性标签格式： #

<v-container
  :headers="headers"
  :items="contactsStore.getStateWithFullName"
  :search="search"
  :items-per-page="20"
  hide-default-footer
>
  <div class="d-flex justify-start">
    {{ contactsStore.contacts.length }} Kontakte
  </div>
</v-container>

内容的提问来源于stack exchange，提问作者sportsman