attrs-newline

This rule enforces a newline between attributes when more than a certain number of attributes are present.

How to use

.eslintrc.js

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

Rule Details

Examples of incorrect code for this rule:

<p class="foo" data-custom id="p">
  <img class="foo" data-custom />
</p>

Examples of correct code for this rule:

<p
  class="foo"
  data-custom
  id="p"
>
  <img class="foo" data-custom />
</p>

Options

This rule has an object option:

//...
"@html-eslint/attrs-newline": ["error", {
  "closeStyle": "sameline" | "newline", // Default `"newline"`
  "ifAttrsMoreThan": number, // Default `2`
  "skip": string[], // Default `[]`
  "inline": string[], // Default `[]`
}]

ifAttrsMoreThan

If there are more than this number of attributes, all attributes should be separated by newlines.

The default is 2.

Examples of correct code for "ifAttrsMoreThan": 2

<p class="foo" id="p">
  <img
    class="foo"
    data-custom
    id="img"
  />
</p>

closeStyle

How the open tag's closing bracket > should be spaced:

"newline": The closing bracket should be on a newline following the last attribute:
```
<img
  class="foo"
  data-custom
  id="img"
/>
```
"sameline": The closing bracket should be on the same line following the last attribute
```
<img
  class="foo"
  data-custom
  id="img" />
```

skip

A list of tag names for which the rule is entirely skipped — including all descendant elements — even if the number of attributes exceeds ifAttrsMoreThan. This is useful for tags like <pre> or <code> where formatting (including nested markup) must be preserved as-is.

"@html-eslint/attrs-newline": ["error", {
  "ifAttrsMoreThan": 1,
  "skip": ["pre", "code"]
}]

inline

A list of tag names that are treated as inline elements. The rule is skipped for the element itself only; descendant elements inside it are still subject to the rule. This is useful for inline elements embedded inside prose where expanding attributes to multiple lines would break readability, while still enforcing newlines on any block-level children.

Supports the $inline preset, which covers all HTML inline text semantics elements (a, abbr, b, span, strong, etc.).

Examples of correct code for "inline": ["$inline"]:

<p>
  The quick brown <span class="highlight" data-id="1">fox jumps over</span>
  the <a class="link" href="/foo" target="_blank">lazy dog</a> today.
</p>