max-attributes-per-line.md

pageClass	sidebarDepth	title	description
rule-details	0	lodash-template/max-attributes-per-line	enforce the maximum number of HTML attributes per line

lodash-template/max-attributes-per-line

enforce the maximum number of HTML attributes per line

• ⚙️ This rule is included in "plugin:lodash-template/recommended-with-html" and "plugin:lodash-template/all".
• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

Rule Details

Limits the maximum number of attributes/properties per line to improve readability.

This rule aims to enforce a number of attributes per line in HTML. It checks all the elements and verifies that the number of attributes per line does not exceed the defined maximum. An attribute is considered to be in a new line when there is a line break between two attributes.

<% /* eslint "lodash-template/max-attributes-per-line": "error" */ %>
<!-- ✓ GOOD -->
<input foo="1">

<input
  foo="1"
  bar="2"
>

<input
  foo="1"
  bar="2"
  baz="3"
>

<!-- ✗ BAD -->
<input foo="1" bar="2">

<input
  foo="1" bar="2"
>

<input
  foo="1" bar="2"
  baz="3"
>

Options

{
  "lodash-template/max-attributes-per-line": ["error", {
    "singleline": 1,
    "multiline": {
      "max": 1,
      "allowFirstLine": false
    }
  }]
}

allowFirstLine

For multi-line declarations, defines if allows attributes to be put in the first line. (Default false)

<% /* eslint
  lodash-template/max-attributes-per-line: ["error", {
    "multiline": {
      "allowFirstLine": false
    }
  }]
*/ %>

<!-- ✓ GOOD -->
<input
  foo="1"
  bar="2"
>

<!-- ✗ BAD -->
<input foo="1"
  bar="2"
>

singleline

Number of maximum attributes per line when the opening tag is in a single line. (Default is 1)

<% /* eslint
  lodash-template/max-attributes-per-line: ["error", {
    "singleline": 1
  }]
*/ %>

<!-- ✓ GOOD -->
<input foo="1">

<!-- ✗ BAD -->
<input foo="1" bar="2">

multiline

Number of maximum attributes per line when a tag is in multiple lines. (Default is 1)

<% /* eslint
  lodash-template/max-attributes-per-line: ["error", {
    "multiline": 1
  }]
*/ %>

<!-- ✓ GOOD -->
<input
  foo="1"
  bar="2"
>

<!-- ✗ BAD -->
<input
  foo="1" bar="2"
>

Implementation

• Rule source
• Test source