# san/html-indent

enforce consistent indentation in <template>

  • ⚙️ This rule is included in all of "plugin:san/strongly-recommended" and "plugin:san/recommended".
  • 🔧 The --fix option on the command line (opens new window) can automatically fix some of the problems reported by this rule.

# 📖 Rule Details

This rule enforces a consistent indentation style in <template>. The default style is 2 spaces.

  • This rule checks all tags, also all expressions in directives and mustaches.
  • In the expressions, this rule supports ECMAScript 2020 syntaxes. It ignores unknown AST nodes, but it might be confused by non-standard syntaxes.
<template> <!-- ✓ GOOD --> <div class="foo"> Hello. </div> <div class="foo"> Hello. </div> <div class="foo" foo="{{bar}}" > World. </div> <div id="a" class="b" other-attr="{{ {aaa: 1, bbb: 2} }}" on-other-attr2="foo()" > {{ displayMessage }} </div> <!-- ✗ BAD --> <div class="foo"> Hello. </div> </template>
Now loading...

# 🔧 Options

{
  "san/html-indent": ["error", 4, {
    "attribute": 1,
    "baseIndent": 1,
    "closeBracket": 0,
    "alignAttributesVertically": true,
    "ignores": []
  }]
}
  • the second attribute is indentation, the value can be a number or "tab". 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.
  • baseIndent (integer) ... The multiplier of indentation for top-level statements. Default is 1.
  • closeBracket (integer | object) ... The multiplier of indentation for right brackets. Default is 0.
    You can apply all of the following by setting a number value.
    • closeBracket.startTag (integer) ... The multiplier of indentation for right brackets of start tags (<div>). Default is 0.
    • closeBracket.endTag (integer) ... The multiplier of indentation for right brackets of end tags (</div>). Default is 0.
    • closeBracket.selfClosingTag (integer) ... The multiplier of indentation for right brackets of start tags (<div/>). Default is 0.
  • alignAttributesVertically (boolean) ... Condition for whether attributes should be vertically aligned to the first attribute in multiline case or not. Default is true
  • ignores (string[]) ... The selector to ignore nodes. You can use esquery (opens new window) to select nodes. Default is an empty array.

# 2, {"attribute": 1, "closeBracket": 1}

<template> <!-- ✓ GOOD --> <div id="a" class="b" other-attr= "{{ {longname: longvalue} }}" other-attr2 ="{{ {longname: longvalue} }}" > Text </div> </template>
Now loading...

# 2, {"attribute": 2, "closeBracket": 1}

<template> <!-- ✓ GOOD --> <div id="a" class="b" other-attr= "{{ {longname: longvalue} }}" other-attr2 ="{{ {longname: longvalue} }}" > Text </div> </template>
Now loading...

# 2, {"ignores": ["VAttribute"]}

<template> <!-- ✓ GOOD --> <div id="" class="" /> </template>
Now loading...

# 2, {"alignAttributesVertically": false}

<template> <!-- ✓ GOOD --> <div id="" class="" some-attr="" /> <!-- ✗ BAD --> <div id="" class="" some-attr="" /> </template>
Now loading...

# 2, {"baseIndent": 0}

<template> <!-- ✓ GOOD --> <div> <span> Hello! </span> </div> <!-- ✗ BAD --> <div> <span> Hello! </span> </div> </template>
Now loading...

# 🔍 Implementation

Last Updated: 11/5/2021, 10:15:10 AM