attrs-newline

This rule enforces a newline between attributes, when more than a certain number of attributes is 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`
}]

ifAttrsMoreThan

If there are more than this number of attributes, all attributes should be separated by newlines. Either they should not 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" />
```