Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ba25f22

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

13 files changed

+193
-194
lines changed

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

Lines changed: 14 additions & 12 deletions
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-
<divv-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+
<divv-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

Lines changed: 11 additions & 11 deletions
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

Lines changed: 12 additions & 12 deletions
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

Lines changed: 12 additions & 12 deletions
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

Lines changed: 29 additions & 29 deletions
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

Lines changed: 11 additions & 11 deletions
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

Lines changed: 21 additions & 21 deletions
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

Lines changed: 22 additions & 23 deletions
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

Lines changed: 17 additions & 18 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /