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 4383a86

Browse files
Amoritesota-meshiFloEdelmann
authored
Add type-based declaration rule of defineProps and defineEmits (#1968)
* Add `vue/prefer-type-props-decl` rule * Add rule * chore: Related Rules * Update lib/rules/prefer-type-emits-decl.js Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com> * Update lib/rules/prefer-type-props-decl.js Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com> * fix: remove ts eslint-code-block & improve related rules link * Update lib/rules/prefer-type-emits-decl.js Co-authored-by: Flo Edelmann <florian-edelmann@online.de> * Update tests/lib/rules/prefer-type-emits-decl.js Co-authored-by: Flo Edelmann <florian-edelmann@online.de> * chore: rename rule name * feat: implement renamed rules * update rule docs * Add eslint-code-block * fix lint issues * Update docs/rules/define-emits-declaration.md Co-authored-by: Flo Edelmann <florian-edelmann@online.de> * Update docs/rules/define-props-declaration.md Co-authored-by: Flo Edelmann <florian-edelmann@online.de> * Update docs/rules/define-emits-declaration.md Co-authored-by: Flo Edelmann <florian-edelmann@online.de> * Update docs/rules/define-props-declaration.md Co-authored-by: Flo Edelmann <florian-edelmann@online.de> * add runtime option example * Fix order in docs Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com> Co-authored-by: Flo Edelmann <florian-edelmann@online.de>
1 parent bf9b95c commit 4383a86

10 files changed

+663
-48
lines changed

‎docs/rules/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,9 @@ For example:
212212
| [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: | :hammer: |
213213
| [vue/component-options-name-casing](./component-options-name-casing.md) | enforce the casing of component name in `components` options | :wrench::bulb: | :hammer: |
214214
| [vue/custom-event-name-casing](./custom-event-name-casing.md) | enforce specific casing for custom event name | | :hammer: |
215+
| [vue/define-emits-declaration](./define-emits-declaration.md) | enforce declaration style of `defineEmits` | | :hammer: |
215216
| [vue/define-macros-order](./define-macros-order.md) | enforce order of `defineEmits` and `defineProps` compiler macros | :wrench: | :lipstick: |
217+
| [vue/define-props-declaration](./define-props-declaration.md) | enforce declaration style of `defineProps` | | :hammer: |
216218
| [vue/html-button-has-type](./html-button-has-type.md) | disallow usage of button without an explicit type attribute | | :hammer: |
217219
| [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: | :lipstick: |
218220
| [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: | :lipstick: |
Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
pageClass: rule-details
3+
sidebarDepth: 0
4+
title: vue/define-emits-declaration
5+
description: enforce declaration style of `defineEmits`
6+
---
7+
# vue/define-emits-declaration
8+
9+
> enforce declaration style of `defineEmits`
10+
11+
- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
12+
13+
## :book: Rule Details
14+
15+
This rule enforces `defineEmits` typing style which you should use `type-based` or `runtime` declaration.
16+
17+
This rule only works in setup script and `lang="ts"`.
18+
19+
<eslint-code-block :rules="{'vue/define-emits-declaration': ['error']}">
20+
21+
```vue
22+
<script setup lang="ts">
23+
/* ✓ GOOD */
24+
const emit = defineEmits<{
25+
(e: 'change', id: number): void
26+
(e: 'update', value: string): void
27+
}>()
28+
29+
/* ✗ BAD */
30+
const emit = defineEmits(['change', 'update'])
31+
</script>
32+
```
33+
34+
</eslint-code-block>
35+
36+
## :wrench: Options
37+
38+
```json
39+
"vue/define-emits-declaration": ["error", "type-based" | "runtime"]
40+
```
41+
42+
- `type-based` (default) enforces type-based declaration
43+
- `runtime` enforces runtime declaration
44+
45+
### `runtime`
46+
47+
<eslint-code-block :rules="{'vue/define-emits-declaration': ['error', 'runtime']}">
48+
49+
```vue
50+
<script setup lang="ts">
51+
/* ✗ BAD */
52+
const emit = defineEmits<{
53+
(e: 'change', id: number): void
54+
(e: 'update', value: string): void
55+
}>()
56+
57+
/* ✓ GOOD */
58+
const emit = defineEmits(['change', 'update'])
59+
</script>
60+
```
61+
62+
</eslint-code-block>
63+
64+
## :couple: Related Rules
65+
66+
- [vue/define-props-declaration](./define-props-declaration.md)
67+
- [vue/valid-define-emits](./valid-define-emits.md)
68+
69+
## :books: Further Reading
70+
71+
- [`defineEmits`](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)
72+
- [Typescript-only-features of `defineEmits`](https://vuejs.org/api/sfc-script-setup.html#typescript-only-features)
73+
- [Guide - Typing-component-emits](https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits)
74+
75+
## :mag: Implementation
76+
77+
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/define-emits-declaration.js)
78+
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/define-emits-declaration.js)
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
pageClass: rule-details
3+
sidebarDepth: 0
4+
title: vue/define-props-declaration
5+
description: enforce declaration style of `defineProps`
6+
---
7+
# vue/define-props-declaration
8+
9+
> enforce declaration style of `defineProps`
10+
11+
- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
12+
13+
## :book: Rule Details
14+
15+
This rule enforces `defineProps` typing style which you should use `type-based` or `runtime` declaration.
16+
17+
This rule only works in setup script and `lang="ts"`.
18+
19+
<eslint-code-block :rules="{'vue/define-props-declaration': ['error']}">
20+
21+
```vue
22+
<script setup lang="ts">
23+
/* ✓ GOOD */
24+
const props = defineProps<{
25+
kind: string
26+
}>()
27+
28+
/* ✗ BAD */
29+
const props = defineProps({
30+
kind: { type: String }
31+
})
32+
</script>
33+
```
34+
35+
</eslint-code-block>
36+
37+
## :wrench: Options
38+
39+
```json
40+
"vue/define-props-declaration": ["error", "type-based" | "runtime"]
41+
```
42+
43+
- `type-based` (default) enforces type-based declaration
44+
- `runtime` enforces runtime declaration
45+
46+
### `"runtime"`
47+
48+
<eslint-code-block :rules="{'vue/define-emits-declaration': ['error', 'runtime']}">
49+
50+
```vue
51+
<script setup lang="ts">
52+
/* ✗ BAD */
53+
const emit = defineEmits<{
54+
(e: 'change', id: number): void
55+
(e: 'update', value: string): void
56+
}>()
57+
58+
/* ✓ GOOD */
59+
const emit = defineEmits(['change', 'update'])
60+
</script>
61+
```
62+
63+
</eslint-code-block>
64+
65+
## :couple: Related Rules
66+
67+
- [vue/define-emits-declaration](./define-emits-declaration.md)
68+
- [vue/valid-define-props](./valid-define-props.md)
69+
70+
## :books: Further Reading
71+
72+
- [`defineProps`](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)
73+
- [Typescript-only-features of `defineProps`](https://vuejs.org/api/sfc-script-setup.html#typescript-only-features)
74+
- [Guide - Typing-component-props](https://vuejs.org/guide/typescript/composition-api.html#typing-component-props)
75+
76+
## :mag: Implementation
77+
78+
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/define-props-declaration.js)
79+
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/define-props-declaration.js)

‎docs/rules/valid-define-emits.md‎

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ This rule reports `defineEmits` compiler macros in the following cases:
2727

2828
```vue
2929
<script setup>
30-
/* ✓ GOOD */
31-
defineEmits({ notify: null })
30+
/* ✓ GOOD */
31+
defineEmits({ notify: null })
3232
</script>
3333
```
3434

@@ -38,8 +38,8 @@ This rule reports `defineEmits` compiler macros in the following cases:
3838

3939
```vue
4040
<script setup>
41-
/* ✓ GOOD */
42-
defineEmits(['notify'])
41+
/* ✓ GOOD */
42+
defineEmits(['notify'])
4343
</script>
4444
```
4545

@@ -49,8 +49,8 @@ This rule reports `defineEmits` compiler macros in the following cases:
4949

5050
```vue
5151
<script setup lang="ts">
52-
/* ✓ GOOD */
53-
defineEmits<(e: 'notify')=>void>()
52+
/* ✓ GOOD */
53+
defineEmits<(e: 'notify') => void>()
5454
</script>
5555
```
5656

@@ -60,11 +60,11 @@ This rule reports `defineEmits` compiler macros in the following cases:
6060

6161
```vue
6262
<script>
63-
const def = { notify: null }
63+
const def = { notify: null }
6464
</script>
6565
<script setup>
66-
/* ✓ GOOD */
67-
defineEmits(def)
66+
/* ✓ GOOD */
67+
defineEmits(def)
6868
</script>
6969
```
7070

@@ -74,9 +74,9 @@ This rule reports `defineEmits` compiler macros in the following cases:
7474

7575
```vue
7676
<script setup>
77-
/* ✗ BAD */
78-
const def = { notify: null }
79-
defineEmits(def)
77+
/* ✗ BAD */
78+
const def = { notify: null }
79+
defineEmits(def)
8080
</script>
8181
```
8282

@@ -86,8 +86,8 @@ This rule reports `defineEmits` compiler macros in the following cases:
8686

8787
```vue
8888
<script setup lang="ts">
89-
/* ✗ BAD */
90-
defineEmits<(e: 'notify')=>void>({ submit: null })
89+
/* ✗ BAD */
90+
defineEmits<(e: 'notify') => void>({ submit: null })
9191
</script>
9292
```
9393

@@ -97,9 +97,9 @@ This rule reports `defineEmits` compiler macros in the following cases:
9797

9898
```vue
9999
<script setup>
100-
/* ✗ BAD */
101-
defineEmits({ notify: null })
102-
defineEmits({ submit: null })
100+
/* ✗ BAD */
101+
defineEmits({ notify: null })
102+
defineEmits({ submit: null })
103103
</script>
104104
```
105105

@@ -109,13 +109,13 @@ This rule reports `defineEmits` compiler macros in the following cases:
109109

110110
```vue
111111
<script>
112-
export default {
113-
emits: { notify: null }
114-
}
112+
export default {
113+
emits: { notify: null }
114+
}
115115
</script>
116116
<script setup>
117-
/* ✗ BAD */
118-
defineEmits({ submit: null })
117+
/* ✗ BAD */
118+
defineEmits({ submit: null })
119119
</script>
120120
```
121121

@@ -125,8 +125,8 @@ This rule reports `defineEmits` compiler macros in the following cases:
125125

126126
```vue
127127
<script setup>
128-
/* ✗ BAD */
129-
defineEmits()
128+
/* ✗ BAD */
129+
defineEmits()
130130
</script>
131131
```
132132

@@ -136,6 +136,11 @@ This rule reports `defineEmits` compiler macros in the following cases:
136136

137137
Nothing.
138138

139+
## :couple: Related Rules
140+
141+
- [vue/define-emits-declaration](./define-emits-declaration.md)
142+
- [vue/valid-define-props](./valid-define-props.md)
143+
139144
## :rocket: Version
140145

141146
This rule was introduced in eslint-plugin-vue v7.13.0

0 commit comments

Comments
(0)

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