.vue files cannot be formatted

[DimplesY]

Summary

Version 9.9.0, vue files cannot be formatted when a configuration file exists in the project directory

1. Prettier - Code formatter 9.9.0
2. Vue Language Features (Volar) 0.40.13

Actual result

[BabyLy233]

I have the same problem and it doesn't work on .scss file too

[andr35]

I experienced the same problem also with .html files.

It happens with version v9.9.0. I installed the previous version (v9.8.0) and the issue disappeared.

[holazz]

Same issue.

[github-actions[bot]]

This bug is missing information needed to diagnose the problem. Please see our guide on how to open a good issue and provide the missing information. Most configuration-related issues can only be resolved by providing a full repro. If you don't provide a sample to reproduce your issue, your bug will most likely be closed.

[ghsgz]

Volar will find all corresponding formatting tools according to configurations.

By default, these formaters are:

• vscode-html-languageservice: html
• vscode-css-languageservice: css, less, scss, postcss
• pug-beautify: pug
• typescript: js, ts, jsx, tsx

More information, here.

Seems like, we can not change the behaviour of Volar by setting "editor.defaultFormatter": "esbenp.prettier-vscode" in settings.json. Currently, I do not know why, too.

Back to this issue, if you want to use prettier to format .vue files, here is a workaround.

Make sure:

• installed prettier and eslint, npm packages as project dependencies and VSCode plugins
• .eslintrc.cjs in your project root, and make sure '@vue/eslint-config-prettier' is on the last line of prop extends
• some additional configurations in settings.json, like this:

"editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true,
    "source.organizeImports": false
}

Then, ESLint will format your .vue files automatically by calling prettier, every time you save files.

Edit: sorry, seems like the paragraph above I wrote makes nonsense totally.

To mount Volar extension, and format .vue files with a set of rules as well,

• use eslint and eslintrc standalone (e.g. eslint-config), or
• treat it as eslint-config-prettier says: prettier --check.

That is my poor insights. Hope this helps.

[Igonato]

Facing this after a recent VS Code update. Had to downgrade the extension to version 8.2.0 (9.8.0 wasn't enough for me) until it started to work. I'm on Windows 11 and WSL2 Ubuntu 22.04. Willing to help with debugging.

[quroom]

I faced same problem, But when I reboot my pc. All problem was fixed.