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.

[and3rson]

Sorry for necrobumping, but how do I configure this with nvim-lspconfig? E. g. here's my config:

lspconfig.volar.setup {
  on_attach = on_attach,
  filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
  init_options = {
    vue = {
      hybridMode = false,
    },
    typescript = {
        tsdk = "/usr/lib/node_modules/typescript/lib/",
    },
  },
}

• How do I add html.format.wrapAttributes in there?
• How do I force html.format.wrapAttributes on a per-project basis, so that other devs also use the same alignment with their formatters?

Edit

I figured it out:

lspconfig.volar.setup {
  on_attach = on_attach,
  filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
  init_options = {
    vue = {
      hybridMode = false,
    },
    typescript = {
        tsdk = "/usr/lib/node_modules/typescript/lib/",
    },
  },
  settings = {
    html = {
      format = {
        wrapAttributes = "force-expand-multiline",
      },
    },
  },
}

Now I wish there was a way to configure this on a per-project basis.

[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