[New] Add vue/html-tag-attrs-content-newline

[ota-meshi]

This PR adds vue/html-tag-attrs-content-newline rule.
This implements rule proposed in #445 (comment)

It is related to #415.

[michalsnik]

Thank you @ota-meshi ! We really appreciate your engagement 🥇

I’ve been testing both of these rules now in a normal project:

• ⭐️New: Add vue/html-content-newline #445
• [New] Add vue/html-tag-attrs-content-newline #547

Now that these two are ready to play a bit, I wanted to To get a decent comparison of how they both perform in template-heavy conditions.

And I must say - the old one, that we decided is too problematic actually works better in practice in my opinion 😅
But I think the multiline option should not be possible to override - it doesn’t seem to serve any purpose. After setting it to never - code starts to look totally unreadable. Additionally we might however add an extra value to the singleline option, so we have: ignore, never, always and if-has-attribute (or something like this).

The reasons why I consider it better after all are:

• It's not too strict by default, and allows very common (and not necessarily unreadable) cases like:

<span class="item-badge">{{ badge }}</span>

• But it warns about:

<tr><td>
  {{ col }}
</td></tr>

that there should be a new line after <tr> and before </tr> 👍

• with an additional option for singleline (e.g. if-has-attr) it might also report the first case, but in the end I think it should be a team's decision to make, not ours.

I would love to hear what is your opinion on this topic @ota-meshi
I know we've been going back-and-forth with this, and I'm really sorry for the confusion..

The more I think about it I have more ideas.. The newest one is about splitting this rule into two:

• multiline-html-element-content-newline - on/off - if the tag is multiline - force putting content in newline
• singleline-html-element-content-newline - on/off - with turned on - content should always go to new line, we might however introduce an extra strict flag, that could be set to false or true, and depending on this flag - we might allow having content in one line if there are no attributes on the element.

@chrisvfritz I think I have too many ideas regarding this topic...

[ota-meshi]

Does html-tag-attrs-content-newline mean that it is merged with singleline-html-element-content-newline?

If so, I think multiline-html-element-content-newline and singleline-html-element-content-newline are very useful.

Is each specification below?

multiline-html-element-content-newline

incorrect code:

<div>multiline
  content</div>

<tr><td>multiline</td>
  <td>children</td></tr>

<div><!-- multiline -->
  <!-- comments --></div>

<div><!-- multiline
  comment --></div>

<div
  attr>multiline start tag</div>
<div
  >multiline start tag</div>
<div
  ></div> <!-- empty content but multiline start tag -->

<div>multiline element(expect newline after start tag)
</div>

<div>
multiline element(expect newline before end tag)</div>

<div>multiline end tag</div
>

singleline-html-element-content-newline

incorrect code for strict: true:

<div>singleline content</div>

<tr><td>singleline</td><td>children</td></tr>

<div><!-- singleline comment --></div>

<div><!-- singleline --><!-- comments --></div>

<div    >singleline element(start tag and content and end tag)</div     >

<div></div> <!--  empty contents -->
<div>       </div>  <!--  space contents -->

incorrect code for strict: false:

<div attr>singleline content</div>

<tr attr><td>singleline</td><td>children</td></tr>

<div attr><!-- singleline comment --></div>

<div attr>singleline element(start tag and content and end tag)</div     >

<div attr></div> <!--  empty contents -->
<div attr>       </div>  <!--  space contents -->

correct code for strict: false:

<div>singleline content</div>

<tr><td>singleline</td><td>children</td></tr>

<div><!-- singleline comment --></div>

<div     >singleline element(start tag and content and end tag)</div     >

<div></div> <!--  empty contents -->
<div>       </div>  <!--  space contents -->

[michalsnik]

That's what I exactly imagined @ota-meshi :) I think it is plain and simple, less things to think about.

One case I won't bother about though:

<div>multiline end tag</div
>

I mean we'd treat it as multiline and force newline, because of the overall location that covers 2 lines, but not because the end tag itself is multiline.

Multiline end tags should rather be reported separately, but it's not a big priority and we probably won't create a rule for that.

[ota-meshi]

Closing to continue working with #551 and #552.