Skip to content

Commit 5fdb848

Browse files
mysticateamichalsnik
authored andcommitted
New: vue/html-indent rule (fixes vuejs#46) (vuejs#145)
* New: `vue/html-indent` rule (fixes vuejs#46) * remove garbages * add some tests for comma in mustache * remove switchCase option from docs * add tests for mix of text and mustache
1 parent 4f394c8 commit 5fdb848

File tree

3 files changed

+5618
-0
lines changed

3 files changed

+5618
-0
lines changed

docs/rules/html-indent.md

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
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+
"ignores": []
62+
}]
63+
}
64+
```
65+
66+
- `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.
67+
- `attribute` (`integer`) ... The multiplier of indentation for attributes. Default is `1`.
68+
- `closeBracket` (`integer`) ... The multiplier of indentation for right brackets. Default is `0`.
69+
- `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.
70+
71+
:+1: Examples of **correct** code for `{attribute: 1, closeBracket: 1}`:
72+
73+
```html
74+
<template>
75+
<div
76+
id="a"
77+
class="b"
78+
other-attr=
79+
"{longname: longvalue}"
80+
other-attr2
81+
="{longname: longvalue}"
82+
>
83+
Text
84+
</div>
85+
</template>
86+
```
87+
88+
:+1: Examples of **correct** code for `{attribute: 2, closeBracket: 1}`:
89+
90+
```html
91+
<template>
92+
<div
93+
id="a"
94+
class="b"
95+
other-attr=
96+
"{longname: longvalue}"
97+
other-attr2
98+
="{longname: longvalue}"
99+
>
100+
Text
101+
</div>
102+
</template>
103+
```
104+
105+
:+1: Examples of **correct** code for `{ignores: ["VAttribute"]}`:
106+
107+
```html
108+
<template>
109+
<div
110+
id=""
111+
class=""
112+
/>
113+
</template>
114+
```

0 commit comments

Comments
 (0)