VSCode extension prevents `prettier-vscode` from formatting `.vue` files on save

[rafasoares]

When using both Volar and Prettier extensions and these settings:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

When I save a .vue file, no formatting happens and I get the following notification:

Extension 'Prettier - Code formatter' is configured as formatter but it cannot format 'vue'-files

I see no obvious messages on VSCode output for either extension.

Oddly enough, if I manually run the "Format document" action (or "Format document with..." and select Prettier), it works as expected.

At first glance, this might seem like a prettier-vscode issue (see https://github.com/prettier/prettier-vscode/issues/2729), but if I disable Volar, Prettier behaves as expected.

I'm opening this issue (after searching for something similar) so we can maybe look at it from both sides.

[sladiri]

First off, I just noticed in Vue docs that they point out that Volar extension can format too. So I am checking issues here related to Prettier.

I recently created a Vue project and followed the docs. I did not notice this problem. VSCode and extensions are of current version. Same VSCode settings.

    "esbenp.prettier-vscode",
    "vue.volar",
    "vue.vscode-typescript-vue-plugin",

[wjw020206]

首先，我刚刚在 Vue 文档中注意到他们指出 Volar 扩展也可以格式化。所以我在这里检查与更漂亮的问题有关的问题。

我最近创建了一个 Vue 项目并遵循了文档。我没有注意到这个问题。VSCode 和扩展是当前版本。相同的 VSCode 设置。

    "esbenp.prettier-vscode",
    "vue.volar",
    "vue.vscode-typescript-vue-plugin",

Just choose between prettier and Volar formatting?

[AlbaChloe]

When using both Volar and Prettier extensions and these settings:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

When I save a .vue file, no formatting happens and I get the following notification:

Extension 'Prettier - Code formatter' is configured as formatter but it cannot format 'vue'-files

I see no obvious messages on VSCode output for either extension.

Oddly enough, if I manually run the "Format document" action (or "Format document with..." and select Prettier), it works as expected.

At first glance, this might seem like a prettier-vscode issue (see prettier/prettier-vscode#2729), but if I disable Volar, Prettier behaves as expected.

I'm opening this issue (after searching for something similar) so we can maybe look at it from both sides.

same situation now, do you have any progress in this problem?😭😭

[rafasoares]

@AlbaChloe no, sorry. I switched to using ESLint + Prettier for this particular project, so the ESLint extension is handling both linting and formatting.

@sladiri Volar can format, but it delegates formatting to these services. It should let you choose other formatters, but it's conflicting with the Prettier extension, for some reason.

[BryceBarbara]

For me, this seems to fix it.

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

[Sensemakers-Marco]

Thanks @BryceBarbara ! That works for me as well.

[esorribas]

Same error for me, if downgrade to Prettier version 9.14.0 works fine.