Vue项目HTML模板属性自动添多余空格的问题排查与修复求助

已经确认问题由Volar扩展导致，禁用后恢复正常，但需要保留Volar的语法高亮等核心功能，可通过以下方式调整配置解决：

1. 关闭Volar的格式化功能 #

直接禁用Volar自带的模板格式化，让Prettier或其他工具接管：

• 打开VS Code设置（快捷键Ctrl+,/Cmd+,），搜索Volar > Format: Enable，取消勾选该选项。
• 或者直接在settings.json中添加配置：

"volar.format.enable": false

2. 调整Volar的格式化规则（按需保留Volar格式化） #

若仍想使用Volar进行格式化，可修改其HTML格式规则，避免属性值内添加多余空格：

• 在项目根目录创建volar.config.js文件，添加如下配置：

module.exports = {
  format: {
    options: {
      html: {
        preserveAttrValueWhitespace: false,
        attrValueQuotes: "double"
      }
    }
  }
};

注：不同Volar版本的配置项可能略有差异，需对应官方文档调整。

3. 确保Prettier正确接管Vue文件格式化 #

关闭Volar格式化后，需确认Prettier能正常处理Vue模板：

• 确保已安装prettier-plugin-vue（Prettier 3.x及以上版本无需额外安装，内置Vue支持）。
• 在VS Code的settings.json中设置Vue文件的默认格式化器为Prettier：

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

4. 排查其他潜在冲突 #

• 暂时禁用所有非必要扩展（如废弃的旧扩展），仅保留Prettier、Volar、ESLint，逐步启用排查是否有其他扩展干扰。
• 检查项目根目录的.editorconfig文件，确认没有会导致属性值空格异常的配置，比如是否存在强制添加空格的规则。

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