CODEWITHSUNDEEP
visual-studio-code
Paul van den Dool
Paul van den Dool

Reputation: 3232

Wrap HTML attributes on new lines set by user when formatting in Visual Studio Code

In our team some people use Webstorm and others use Visual Studio Code. Webstorm aligns attributes vertically when they're put on a new line by the user. It will align with the last attribute in the line. Visual Studio Code has a setting where you can wrap the attributes on format, but it wraps all attributes.

It would be nice if both editors would handle formatting the same.

I've tried several extensions (Prettier, Beautify, Alignment, Code alignment, Better Align) in Visual Studio Code, but none does what I want it to do. Does anybody know of any setting or extension I might have missed that does what I want? Or is it simply not possible in Visual Studio Code?

User setting

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

Result (how VS Code aligns attributes)

<input type="text"
       name="input_name"
       placeholder="What's your name">

Desired result (how Webstorm aligns attributes)

<input type="text" name="input_name"
                   placeholder="What's your name">

Upvotes: 22

Views: 18863

Answers (1)

Nox
Nox

Reputation: 434

Try these options for the html.format.wrapAttributes setting.

  // Wrap attributes.
  //  - auto: Wrap attributes only when line length is exceeded.
  //  - force: Wrap each attribute except first.
  //  - force-aligned: Wrap each attribute except first and keep aligned.
  //  - force-expand-multiline: Wrap each attribute.
  //  - aligned-multiple: Wrap when line length is exceeded, align attributes vertically.

Upvotes: 31

Related Questions