Script part of .vue files gets formatted by Vetur but without the use of Prettier

3
votes

Setup: New vue-cli 3.0 project w/ Typescript, ESlint Active plugins in VSCode: Vetur, Prettier

I checked all the settings I could find and experimented back and fro but couldn't solve the following issue:

Prettier formats the project's .ts files without any issues. In my .vue files Vetur uses prettyhtml for the template part which works fine too. For the script (lang="ts") part though, Vetur formats it based on some rules I cannot find anywhere - but definitely not Prettier/Prettier config. E.g. I changed singleQuotes = true and semi = false in my Prettier settings which works fine for my .ts files but within the script part in my .vue files it will just auto-format to double quotes and semi-colons.

Any idea why Vetur isn't relying on Prettier for the script part of .vue files? Also, where are the settings applied to that part (e.g. singleQuotes true/false)?

2
vue.jsprettiervetur

2 Answers

1
votes

If I add a local .prettierrc file with { "singleQuote": true }, formatting will work as expected.

1
votes

Another way to edit Prettier options for Vetur is by adding this to your VSCode settings.json:

"vetur.format.defaultFormatterOptions": {
  "prettier": {
    "semi": false
  }
}