# san/html-indent
在
<template>中使用一致的缩进
- ⚙️ 此规则包含于
"plugin:san/strongly-recommended"和"plugin:san/recommended". - 🔧 命令行 (opens new window)中的
--fix选项可以自动修复此规则报告的一些问题。
# 📖 规则细节
此规则在 <template> 中要求使用一致的缩进样式。 默认样式为 2 个空格。
- 此规则检查所有标签，指令以及插值语法中的所有表达式。
- 在表达式中，此规则支持 ECMAScript 2020 语法。 它会忽略未知的 AST 节点，但可能会被非标准语法混淆。
<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>
# 🔧 配置
{
"san/html-indent": ["error", 4, {
"attribute": 1,
"baseIndent": 1,
"closeBracket": 0,
"alignAttributesVertically": true,
"ignores": []
}]
}
- 第二个参数代表缩进的类型，值可以是一个数字或者字符串
"tab"，默认值为"2"。如果这是一个数字，它是一个缩进的空格数。如果这是"tab"，它使用一个制表符缩进一个。 attribute(integer) ... 属性缩进的乘数。默认值为"1"。baseIndent(integer) ... 最外层语句的缩进倍数。默认值为"1"。closeBracket(integer | object) ... 右括号缩进的乘数。默认值为"0"。 您可以通过设置数值来应用以下内容。closeBracket.startTag(integer) ... 开始标签右括号的缩进倍数 (<div>)。默认值为"0"。closeBracket.endTag(integer) ... 结束标签右括号的缩进倍数 (</div>)。默认值为"0"。closeBracket.selfClosingTag(integer) ... 自闭合标签右括号的缩进倍数 (<div/>)。默认值为"0"。
alignAttributesVertically(boolean) ... 在多行情况下，属性是否应该垂直对齐到第一个属性的条件。默认为trueignores(string[]) ... 忽略节点的选择器。您可以使用 esquery (opens new window) 来选择节点。默认是一个空数组。
# 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>