Wrap attributes

[CheIIau]

Maybe it's a stupid question but i can't figure it out. Can anybody help me how to wrap attibutes per line using volar as a formatter?
I want this template...

...to be formatted to this.

In vetur it was easy to do. In volar i can't find a solution

[GIBZ-GIPE]

I have exactly the same problem as @CheIIau: I can't align attributes of neither native HTML elements nor Vue components as seen in the official docs.

My configuration for Visual Studio Code is:

  "html.format.wrapAttributes": "force-expand-multiline",
  "[vue]": {
    "editor.defaultFormatter": "johnsoncodehk.volar",
    "editor.formatOnSave": true,
    "editor.formatOnSaveMode": "file",
  },
  "workbench.editor.splitInGroupLayout": "vertical"

[johnsoncodehk]

You could try given a smaller volar.formatting.printWidth in settings.

[GIBZ-GIPE]

Thanks, that helped 👍
Although, I'm not really sure I do understand. I expect volar.formatting.printWidth to relate to the general "length of a line", not only to attribute wrapping. Are there any side effects to be aware of?

[maqingbo]

Maybe you need this in setting.json:

"html.format.wrapAttributes": "force-aligned"

[fatihaziz]

It's the correct answer! thank you it help!

[MoWafa]

Thanks @maqingbo, this is the correct answer.

[joantp]

may be it is a stupid question ... but ... Can anybody help me how to avoid, prevent volar from wrapping attibutes per line using volar as a formatter?
Thank you!

[logan2d5]

Reference: HTML Programming with Visual Studio Code

[kshksdrt]

There is a prettier configuration and also an eslint rule for that