Skip to content

Commit ba25f22

Browse files
armano2michalsnik
armano2
authored and
michalsnik
committed
Add valid-* eslint-code-block (#622)
1 parent ac27804 commit ba25f22

13 files changed

+193
-194
lines changed

‎docs/rules/valid-v-bind.md

+14-12
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,22 @@ This rule does not report `v-bind` directives which do not have their argument (
1515

1616
This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
1717

18+
<eslint-code-block :rules="{'vue/valid-v-bind': ['error']}">
1819
```html
19-
<div v-bind/>
20-
<div :aaa/>
21-
<div v-bind:aaa.bbb="foo"/>
22-
```
23-
24-
:+1: Examples of **correct** code for this rule:
25-
26-
```html
27-
<div v-bind="foo"/>
28-
<div v-bind:aaa="foo"/>
29-
<div :aaa="foo"/>
30-
<div :aaa.prop="foo"/>
20+
<template>
21+
<!-- ✓ GOOD -->
22+
<div v-bind="foo"/>
23+
<div v-bind:aaa="foo"/>
24+
<div :aaa="foo"/>
25+
<div :aaa.prop="foo"/>
26+
27+
<!-- ✗ BAD -->
28+
<div v-bind/>
29+
<div :aaa/>
30+
<div v-bind:aaa.bbb="foo"/>
31+
</template>
3132
```
33+
</eslint-code-block>
3234

3335
## :wrench: Options
3436

‎docs/rules/valid-v-cloak.md

+11-11
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,19 @@ This rule reports `v-cloak` directives in the following cases:
1212
- The directive has that modifier. E.g. `<div v-cloak.bbb></div>`
1313
- The directive has that attribute value. E.g. `<div v-cloak="ccc"></div>`
1414

15-
:-1: Examples of **incorrect** code for this rule:
16-
17-
```html
18-
<div v-cloak:aaa/>
19-
<div v-cloak.bbb/>
20-
<div v-cloak="ccc"/>
21-
```
22-
23-
:+1: Examples of **correct** code for this rule:
24-
15+
<eslint-code-block :rules="{'vue/valid-v-cloak': ['error']}">
2516
```html
26-
<div v-cloak/>
17+
<template>
18+
<!-- ✓ GOOD -->
19+
<div v-cloak/>
20+
21+
<!-- ✗ BAD -->
22+
<div v-cloak:aaa/>
23+
<div v-cloak.bbb/>
24+
<div v-cloak="ccc"/>
25+
</template>
2726
```
27+
</eslint-code-block>
2828

2929
## :wrench: Options
3030

‎docs/rules/valid-v-else-if.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,20 @@ This rule reports `v-else-if` directives in the following cases:
1616

1717
This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
1818

19-
:-1: Examples of **incorrect** code for this rule:
20-
21-
```html
22-
<div v-else-if/>
23-
<div v-else-if:aaa="foo"/>
24-
<div v-else-if.bbb="foo"/>
25-
```
26-
27-
:+1: Examples of **correct** code for this rule:
28-
19+
<eslint-code-block :rules="{'vue/valid-v-else-if': ['error']}">
2920
```html
30-
<div v-if="foo"/>
31-
<div v-else-if="bar"/>
21+
<template>
22+
<!-- ✓ GOOD -->
23+
<div v-if="foo"/>
24+
<div v-else-if="bar"/>
25+
26+
<!-- ✗ BAD -->
27+
<div v-else-if/>
28+
<div v-else-if:aaa="foo"/>
29+
<div v-else-if.bbb="foo"/>
30+
</template>
3231
```
32+
</eslint-code-block>
3333

3434
## :wrench: Options
3535

‎docs/rules/valid-v-else.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,20 @@ This rule reports `v-else` directives in the following cases:
1414
- The directive is on the elements that the previous element don't have `v-if`/`v-if-else` directives. E.g. `<div v-else></div>`
1515
- The directive is on the elements which have `v-if`/`v-if-else` directives. E.g. `<div v-if="foo" v-else></div>`
1616

17-
:-1: Examples of **incorrect** code for this rule:
18-
19-
```html
20-
<div v-else="foo"/>
21-
<div v-else:aaa/>
22-
<div v-else.bbb/>
23-
```
24-
25-
:+1: Examples of **correct** code for this rule:
26-
17+
<eslint-code-block :rules="{'vue/valid-v-else': ['error']}">
2718
```html
28-
<div v-if="foo"/>
29-
<div v-else/>
19+
<template>
20+
<!-- ✓ GOOD -->
21+
<div v-if="foo"/>
22+
<div v-else/>
23+
24+
<!-- ✗ BAD -->
25+
<div v-else="foo"/>
26+
<div v-else:aaa/>
27+
<div v-else.bbb/>
28+
</template>
3029
```
30+
</eslint-code-block>
3131

3232
## :wrench: Options
3333

‎docs/rules/valid-v-for.md

+29-29
Original file line numberDiff line numberDiff line change
@@ -22,37 +22,37 @@ The following cases are syntax errors:
2222
- The directive's value is not the form `alias in expr`. E.g. `<div v-for="foo"></div>`
2323
- The alias is not LHS. E.g. `<div v-for="foo() in list"></div>`
2424

25-
:-1: Examples of **incorrect** code for this rule:
26-
27-
```html
28-
<div v-for/>
29-
<div v-for:aaa="todo in todos"/>
30-
<div v-for.bbb="todo in todos"/>
31-
<div
32-
v-for="todo in todos"
33-
is="MyComponent"
34-
/>
35-
<MyComponent v-for="todo in todos"/>
36-
<MyComponent
37-
v-for="todo in todos"
38-
:key="foo"
39-
/>
40-
```
41-
42-
:+1: Examples of **correct** code for this rule:
43-
25+
<eslint-code-block :rules="{'vue/valid-v-for': ['error']}">
4426
```html
45-
<div v-for="todo in todos"/>
46-
<MyComponent
47-
v-for="todo in todos"
48-
:key="todo.id"
49-
/>
50-
<div
51-
v-for="todo in todos"
52-
:is="MyComponent"
53-
:key="todo.id"
54-
/>
27+
<template>
28+
<!-- ✓ GOOD -->
29+
<div v-for="todo in todos"/>
30+
<MyComponent
31+
v-for="todo in todos"
32+
:key="todo.id"
33+
/>
34+
<div
35+
v-for="todo in todos"
36+
:is="MyComponent"
37+
:key="todo.id"
38+
/>
39+
40+
<!-- ✗ BAD -->
41+
<div v-for/>
42+
<div v-for:aaa="todo in todos"/>
43+
<div v-for.bbb="todo in todos"/>
44+
<div
45+
v-for="todo in todos"
46+
is="MyComponent"
47+
/>
48+
<MyComponent v-for="todo in todos"/>
49+
<MyComponent
50+
v-for="todo in todos"
51+
:key="foo"
52+
/>
53+
</template>
5554
```
55+
</eslint-code-block>
5656

5757
## :wrench: Options
5858

‎docs/rules/valid-v-html.md

+11-11
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,19 @@ This rule reports `v-html` directives in the following cases:
1414

1515
This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
1616

17-
:-1: Examples of **incorrect** code for this rule:
18-
19-
```html
20-
<div v-html/>
21-
<div v-html:aaa="foo"/>
22-
<div v-html.bbb="foo"/>
23-
```
24-
25-
:+1: Examples of **correct** code for this rule:
26-
17+
<eslint-code-block :rules="{'vue/valid-v-html': ['error']}">
2718
```html
28-
<div v-html="foo"/>
19+
<template>
20+
<!-- ✓ GOOD -->
21+
<div v-html="foo"/>
22+
23+
<!-- ✗ BAD -->
24+
<div v-html/>
25+
<div v-html:aaa="foo"/>
26+
<div v-html.bbb="foo"/>
27+
</template>
2928
```
29+
</eslint-code-block>
3030

3131
## :wrench: Options
3232

‎docs/rules/valid-v-if.md

+21-21
Original file line numberDiff line numberDiff line change
@@ -15,29 +15,29 @@ This rule reports `v-if` directives in the following cases:
1515

1616
This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
1717

18-
:-1: Examples of **incorrect** code for this rule:
19-
20-
```html
21-
<div v-if/>
22-
<div v-if:aaa="foo"/>
23-
<div v-if.bbb="foo"/>
24-
<div
25-
v-if="foo"
26-
v-else
27-
/>
28-
<div
29-
v-if="foo"
30-
v-else-if="bar"
31-
/>
32-
```
33-
34-
:+1: Examples of **correct** code for this rule:
35-
18+
<eslint-code-block :rules="{'vue/valid-v-if': ['error']}">
3619
```html
37-
<div v-if="foo"/>
38-
<div v-else-if="bar"/>
39-
<div v-else/>
20+
<template>
21+
<!-- ✓ GOOD -->
22+
<div v-if="foo"/>
23+
<div v-else-if="bar"/>
24+
<div v-else/>
25+
26+
<!-- ✗ BAD -->
27+
<div v-if/>
28+
<div v-if:aaa="foo"/>
29+
<div v-if.bbb="foo"/>
30+
<div
31+
v-if="foo"
32+
v-else
33+
/>
34+
<div
35+
v-if="foo"
36+
v-else-if="bar"
37+
/>
38+
</template>
4039
```
40+
</eslint-code-block>
4141

4242
## :wrench: Options
4343

‎docs/rules/valid-v-model.md

+22-23
Original file line numberDiff line numberDiff line change
@@ -18,30 +18,30 @@ This rule reports `v-model` directives in the following cases:
1818

1919
This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
2020

21-
:-1: Examples of **incorrect** code for this rule:
22-
23-
```html
24-
<input v-model>
25-
<input v-model:aaa="foo">
26-
<input v-model.bbb="foo">
27-
<input v-model="foo + bar">
28-
<div v-model="foo"/>
29-
<div v-for="todo in todos">
30-
<input v-model="todo">
31-
</div>
32-
```
33-
34-
:+1: Examples of **correct** code for this rule:
35-
21+
<eslint-code-block :rules="{'vue/valid-v-model': ['error']}">
3622
```html
37-
<input v-model="foo">
38-
<input v-model.lazy="foo">
39-
<textarea v-model="foo"/>
40-
<MyComponent v-model="foo"/>
41-
<div v-for="todo in todos">
42-
<input v-model="todo.name">
43-
</div>
23+
<template>
24+
<!-- ✓ GOOD -->
25+
<input v-model="foo">
26+
<input v-model.lazy="foo">
27+
<textarea v-model="foo"/>
28+
<MyComponent v-model="foo"/>
29+
<div v-for="todo in todos">
30+
<input v-model="todo.name">
31+
</div>
32+
33+
<!-- ✗ BAD -->
34+
<input v-model>
35+
<input v-model:aaa="foo">
36+
<input v-model.bbb="foo">
37+
<input v-model="foo + bar">
38+
<div v-model="foo"/>
39+
<div v-for="todo in todos">
40+
<input v-model="todo">
41+
</div>
42+
</template>
4443
```
44+
</eslint-code-block>
4545

4646
## :wrench: Options
4747

@@ -51,7 +51,6 @@ Nothing.
5151

5252
- [no-parsing-error]
5353

54-
5554
[no-parsing-error]: no-parsing-error.md
5655

5756
## :mag: Implementation

‎docs/rules/valid-v-on.md

+17-18
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,25 @@ This rule reports `v-on` directives in the following cases:
1414

1515
This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
1616

17-
:-1: Examples of **incorrect** code for this rule:
18-
19-
```html
20-
<div v-on/>
21-
<div v-on:click/>
22-
<div v-on:click.aaa="foo"/>
23-
<div @click/>
24-
```
25-
26-
:+1: Examples of **correct** code for this rule:
27-
17+
<eslint-code-block :rules="{'vue/valid-v-on': ['error']}">
2818
```html
29-
<div v-on="foo"/>
30-
<div v-on:click="foo"/>
31-
<div @click="foo"/>
32-
<div @click.left="foo"/>
33-
<div @click.prevent/>
34-
<div @click.stop/>
19+
<template>
20+
<!-- ✓ GOOD -->
21+
<div v-on="foo"/>
22+
<div v-on:click="foo"/>
23+
<div @click="foo"/>
24+
<div @click.left="foo"/>
25+
<div @click.prevent/>
26+
<div @click.stop/>
27+
28+
<!-- ✗ BAD -->
29+
<div v-on/>
30+
<div v-on:click/>
31+
<div v-on:click.aaa="foo"/>
32+
<div @click/>
33+
</template>
3534
```
35+
</eslint-code-block>
3636

3737
## :wrench: Options
3838

@@ -42,7 +42,6 @@ Nothing.
4242

4343
- [no-parsing-error]
4444

45-
4645
[no-parsing-error]: no-parsing-error.md
4746

4847
## :mag: Implementation

0 commit comments

Comments
 (0)