.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]

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.

[esorribas]

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

[xdlStrive]

I initialized the project with the latest version of Vue3, and everything was normal at the beginning. Saving and automatic formatting can work.

But soon, I also encountered this problem.

.json and .ts files can still be automatically formatted normally, Only .vue files are exceptions.

Considering that the project was normal at the beginning, I speculate that the problem may have been caused by a subsequent operation.

Until I removed the .git folder from the project directory, the problem no longer occurred and everything returned to normal.
And after I git init, the problem reappeared.

So I am certain that the problem I encountered is related to the .git folder.

I hope this discovery can help solve the problem.

I also want to know if other friends who have encountered this problem can also solve the problem after removing the .git folder.
By the way, rolling back to 9.8.0 can also solve my problem.

Finally, please forgive my poor English. : )