Vetur: Prettier option vue-indent-script-and-style is not used

[tschoartschi]

Info

• Platform: macOS Mojave 10.14.5
• Vetur version: 0.22.6
• VS Code version: 1.40.0

Problem

I wanted to use the option vue-indent-script-and-style from prettier but this option is not recognized by vetur. I think this is because vetur is using an outdated version of prettier. The option vue-indent-script-and-style was just added recently (see: https://github.com/prettier/prettier/releases/tag/1.19.0) so I guess we just need to upgrade prettier

Reproducible Case

settings.json of VSCode:

"vetur.format.defaultFormatter.css": "none",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "none",
"vetur.format.defaultFormatter.less": "none",
"vetur.format.defaultFormatter.postcss": "none",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.stylus": "none",
"vetur.format.defaultFormatter.ts": "none"

.prettierrc.js

module.exports = {
  printWidth: 200,
  'vue-indent-script-and-style': true,
}

By the way: it would be nice to have an option for indent for "vetur.format.defaultFormatter.ts": "vscode-typescript" as well because I don't like prettier too much for my TS/JS code

[spenwall]

From my research I found that the prettier option for vueIndentScriptAndStyle doesn't work with vetur even using the latest prettier version. You can however use the options.

vetur.format.styleInitialIndent and vetur.format.scriptInitialIndent

This seemed to work for me in indenting script styling.

[tschoartschi]

@spenwall For some reason I overlooked the option vetur.format.scriptInitialIndent thanks for pointing it out. Now formatting works like I wanted 🙂

Nevertheless I think it does not solve the problem of Prettier, therefore I'll leave it open. I hope that's fine

[spenwall]

Yes I agree that it would be nice if it would just use the prettier option. Then we could just use a .prettierrc file

[octref]

You can either:

• Use the prettier extension, which formats your whole Vue file following prettierrc
• Use scriptInitialIndent and styleInitialIndent. Vetur only sends the content in-between <script> and <style> into prettier, not the whole content, so that rule won't be respected.