如何配置Vetur+Prettier让Vue3+Quasar组件文本换行显示？

你可以通过调整VS Code中Vetur和Prettier的配置来实现需求，具体步骤如下：

1. 修改VS Code全局设置（settings.json） #

打开VS Code设置（快捷键Ctrl+,），点击右上角的打开设置(JSON)，添加或修改以下配置：

{
  // 指定Vetur使用Prettier格式化HTML
  "vetur.format.defaultFormatter.html": "prettier",
  // Prettier核心配置
  "prettier.bracketSameLine": false,
  "prettier.htmlWhitespaceSensitivity": "strict",
  "prettier.printWidth": 80,
  "prettier.tabWidth": 2,
  // 传递给Vetur的Prettier选项
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "bracketSameLine": false,
      "htmlWhitespaceSensitivity": "strict",
      "printWidth": 80
    }
  }
}

2. 项目根目录添加Prettier配置文件（可选） #

在项目根目录创建.prettierrc文件，写入以下内容，确保项目级配置覆盖全局设置：

{
  "bracketSameLine": false,
  "htmlWhitespaceSensitivity": "strict",
  "printWidth": 80,
  "tabWidth": 2,
  "vueIndentScriptAndStyle": true
}

配置说明 #

• bracketSameLine: false：强制将开始标签的闭合符号>单独换行，避免文本内容和标签收尾挤在同一行
• htmlWhitespaceSensitivity: "strict"：严格处理HTML空格，确保组件文本内容的换行格式符合预期
• printWidth: 80：设置代码换行的宽度阈值，让q-btn的属性自动换行，匹配你想要的格式

完成配置后，重新打开Vue文件并执行格式化（快捷键Ctrl+Shift+I），q-btn组件就会自动调整为目标格式：

<q-btn
  unelevated
  color="secondary"
  type="submit"
  class="full-width"
>
  Sign in
</q-btn>

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