Vetur: Prettier html formatting forces attributes to wrap, need better html formatting option

[ghost]

Problem

I read the news about prettier supporting vue files. After the update came i saw how it formats. This is not usable or configurable. Tried prettyhtml but can't configure it too. First screenshot demonstrate how ugly and unreadable prettier formats html.

[octref]

There is no prettier support yet. See #950.

It is configurable, read docs please https://vuejs.github.io/vetur/formatting.html.

[ghost]

@octref But it seems it works. prettyhtml use it internally.

[ghost]

@octref I tried all html formatting options on the docs. I guess there are 3 of them.
How can we disable wrapping attributes?

[octref]

Use the js-beautify-html one.

[ghost]

For anyone interested

"vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "aligned-multiple"
    }
  },

More info:
https://github.com/beautify-web/js-beautify
https://vuejs.github.io/vetur/formatting.html#settings

[qinshenxue]

"vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "aligned-multiple"
        },
        "prettyhtml": {
            "printWidth": 400,
            "wrapAttributes": false
        }
    },

[StanielPetrov]

For anyone interested

"vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "aligned-multiple"
    }
  },

More info:
https://github.com/beautify-web/js-beautify
https://vuejs.github.io/vetur/formatting.html#settings

Cheers! This fixed it! :)

[ghost]

Prettier now supports better formatting.