# vue/html-indent
enforce consistent indentation in
<template>
- ⚙️ This rule is included in all of
"plugin:vue/vue3-strongly-recommended","plugin:vue/strongly-recommended","plugin:vue/vue3-recommended"and"plugin:vue/recommended". - 🔧 The
--fixoption 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
}"
@other-attr2="
foo();
bar();
"
>
{{
displayMessage
}}
</div>
<!-- ✗ BAD -->
<div class="foo">
Hello.
</div>
</template>
# 🔧 Options
{
"vue/html-indent": ["error", type, {
"attribute": 1,
"baseIndent": 1,
"closeBracket": 0,
"alignAttributesVertically": true,
"ignores": []
}]
}
type(number | "tab") ... The type of indentation. 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 istrueignores(string[]) ... The selector to ignore nodes. The AST spec is here (opens new window). 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>
# 🚀 Version
This rule was introduced in eslint-plugin-vue v3.14.0