Prettier as an option for template formatting

[Coder-256]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Problem

This isn't really much of a problem: complete support for HTML and Vue is planned for Prettier 1.15! 🎉🎉🎉 And to me, it looks really good. See prettier/prettier#5259 for their progress and a link to a preview.

This issue is to hopefully begin implementing opt-in support for these changes so that Vetur will be ready once the new version of Prettier is released.

However, IMHO, the best way to do this is a bit different: once Prettier 1.15 is released, one solution is to simply disable formatting by default, and encourage users to install the official Prettier VS Code extension alongside Vetur. This way, Vetur should still support language-specific formatters for individual script/style/template blocks (ESLint, TSLint, stylus-supremacy, etc.) but users could also switch to using their own language-agnostic, whole-file/unified formatting with Prettier. I think that users can still opt to only format certain languages in Vue files.
This approach has many benefits:

• Prettier now maintains its own formatting support
• Prettier can use unified settings (printWidth, tab style, quotes, etc.) for all languages.
• Users can choose their own version of Prettier
• The BYOF (Bring Your Own Formatter) approach allows Vetur to focus on more important features (intellisense, syntax highlighting, etc.)
• Users who don't like Prettier's opinionated style can still use their own formatters (such as prettyhtml) for individual languages through Vetur (including the current support for using Prettier as a formatter for individual blocks so that users can combine formatters, for example ESLint for JS and Prettier for CSS).

Overall, decoupling Prettier from Vetur will soon be made possible, which is a good change for users and developers alike.

Side note: this may impact (or maybe fix) #543.

[phouri]

1.15 just got released, any eta on when this will be included in vetur? :)

[Coder-256]

@phouri For now it seems you can just install the Prettier extension and add this to your settings:

{
  "vetur.format.defaultFormatter.html": "none",
  "vetur.format.defaultFormatter.css": "none",
  "vetur.format.defaultFormatter.postcss": "none",
  "vetur.format.defaultFormatter.scss": "none",
  "vetur.format.defaultFormatter.less": "none",
  "vetur.format.defaultFormatter.stylus": "none",
  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatter.ts": "none"
}

@octref Thoughts?

[phouri]

That works :) thanks!

Though one thing that needs to be taken into consideration - is to remove vue from unsupported extensions in the prettier extension - will write to them about it.

[dimensi]

I have installed prettier extension, but it's anyway not format file. Hmm, what i do wrong

[phouri]

@dimensi in your prettier extension remove vue from prettier.disableLanguages

"prettier.disableLanguages": []

[dimensi]

@phouri thx, found it now in documentation for extension.
prettyhtml little smarter, prettyhtml remove duplicate attributes, prettier not

[Coder-256]

@phouri I think that you're right in that the Prettier extension needs to update its default disabled languages.

[fundon]

"vetur.format.defaultFormatter.html": "prettier"

[shealan]

@fundon

Try "vetur.format.defaultFormatter.html": "js-beautify-html",

[c01nd01r]

These steps helped me:

1. Update Prettier in current project to last version.
2. #950 (comment)
3. #950 (comment)

[mikegreiling]

@c01nd01r that did the trick for me as well. Hopefully, both the Vetur and Prettier extensions can be upgraded such that this is the default going forward.

[octref]

I'll add prettier alongside prettyhtml and js-beautify-html as one of the formatters for Vue templates. Also a setting vetur.format.enable, so if you do prefer prettier you can disable Vetur's formatter.

But I do think there's a lot of values in the current formatter too. For example, prettier doesn't have initial indentations for script/style blocks, don't have stylus formatter, etc.

[Deleted user]

@Coder-256 I guess we don't need vetur. Am i wrong?
Edit: Rather than syntax highlighting.

[Coder-256]

@atilkan I just wish that Vetur provided the option to call a npm script or such for formatting, that way each project can use its own formatter without relying on Vetur. It's really up to you.

[octref]

I updated the title to reflect what would be done. I'll work on this in February.

[octref]

"vetur.format.defaultFormatter.html": "prettier" is available in 0.16.2.

[luismartinezs]

"vetur.format.defaultFormatter.html": "prettier"

This was the solution for me

[octref]

You can use vetur.format.enable: false to disable Vetur formatter completely (if you want to use prettier) in the upcoming 0.17.1 release.