element-newline

This rule enforces newlines between tags.

How to use

.eslintrc.js 
module.exports = {
  rules: {
    "@html-eslint/element-newline": "error",
  },
};

Rule Details

Examples of incorrect code for this rule:

<html>
  <head><title>newline</title></head>
</html>

Examples of correct code for this rule:

<html>
  <head>
    <title>newline</title>
  </head>
</html>

Options

This rule has an object option:

  1. "skip": Skips newline checking for the children of the specified elements.
  2. "inline": Instructs the linter that the specified elements can remain on the same line.
//...
"@html-eslint/element-newline": ["error", {
  "skip": Array<string>
}]

skip

You can specify list of tag names in the skip option. Newline checking is not performed on children of the specified tags.

Examples of correct code for the { "skip": ["pre", "code"] } option:

<pre>
    <div></div><div></div>
</pre>
<code>
    <span></span><div></div>
</code>

inline

You can specify list of tag names in the inline option. Newlines are not enforced between the specified tags. As a shortcut, if you include the special value $inline in the list then all HTML tags that are usually inline (as defined by Mozilla) will be included.

Examples of correct code for the { "inline": ["$inline"] } option:

<div>
    I <strong>like</strong> these <dfn>inline</dfn> tags.
    <p>It's <em>true</em>!</p>
</div>