[Rule idea] No empty non void elements

Hello,

I would love to implement a new rule to avoid non-empty void elements in templates.

Something that could lead to raise an error on <p></p> or <div></div> for example. Of course nothing would happen on <p>{{myVar}}</p> or any void elements (<br >).

Here is the applied configuration I will use:

const NON_VOID_TAGS = [
  'h1',
  'h2',
  'h3',
  'h4',
  'h5',
  'h6',
  'p',
  'span',
  'a',
  'ul',
  'ol',
  'li',
  'div',
];

Here are the use cases:

// BAD
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<p></p>
<span></span>
<a></a>
<ul></ul>
<ol></ol>
<li></li>
<div></div>

// GOOD
<h1>My title</h1>
<h2>My title</h2>
<h3>My title</h3>
<h4>My title</h4>
<h5>My title</h5>
<h6>My title</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<span>Lorem ipsum</span>
<a>my Link</a>
<ul><li>item</li></ul>
<ol>item</ol>
<li>item</li>
<div>something here</div>

I still do have a concern about the div element here, as we may want to use and empty one to create visual stylised elements with css. Maybe we can add or remove the div in the configuration list with a specific config value ?

I was thinking to call this rule no-empty-non-void-elements and disable it by default ?

In order to submit an acceptable final PR, do you have some auto generated files (like Changelog ?) or stuff I must perform during new rule implementation ? In plus than Documentation and tests.

Thanks

[rwjblue]

Gotcha, I was misinterpreting the term “void” in your original post. I typically use the term “void elements” to refer to things like:

<input>
<br>
<img>

Which apparently are actually called empty elements.

I’d vaguely prefer to avoid confusing my future self by not using void in the name here, what do you think about something like blacklist-childless-elements?

[rwjblue]

Seems great!