rule-proposal: add a new line after html-closing-bracket

[maksnester]

What category of rule is this? (place an "X" next to just one item)

[X] Enforces code style
[ ] Warns about a potential error
[ ] Suggests an alternate way of doing something

It could be a very convenient with the html-closing-bracket-newline rule usage.

Motivation:

Currently, this piece of html a fully valid when used with vue/recommended and this rule:

"vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "always"
    }],

They are all different:

<li>
  <a
    href="http://router.vuejs.org/"
    target="_blank"
  >vue-router</a>
</li>
<li>
  <a
    href="http://vuex.vuejs.org/"
    target="_blank"
  >
    vuex
  </a>
</li>
<li>
  <a
    href="http://vue-loader.vuejs.org/"
    target="_blank"
  >vue-loader
  </a>
</li>

Suggestion

With suggested rule it could looks like the following:

<li>
  <a
    href="http://router.vuejs.org/"
    target="_blank"
  >
    vue-router
  </a>
</li>

<div>
  <div
    some="prop"
    another="prop"
  >
    <some-html>
      <even-more />
    </some-html>
  </div>
</li>

But If there is no children I suggest no newline.

<div>
  <div some="prop"
       another="prop"
  ></div>
</li>

[michalsnik]

I feel like I've heard this proposition before 🤔Perhaps we were talking about it while discussing about two original rules. I don't think that we should add another responsibility for this rule. We should rather add new one, e.g. html-content-new-line, which would make sure that in case the element is multiline one, then its content shouldn't be at the same line as the bracket. I think it makes sense! :)

[michalsnik]

I see it like this:

Settings:

"vue/html-content-newline": ["error", {
  "singleline": "ignore",
  "multiline": "always"
}],

Incorrect:

<div
  class="panel"
>content</div>  

Correct:

<div class="panel">content</div>

<div class="panel">
  content
</div>

<div
  class="panel"
>
  content
</div>

---

Settings:

"vue/html-content-newline": ["error", {
  "singleline": "always",
  "multiline": "never"
}],

Incorrect:

<div class="panel">panel</div>

<div
  class="panel"
>
  content
</div>  

Correct:

<div class="panel">
  content
</div>

<div
  class="panel"
>content</div>

singleline and multiline options describe range of opening tag.

[evenfrost]

Looking forward to this! For reference: tslint-react has the rule for this, it's called jsx-alignment.

[chrisvfritz]

@michalsnik We just discussed this in person, but let me know if there's anything I can provide to make your work on this easier. 🙂