# 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>
# 🔧 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 is2
. 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 is1
.baseIndent
(integer
) ... The multiplier of indentation for top-level statements. Default is1
.closeBracket
(integer | object
) ... The multiplier of indentation for right brackets. Default is0
.
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 is0
.closeBracket.endTag
(integer
) ... The multiplier of indentation for right brackets of end tags (</div>
). Default is0
.closeBracket.selfClosingTag
(integer
) ... The multiplier of indentation for right brackets of start tags (<div/>
). Default is0
.
alignAttributesVertically
(boolean
) ... Condition for whether attributes should be vertically aligned to the first attribute in multiline case or not. Default istrue
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>
# 2, {"attribute": 2, "closeBracket": 1}
<template>
<!-- ✓ GOOD -->
<div
id="a"
class="b"
other-attr=
"{{ {longname: longvalue} }}"
other-attr2
="{{ {longname: longvalue} }}"
>
Text
</div>
</template>
# 2, {"ignores": ["VAttribute"]}
<template>
<!-- ✓ GOOD -->
<div
id=""
class=""
/>
</template>
# 2, {"alignAttributesVertically": false}
<template>
<!-- ✓ GOOD -->
<div id=""
class=""
some-attr=""
/>
<!-- ✗ BAD -->
<div id=""
class=""
some-attr=""
/>
</template>
# 2, {"baseIndent": 0}
<template>
<!-- ✓ GOOD -->
<div>
<span>
Hello!
</span>
</div>
<!-- ✗ BAD -->
<div>
<span>
Hello!
</span>
</div>
</template>