Vue中Prettier的bracketSameLine对非自闭合元素不生效求助

针对你遇到的Prettier 2.7.1版本格式化Vue文件时，非自闭合元素的>单独换行的问题，需要补充以下配置和检查项：

1. 安装官方Vue格式化插件 #

Prettier对Vue文件的格式化依赖官方插件@prettier/plugin-vue，需安装与Prettier版本匹配的版本（2.7.x版本的Prettier建议安装@prettier/plugin-vue@2.7.x）：

npm install @prettier/plugin-vue@2.7.2 --save-dev

2. 补充Setting.json配置项 #

在用户或工作区的setting.json中添加以下配置，覆盖默认行为：

{
  "prettier.bracketSameLine": true,
  "prettier.printWidth": 120, // 增大行宽阈值，避免因行宽不足强制换行
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.vueIndentScriptAndStyle": true
}

关键配置说明： #

• printWidth：默认80的行宽可能导致长属性标签的>被强制换行，调高该值可避免这种情况。
• htmlWhitespaceSensitivity: "ignore"：关闭HTML空格敏感性，消除Prettier因空格规则调整标签格式的触发条件。
• @prettier/plugin-vue：确保Prettier能正确识别Vue语法，将bracketSameLine配置应用到Vue标签上。

3. 验证配置生效 #

重启VS Code（或重新加载窗口），再次格式化Vue文件，标签的>会保持在属性所在行，不会单独换行。

另外，检查是否有其他格式化插件（如ESLint内置格式化规则）与Prettier冲突，建议关闭其他HTML/Vue格式化工具，确保Prettier是唯一的格式化器。

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