VSCode中Vue文件执行source.organizeImports时双格式化工具冲突

针对你遇到的VSCode 1.73版本下，Vue文件保存时导入语句闪烁、双格式化工具冲突导致无法保存的问题，结合你的环境（Volar 0.40.0、ESLint相关依赖），提供以下几个可行的解决方案：

方案一：指定Vue文件使用Volar的organizeImports功能 #

修改.vscode/settings.json，针对Vue文件禁用默认的source.organizeImports，启用Volar专属的导入组织功能，避免和ESLint的修复操作冲突：

{
  "eslint.format.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": [
    "source.fixAll.eslint"
  ],
  "[vue]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.organizeImports": false,
      "source.organizeImports.volar": true
    }
  }
}

Volar专门针对Vue文件中的TypeScript部分做了适配，用它的导入组织功能替代VSCode默认的TS服务，能避免跨工具的并发冲突。

方案二：调整保存操作的执行顺序 #

VSCode支持将editor.codeActionsOnSave配置为对象形式，指定操作的执行顺序，让ESLint先完成修复，再执行导入组织：

{
  "eslint.format.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "[vue]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.organizeImports.volar": true
    }
  }
}

这种方式能避免两个操作同时触发导致的文件状态混乱。

方案三：禁用Volar格式化，让ESLint全权处理Vue文件 #

如果不需要Volar的格式化功能，可以关闭它，指定ESLint作为Vue文件的默认格式化工具：

{
  "eslint.format.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": [
    "source.organizeImports",
    "source.fixAll.eslint"
  ],
  "volar.format.enable": false,
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

确保ESLint的配置包含Vue和TypeScript的规则，能覆盖所有格式化需求。

方案四：临时回退VSCode版本到1.72.x #

如果以上方案都无法解决问题，考虑暂时回退到VSCode 1.72.x版本（你提到问题出现在升级到1.73之后），等待Volar发布兼容1.73的修复版本，再升级VSCode。

额外注意事项 #

• 确保Volar的两个扩展（Vue Language Features、TypeScript Vue Plugin）均为0.40.0版本，不要混合不同版本的扩展
• 检查项目根目录的ESLint配置文件（如.eslintrc.js），确认没有禁用或冲突的导入排序规则，比如import/order等
• 可以打开VSCode的「输出」面板，切换到ESLint或Volar的日志通道，查看具体的错误信息，进一步定位冲突点

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