Skip to content

Commit f020d17

Browse files
committed
New: vue/html-indent rule (fixes #46)
1 parent 3ed8c5c commit f020d17

File tree

5 files changed

+5561
-2
lines changed

5 files changed

+5561
-2
lines changed

.vscode/settings.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"editor.tabSize": 2
2+
"editor.tabSize": 2,
3+
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true
34
}

docs/rules/html-indent.md

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
# enforce consistent indentation in `<template>` (vue/html-indent)
2+
3+
## :book: Rule Details
4+
5+
This rule enforces a consistent indentation style in `<template>`. The default style is 4 spaces as same as [the core indent rule](http://eslint.org/docs/rules/indent).
6+
7+
- This rule checks all tags, also all expressions in directives and mustaches.
8+
- In the expressions, this rule supports ECMAScript 2017 syntaxes. It ignores unknown AST nodes, but it might be confused by non-standard syntaxes.
9+
10+
:-1: Examples of **incorrect** code for this rule:
11+
12+
```html
13+
<template>
14+
<div class="foo">
15+
Hello.
16+
</div>
17+
</template>
18+
```
19+
20+
:+1: Examples of **correct** code for this rule:
21+
22+
```html
23+
<template>
24+
<div class="foo">
25+
Hello.
26+
</div>
27+
</template>
28+
```
29+
30+
```html
31+
<template>
32+
<div class="foo">
33+
Hello.
34+
</div>
35+
<div
36+
id="a"
37+
class="b"
38+
:other-attr="{
39+
aaa: 1,
40+
bbb: 2
41+
}"
42+
@other-attr2="
43+
foo();
44+
bar();
45+
"
46+
>
47+
{{
48+
displayMessage
49+
}}
50+
</div>
51+
</template>
52+
```
53+
54+
## :wrench: Options
55+
56+
```json
57+
{
58+
"vue/html-indent": ["error", type, {
59+
"attribute": 1,
60+
"closeBracket": 0,
61+
"switchCase": 0,
62+
"ignores": []
63+
}]
64+
}
65+
```
66+
67+
- `type` (`number | "tab"`) ... The type of indentation. Default is `4`. 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.
68+
- `attribute` (`integer`) ... The multiplier of indentation for attributes. Default is `1`.
69+
- `closeBracket` (`integer`) ... The multiplier of indentation for right brackets. Default is `0`.
70+
- `ignores` (`string[]`) ... The selector to ignore nodes. The AST spec is [here](https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md). You can use [esquery](https://github.com/estools/esquery#readme) to select nodes. Default is an empty array.
71+
72+
:+1: Examples of **correct** code for `{attribute: 1, closeBracket: 1}`:
73+
74+
```html
75+
<template>
76+
<div
77+
id="a"
78+
class="b"
79+
other-attr=
80+
"{longname: longvalue}"
81+
other-attr2
82+
="{longname: longvalue}"
83+
>
84+
Text
85+
</div>
86+
</template>
87+
```
88+
89+
:+1: Examples of **correct** code for `{attribute: 2, closeBracket: 1}`:
90+
91+
```html
92+
<template>
93+
<div
94+
id="a"
95+
class="b"
96+
other-attr=
97+
"{longname: longvalue}"
98+
other-attr2
99+
="{longname: longvalue}"
100+
>
101+
Text
102+
</div>
103+
</template>
104+
```
105+
106+
:+1: Examples of **correct** code for `{ignores: ["VAttribute"]}`:
107+
108+
```html
109+
<template>
110+
<div
111+
id=""
112+
class=""
113+
/>
114+
</template>
115+
```

0 commit comments

Comments
 (0)