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
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).
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
}