Change HTML/JSX formatting to have one attribute/prop per line

Similar to what was done for #3847 I think it best to break some of the discussion from #3101 into a new issue that people can 👍 or 👎.

I’m proposing that for HTML and JSX to have Prettier always have one attribute/prop per line (and thus not respect the developer’s original preference). Code would then be formatted as shown below. This is in contrast to the current behaviour where we fit as much as possible with the print-width.

Expected behavior:

<MyComponent lorem="1"/>

<MyComponent
  lorem="1"
  ipsum="2"
/>

<MyComponent
  lorem="1"
  ipsum="2"
  dolor="3"
/>

This suggestion for one attribute/prop per line was proposed several times in the discussion of #3101 but I think it is clearer if this is pulled into it’s own proposal. The original proposal in #3101 is that Prettier would add an option to preserve original formatting which, while I agree with the author with the style that they want, I don’t think a) an option, nor b) preserving original formatting follows the aims for Prettier (see also #2068). Instead I think the aims of #3101 are better served by this proposal to ignore the print-width and always place attributes/props on new lines (assuming that there is more than one).

This style appears to be the most common formatting for Angular, Vue and React from what I can tell. It style appears to be the style enforced by the rules:

• React: jsx-max-props-per-line which Airbnb set to to 1 in their style guide
• Vue: max-attributes-per-line which has a default to 1.

[ghost]

The point I am trying to make is that the vertical space matters. Wasting it (too much) has negative impact on code manageability.

On the other hand, many diff tools are line-based. So by putting each attribute on it’s own line, we reduce the number of conflicts a team has to solve.

From the example above consider

-     <ui-currency v-model="income.business.incomePrevYear" :minInclusive="0" required key="incomePrevYear">Last year income</ui-currency>
+     <ui-currency v-model="income.business.incomePrevYear" :minInclusive="1" required key="incomePrevYear">Last year income</ui-currency>

vs.

    <ui-currency
      v-model="income.business.incomePrevYear"
-     :minInclusive="0"
+     :minInclusive="1"
      required
      key="incomePrevYear"
    >Last year income</ui-currency>

[mixn]