Skip to content

lodash-template/html-indent

enforce consistent HTML indentation.

  • ⚙️ 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

This rule enforces a consistent HTML indentation style. The default style is 2 spaces.

html
<% /* eslint "lodash-template/html-indent": "error" */ %>
<!-- ✓ GOOD -->
<div>
  <div class="foo">
    Hello.
  </div>
</div>

<!-- ✗ BAD -->
<div>
<div class="foo">
Hello.
</div>
</div>

Options

json
{
  "lodash-template/html-indent": ["error", type, {
    "attribute": 1,
    "closeBracket": 0
  }]
}
  • type (number | "tab") ... The type of indentation. Default is 2. If this is a number, it's the number of spaces for one indent. If this is "tab", it uses one tab for one indent.
  • attribute (integer) ... The multiplier of indentation for attributes. Default is 1.
  • closeBracket (integer) ... The multiplier of indentation for right brackets. Default is 0.

Examples for this rule with { attribute: 1, closeBracket: 1 } option:

html
<% /* eslint "lodash-template/html-indent": ["error", 2, { "attribute": 1, "closeBracket": 1 }] */ %>
<!-- ✓ GOOD -->
<div>
  <div
    id="a"
    class="b"
    attr1="c"
    attr2="d"
    >
    Text
  </div>
</div>

Examples for this rule with { attribute: 2, closeBracket: 1 } option:

html
<% /* eslint "lodash-template/html-indent": ["error", 2, { "attribute": 2, "closeBracket": 1 }] */ %>
<!-- ✓ GOOD -->
<div>
  <div
      id="a"
      class="b"
      attr1="c"
      attr2="d"
    >
    Text
  </div>
</div>

Implementation