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
--fix
option 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 2022 syntaxes. It ignores unknown AST nodes, but it might be confused by non-standard syntaxes.
🔧 Options
json
{
"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 istrue
ignores
(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}
2, {"attribute": 2, "closeBracket": 1}
2, {"ignores": ["VAttribute"]}
2, {"alignAttributesVertically": false}
2, {"baseIndent": 0}
🚀 Version
This rule was introduced in eslint-plugin-vue v3.14.0