Prettier-vscode: Vetur html format does not work with prettier-vscode > 1.0.1

[ericcirone]

All versions past 1.0.1 will not work with Vetur when setting Vetur to format html with js-beautify-html. Installing version 1.0.1 of prettier-vscode fixes this issue. Not sure if its a prettier-vscode issue or a Vetur issue.

Vetur issue here is: https://github.com/vuejs/vetur/issues/658

[CiGit]

Since [email protected] we register a "vue" formatter for that language. The one provided by prettier. You can disable it with prettier.disableLanguages: ["vue"] and restart vscode

Currently prettier for vue does not format the template part of your vue SFC

[octref]

I suggest opt-in instead of opt-out for users to use prettier-vscode as formatter for Vue files.

Prettier's support for Vue is still very sparse: https://github.com/vuejs/vetur/issues/658#issuecomment-358737575

I do plan to help contribute to prettier for better Vue support. But at its current state I don't think it should be set as default formatter for Vue.

[azz]

Any way we can do it dynamically, i.e. If vetur is installed and running, don't register the vue language?

[azz]

@octref We'd love your help in improving Prettier's Vue support. Getting HTML support in Prettier completed is something that we've been super slow with.

[octref]

Any way we can do it dynamically, i.e. If vetur is installed and running, don't register the vue language?

Yes with vscode.extensions.getExtension('octref.vetur')

Getting HTML support in Prettier completed is something that we've been super slow with.

OK I'll start looking into it

[azz]

Yes with vscode.extensions.getExtension('octref.vetur')

This sounds like the best avenue to me then, if someone is using this extension without vetur it will work as expected, and if they're using both they'll get vetur's formatting which is more feature-rich at the moment.

OK I'll start looking into it

❤️

[CiGit]

Yes with vscode.extensions.getExtension('octref.vetur')

I'm not sure this is the best solution. If someone wanted to try prettier on vue files (for whatever reason), it would be hard to enable it. You would have to uninstall/disable vetur and install any other extension providing vue grammar (or at lease file association) to be able to use prettier.

I think we can simply disable it by default. Changing 1 option / reload seems easier to me. Maybe disable vetur's formatter if this is possible -> 2 options. This is maybe not easier, but certainly more common.

[octref]

Yeah, I agree having prettier.disableLanguages: ["vue"] seems to be better for now. Later when prettier has html formatter we can look into how we might collaborate.

Another quite popular need is to have initial indentation for style/script sections, but I don't know if that's something prettier wants to add.

[azz]

If someone wanted to try prettier on vue files (for whatever reason), it would be hard to enable it.

vetur already runs Prettier, so you only need to use one extension at a time - I'm not sure I see the reasoning here.

[CiGit]

If I understood vetur correctly, it doesn't run prettier in "vue" mode.
It splits SFC and sends each supported section to prettier

[azz]

That's basically what Prettier 1.10 does anyway. They should be functionally identical with the exception of vetur handing the html to a different formatter.

[octref]

It also does a bunch of other things, some of which I don’t think it would make sense to add to prettier
https://github.com/vuejs/vetur/issues/658#issuecomment-358737575

[azz]

Stylus is the only other lang missing? Doesn't seem unreasonable to make a prettier plugin for Stylus.

[octref]

Allow choice among multiple formatters might not be what prettier want to do. Many people prefer the TS formatter from TS language service instead of prettier's.

Another is initial indentation, like so

<script>
  // indent here
</script>
<style>
  // indent here
</style>

The community is half-half on this style choice, but I doubt adding Vue specific options here would be beneficial to prettier since it seems to be against prettier's philosophy.

[samburgers]

this comment got my .vue files formatting top to bottom in VSCode

https://github.com/vuejs/vetur/issues/543#issuecomment-358762077

[CiGit]

"vue" is now disabled by default

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.