Skip to content

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 <[email protected]> * Update lib/rules/prefer-type-props-decl.js Co-authored-by: Yosuke Ota <[email protected]> * fix: remove ts eslint-code-block & improve related rules link * Update lib/rules/prefer-type-emits-decl.js Co-authored-by: Flo Edelmann <[email protected]> * Update tests/lib/rules/prefer-type-emits-decl.js Co-authored-by: Flo Edelmann <[email protected]> * 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 <[email protected]> * Update docs/rules/define-props-declaration.md Co-authored-by: Flo Edelmann <[email protected]> * Update docs/rules/define-emits-declaration.md Co-authored-by: Flo Edelmann <[email protected]> * Update docs/rules/define-props-declaration.md Co-authored-by: Flo Edelmann <[email protected]> * add runtime option example * Fix order in docs Co-authored-by: Yosuke Ota <[email protected]> Co-authored-by: Flo Edelmann <[email protected]>
1 parent bf9b95c commit 4383a86

10 files changed

+663
-48
lines changed

‎docs/rules/README.md

+2
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: |

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

+78
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)

‎docs/rules/define-props-declaration.md

+79
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

+29-24
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)