VSCode格式化Vue模板v-for代码时自动添加多余空格如何解决？

以下是针对性的解决步骤：

• 检查并调整Volar/Vetur插件的格式化配置
  如果使用Volar（Vue3开发推荐插件），在VSCode的settings.json中添加或修改以下配置，禁用指令属性内的多余空格：

  "volar.formatting.templateOptions": {
    "directiveAttributeSpace": {
      "before": false,
      "inside": false
    }
  }
  

  若使用Vetur，可将HTML格式化器设置为js-beautify-html并调整相关选项：

  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.options.html": {
    "wrap_attributes": "auto",
    "indent_inner_html": true,
    "extra_liners": [],
    "inline": []
  }
  

• 清理残留的格式化插件与冲突配置
  卸载或禁用所有非必需的格式化类插件（如Beautify、旧版Vue格式化插件等），同时检查工作区目录下的.vscode/settings.json，确保没有覆盖全局设置的格式化规则。

• 指定Vue文件的默认格式化器
  在settings.json中明确设置Vue文件的默认格式化器，避免插件冲突：

  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  }
  

• 检查ESLint自动修复规则
  若项目启用ESLint，检查.eslintrc.js或相关配置文件，确认是否存在vue/html-indent、vue/script-indent等与空格相关的规则，调整规则的空格数量或暂时禁用自动修复功能：

  module.exports = {
    rules: {
      "vue/html-indent": ["error", 2], // 调整为需要的空格数
      "vue/script-indent": ["error", 2, { "baseIndent": 1 }]
    }
  }
  

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