VSCode - Conflict between 2 formatters in source.organizeImports save action on Vue file

Question

On a Vue3 project, in Visual Studio Code, I'm using ESLint and Volar ("Vue Language Features" and "TypeScript Vue Plugin") extensions.

Until very recently, the formatting on save was working perfectly. Here is the .vscode/settings.json file I had in my project:

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

Today, I try to modify a .vue file, and save. Then, the imports in the Typescript section of the file began to flicker... A notification informed me that two formatters were working concurrently on my file. And the file never saved. I had to kill VSCode process.

If I open it again and try to save the same file, it flickers for a long time before ending in an error state.

I tried to define several things in editor.defaultFormatter setting, but nothing worked.

Finally, I had to remove source.organizeImports from the code actions on save to be able to save my .vue files again... I wish to re-enable it as soon as possible. But I can't fix this formatting conflict.

Versions

• VSCode: 1.73
• ESLint extension: 2.2.6
• Volar extension: 0.40.0 (I tried to upgrade in version 1+ once, it broke several functionalities of my IDE so I had to downgrade it)
• package.json
  • @vue/eslint-config-prettier: 7.0.0
  • @vue/eslint-config-typescript: 10.0.0
  • eslint: 8.5.0
  • eslint-plugin-vue: 8.2.0
  • prettier: 2.5.1

Edit:

I tried updating all the dev dependencies. It didn't solve the problem.

Several people in my team have the exact same issue. I think it's related to the last VSCode update (1.73, 2022-11-01).

Answer 1

It's an open issue on vscode side: https://github.com/microsoft/vscode/issues/165326 (fixed in 1.73.1).

Waiting for this issue to be fixed, disabling the auto-save seems to fix it without having to rollback to 1.72.

{
  // ...
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": [
    "source.organizeImports",
    "source.fixAll.eslint"
  ],
  "files.refactoring.autoSave": false
}