vue/html-indent
enforce consistent indentation in
<template>
- ⚙️ This rule is included in
"plugin:vue/strongly-recommended"and"plugin:vue/recommended". - 🔧 The
--fixoption on the command line 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 2017 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) ... The multiplier of indentation for right brackets. 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. You can use esquery 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>