Option to never wrap single attributes and always wrap multiple attributes

🚀 Feature Proposal

I don’t see a setting for attribute wrapping other than printWidth. This is surprisingly ok since with a pretty low printWidth, the default formatting is quite to my liking, but it ends up looking odd when wrapping single attribute elements. I would love a setting like this:

"wrapAttributesIgnoreSingle": true,
"wrapAttributesNumber": 2 // wrap all attributes when there are n or more 

or more simply but less flexible:

"wrapMultipleAttributes": true

Motivation

Approaching wrapping based on attribute number instead of length is fairly visually appealing, it makes it a little easier for humans to read, but so much easier for git to read, so it will reduce the number of git conflicts if multiple people change an element’s attributes. It is also in accordance with the official Vue.js styleguide

Example

Current output:

  <InputItem :input="inputs.currentAge"/>
  <InputItem
    :input="inputs.theRetirementAgeOfYourGreatestGrandMother"
  />
  <a href="#" class="a" rel="tag">A</a>

I would want a combination of settings that would get me this output:

  <InputItem :input="inputs.currentAge"/>
  <InputItem :input="inputs.theRetirementAgeOfYourGreatestGrandMother"/>
  <a 
    href="#" 
    class="a" 
    rel="tag"
  >A</a>

Vote

If you agree with my proposal vote with a 👍

[StarpTech]

I decided to add a new option called wrapAttributes when true it will always wrap attributes when the element has more than one.

[StarpTech]

Hi @thedamon thanks for your proposal! I understand your reasons but I’m not convinced from your examples. Wrapping attributes based on the printWidth work for most of the use cases. I don’t want to add another option when they aren’t really required.

If you want to archive this formatting with the current solution you can use the ignore flag:

<InputItem :input="inputs.currentAge"/>
<!-- prettyhtml-ignore-->
<InputItem :input="inputs.theRetirementAgeOfYourGreatestGrandMother"/>
<!-- prettyhtml-ignore-->
<a href="#" class="a" rel="tag">A</a>