prettier can format vue, but I can not use it for Vue templates

[qiulang]

• I have searched through existing issues
  I found prettier for Vue #491. The issue was open at 2017, But prettier has supported vue & html, https://github.com/prettier/prettier/releases/tag/1.15.0

• I have read through docs

• I have read FAQ

• Platform: macOS

• Vetur version: 0.14.5

• VS Code version:1.30.2

Problem

We just want to use prettier to format our vue codes because we use prettier extensively for all our codes and we don't want to introduce another format tool.

But vetur uses prettyHtml for Vue templates and I can't change it to vue, .i.e I can not set "vetur.format.defaultFormatter.html": "prettier",

So now when I save vue codes, vscode will format my code using prettyHtml, then our lint process will use prettier to format codes again. The result is quite different.

[qiulang]

I tried prettier, prettyhtml and vscode save on format and got 3 different results!
For example, I run prettyhtml src/App.vue, even though prettyhtml uses my prettier setting, it indent all 3 sections <style> <template> <script>, while prettier just indent <template> section.

vetur format <template> section using prettyhtml (e.g. tabWidth 2 by default), format <style> and <script> sections using prettier. So it is different than the other two.

This just makes my format impossible.

Currently I come up with a temporary solution that run prettier --write "src/**/*.{js,vue}" first to format all my files. Then set "vetur.format.defaultFormatter.html": "none" to prevent vscode from formatting my vue codes (template section) again and in the future.

[octref]

You can follow #950 for using prettier in template.