Vetur: Updated prettier today and html formatter no longer works

[chanlito]

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

Info

• Platform: macOS
• Vetur version: 0.11.6
• VS Code version: 1.19.2
• Prettier Vs Code: 1.1.2

Problem

my configuration below no longer works after updating prettier

"vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "indent_size": 2,
      "end_with_newline": false,
      "wrap_attributes": "force-aligned",
      "wrap_attributes_indent_size": 2,
      "editorconfig": true
    }
  }

[lunchboxsushi]

I was looking all day and finally got it to work,

I downgraded to vetur 0.10. and prettier 1.0.0

you can downgrade via installing from the store using

https://${publisher}.gallery.vsassets.io/_apis/public/gallery/publisher/${publisher}/extension/${extension_name}/${version}/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage

where publisher of octref.vetur = octref
extension = vetur.

once downloaded renamed the extension from VSIXPackage to VSIX and in vsCode press f1 and find Exensions: install from vsix locate the path, wait a few seconds for it to install and reload window.

I'm not sure if any newer versions will work but this got me going for now.

update
vetur 0.11.6 works with prettier 1.0.0

**update 2"
tried to upgrade prettier to 1.1.0 however it stopped working there with vetur.
to get it working you can have latest vetur but will need to downgrade into prettier 1.0.0 via
https://esbenp.gallery.vsassets.io/_apis/public/gallery/publisher/esbenp/extension/prettier-vscode/1.0.0/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage

[ericcirone]

Same issue here.

[ericcirone]

Seems like its the latest version of prettier-vsode 1.1.2. If I disable the plugin then all works fine in .vue files.

[ericcirone]

reverted to prettier-vscode-1.0.1 and all is working again.

[CiGit]

Hello Vetur users!

Since [email protected] we register a formatter for "vue" files ([email protected]). It seems it's interacting badly with Vetur which does the same... (and seems we are wining the formatter battle :v: )
You can disable prettier on vue files
prettier.disableLanguages: ["vue"] (restart vscode)
and continue to use Vetur's formatter which also formats the html template part of your SFC. Prettier only takes care of script and style part.

I don't know if you can do the opposite tho.

[ericcirone]

I did try setting, prettier.disableLanguages: ["vue"] but then since Vetur uses prettier, it didn't format anything else. I can try again.

[CiGit]

@ericcirone I don't really know Vetur, but I don't think it relies on Prettier-vscode to do the formatting...
Would need some investigations.
Have you restarted vscode?

[ericcirone]

I did not reload the window, after I did that it started working correctly. Thanks @CiGit

[CiGit]

Great, will update my posts to mention that :-)
It only appears in our readme ...

[octref]

@CiGit prettier-vscode compared to Vetur

• does not have a formatter for html
• does not have a formatter for stylus
• does now allow selectable formatters for each sections (for example, using typescript's formatter instead of prettier for formatting TS)

So I suggest that you specify prettier.disableLanguages: ["vue"] as a default.

For others, this is already in FAQ and answered for at least 5 times. Please search issues and read FAQ before making new issues.

[hunmar]

I just tried prettier "vetur.format.defaultFormatter.html": "prettier" and it works for html part

[email protected]
[email protected]

[ghost]

@hunmar It works but has problems.