Vetur: Script part of .vue files gets formatted by Vetur but based on what rules?

[alexeigs]

• [x] I have searched through existing issues
• [x] I have read through docs
• [x] I have read FAQ

Info

• Platform: macOS
• Vetur version: 0.14.3
• VS Code version: 1.29.1

Problem

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)?

[JoySurfer]

In my script JS part the code is formatted with Prettier - I think. However, I set the single quotes to true, but they will be formatted with double quotes instead.

[alexeigs]

In my script JS part the code is formatted with Prettier - I think. However, I set the single quotes to true, but they will be formatted with double quotes instead.

Potentially my script code is formatted by Prettier too, I don't know (is there a log somewhere showing which formatter was used each time I format code? I only see logs when there's an issue). So, I just see the outcome which is different from the Prettier settings and the (correct) formatting within my .ts files and wonder why.

[alexeigs]

If I add a local .prettierrc file with { "singleQuote": true }, formatting will work as expected.
But I think this can't be the normal way?

That works anyway, thanks!

[inyourhands]

@JoySurfer Thanks~ I checked it and it worked too. It even worked 'semi'.

However, this method is troublesome to manage the file separately from the vscode configuration file. If possible, it is better if vetur can operate as the vscode configuration file.

Anyway, thank you so much.

[inyourhands]

I found the vscode configuration file also works as shown below.

"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "stylelintIntegration": true,
        "eslintIntegration": true,
        "semi": false,
        "singleQuote": true,
        "tabWidth": 2
    }
}

This allows you to manage a single vscode configuration file without the .prettierrc file.

[JoySurfer]

https://github.com/vuejs/vetur/issues/986

Breaking changes in 0.14.0 and 0.14.2 must be respected.
Look at the "Formatter Changes" and the docs at https://vuejs.github.io/vetur/formatting.html#prettier

[lcc19941214]

986

Breaking changes in 0.14.0 and 0.14.2 must be respected.
Look at the "Formatter Changes" and the docs at https://vuejs.github.io/vetur/formatting.html#prettier

With vetur.format.defaultFormatterOptions set, everything works fine!
Maybe vetur should read vscode-prettier-plugin configuration by default.

[octref]

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)?

Read the changelog and updated doc.

In the old way, people get confused as to what setting Vetur is using

• Local prettier config?
• VS Code prettier.* setting?

Vetur was using a mix of the two. It caused confusion. Now I tried making it simple:

• If you have a local .prettierrc, Vetur uses that and nothing else
• If you don't have one, Vetur uses vetur.format.defaultFormatterOptions.prettier
• Vetur no longer readsprettier.eslintIntegration. Instead, you explicitly set vetur.format.defaultFormatter.js: "prettier-eslint".

[Dealerpriest]

If I choose the vetur.format.defaultFormatter.ts: "prettier-eslint" option, what extensions do I need to have installed?
Prettier and ESLint? Also the one called prettier-eslint?

[WhiteBookmark]

@Dealerpriest
I don't think we need it according to the docs https://vuejs.github.io/vetur/highlighting.html#custom-block