Skip to content

Commit f5d700c

Browse files
ota-meshiFloEdelmann
ota-meshi
and
FloEdelmann
authored
Add vue/v-on-handler-style rule and deprecate vue/v-on-function-call rule (#2009)
* Add `vue/v-on-handler-style` rule and deprecated `vue/v-on-function-call` rule * Update docs/rules/v-on-handler-style.md Co-authored-by: Flo Edelmann <[email protected]> * Update docs/rules/v-on-handler-style.md Co-authored-by: Flo Edelmann <[email protected]> * simplify element in doc * add related rules to doc * add ignored examples to doc * change to report morev * fix doc * change v-on-handler-style * refactor * Apply suggestions from code review Co-authored-by: Flo Edelmann <[email protected]> * update docs * fix error message * refactor * Update docs/rules/v-on-handler-style.md Co-authored-by: Flo Edelmann <[email protected]> Co-authored-by: Flo Edelmann <[email protected]>
1 parent 2c1ba8c commit f5d700c

10 files changed

+1951
-8
lines changed

‎docs/rules/README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -264,7 +264,7 @@ For example:
264264
| [vue/sort-keys](./sort-keys.md) | enforce sort-keys in a manner that is compatible with order-in-components | | :hammer: |
265265
| [vue/static-class-names-order](./static-class-names-order.md) | enforce static class names order | :wrench: | :hammer: |
266266
| [vue/v-for-delimiter-style](./v-for-delimiter-style.md) | enforce `v-for` directive's delimiter style | :wrench: | :lipstick: |
267-
| [vue/v-on-function-call](./v-on-function-call.md) | enforce or forbid parentheses after method calls without arguments in `v-on` directives | :wrench: | :hammer: |
267+
| [vue/v-on-handler-style](./v-on-handler-style.md) | enforce writing style for handlers in `v-on` directives | :wrench: | :hammer: |
268268

269269
</rules-table>
270270

@@ -324,6 +324,7 @@ The following rules extend the rules provided by ESLint itself and apply them to
324324
|:--------|:------------|
325325
| [vue/no-invalid-model-keys](./no-invalid-model-keys.md) | [vue/valid-model-definition](./valid-model-definition.md) |
326326
| [vue/script-setup-uses-vars](./script-setup-uses-vars.md) | (no replacement) |
327+
| [vue/v-on-function-call](./v-on-function-call.md) | [vue/v-on-handler-style](./v-on-handler-style.md) |
327328

328329
## Removed
329330

‎docs/rules/v-on-event-hyphenation.md

+1
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ Don't use hyphenated name but allow custom event names
107107

108108
- [vue/custom-event-name-casing](./custom-event-name-casing.md)
109109
- [vue/attribute-hyphenation](./attribute-hyphenation.md)
110+
- [vue/v-on-handler-style](./v-on-handler-style.md)
110111

111112
## :books: Further Reading
112113

‎docs/rules/v-on-function-call.md

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ since: v5.2.0
99

1010
> enforce or forbid parentheses after method calls without arguments in `v-on` directives
1111
12+
- :warning: This rule was **deprecated** and replaced by [vue/v-on-handler-style](v-on-handler-style.md) rule.
1213
- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
1314

1415
## :book: Rule Details

‎docs/rules/v-on-handler-style.md

+219
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
---
2+
pageClass: rule-details
3+
sidebarDepth: 0
4+
title: vue/v-on-handler-style
5+
description: enforce writing style for handlers in `v-on` directives
6+
---
7+
# vue/v-on-handler-style
8+
9+
> enforce writing style for handlers in `v-on` directives
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+
- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
13+
14+
## :book: Rule Details
15+
16+
This rule aims to enforce a consistent style in `v-on` event handlers:
17+
18+
```vue
19+
<!-- Method handler: -->
20+
<button v-on:click="handler" />
21+
22+
<!-- Inline handler: -->
23+
<button v-on:click="handler()" />
24+
25+
<!-- Inline function: -->
26+
<button v-on:click="() => handler()" />
27+
```
28+
29+
<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error']}">
30+
31+
```vue
32+
<template>
33+
<!-- ✓ GOOD -->
34+
<button v-on:click="handler" />
35+
36+
<!-- ✗ BAD -->
37+
<button v-on:click="handler()" />
38+
<button v-on:click="() => handler()" />
39+
</template>
40+
```
41+
42+
</eslint-code-block>
43+
44+
## :wrench: Options
45+
46+
```json
47+
{
48+
"vue/v-on-handler-style": ["error",
49+
["method", "inline-function"], // ["method", "inline-function"] | ["method", "inline"] | "inline-function" | "inline"
50+
{
51+
"ignoreIncludesComment": false
52+
}
53+
]
54+
}
55+
```
56+
57+
- First option ... Specifies the name of an allowed style. Default is `["method", "inline-function"]`.
58+
- `["method", "inline-function"]` ... Allow handlers by method binding. e.g. `v-on:click="handler"`. Allow inline functions where method handlers cannot be used. e.g. `v-on:click="() => handler(listItem)"`.
59+
- `["method", "inline"]` ... Allow handlers by method binding. e.g. `v-on:click="handler"`. Allow inline handlers where method handlers cannot be used. e.g. `v-on:click="handler(listItem)"`.
60+
- `"inline-function"` ... Allow inline functions. e.g. `v-on:click="() => handler()"`
61+
- `"inline"` ... Allow inline handlers. e.g. `v-on:click="handler()"`
62+
- Second option
63+
- `ignoreIncludesComment` ... If `true`, do not report inline handlers or inline functions containing comments, even if the preferred style is `"method"`. Default is `false`.
64+
65+
### `["method", "inline-function"]` (Default)
66+
67+
<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', ['method', 'inline-function']]}">
68+
69+
```vue
70+
<template>
71+
<!-- ✓ GOOD -->
72+
<button v-on:click="handler" />
73+
<template v-for="e in list">
74+
<button v-on:click="e" />
75+
<button v-on:click="() => handler(e)" />
76+
</template>
77+
78+
<!-- ✗ BAD -->
79+
<button v-on:click="handler()" />
80+
<button v-on:click="count++" />
81+
<button v-on:click="() => handler()" />
82+
<button v-on:click="() => count++" />
83+
<button v-on:click="(a, b) => handler(a, b)" />
84+
<template v-for="e in list">
85+
<button v-on:click="e()" />
86+
<button v-on:click="() => e()" />
87+
<button v-on:click="handler(e)" />
88+
</template>
89+
</template>
90+
```
91+
92+
</eslint-code-block>
93+
94+
### `["method", "inline"]`
95+
96+
<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', ['method', 'inline']]}">
97+
98+
```vue
99+
<template>
100+
<!-- ✓ GOOD -->
101+
<button v-on:click="handler" />
102+
<template v-for="e in list">
103+
<button v-on:click="e" />
104+
<button v-on:click="handler(e)" />
105+
</template>
106+
107+
<!-- ✗ BAD -->
108+
<button v-on:click="handler()" />
109+
<button v-on:click="count++" />
110+
<button v-on:click="() => handler()" />
111+
<button v-on:click="() => count++" />
112+
<button v-on:click="(a, b) => handler(a, b)" />
113+
<template v-for="e in list">
114+
<button v-on:click="e()" />
115+
<button v-on:click="() => e()" />
116+
<button v-on:click="() => handler(e)" />
117+
</template>
118+
</template>
119+
```
120+
121+
</eslint-code-block>
122+
123+
### `["inline-function"]`
124+
125+
<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', ['inline-function']]}">
126+
127+
```vue
128+
<template>
129+
<!-- ✓ GOOD -->
130+
<button v-on:click="() => handler()" />
131+
<button v-on:click="() => count++" />
132+
133+
<!-- ✗ BAD -->
134+
<button v-on:click="handler" />
135+
<button v-on:click="handler()" />
136+
<button v-on:click="handler($event)" />
137+
<button v-on:click="count++" />
138+
</template>
139+
```
140+
141+
</eslint-code-block>
142+
143+
### `["inline"]`
144+
145+
<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', ['inline']]}">
146+
147+
```vue
148+
<template>
149+
<!-- ✓ GOOD -->
150+
<button v-on:click="handler()" />
151+
<button v-on:click="handler($event)" />
152+
<button v-on:click="count++" />
153+
154+
<!-- ✗ BAD -->
155+
<button v-on:click="handler" />
156+
<button v-on:click="() => handler()" />
157+
<button v-on:click="(foo) => handler(foo)" />
158+
<button v-on:click="(foo, bar) => handler(foo, bar)" />
159+
<button v-on:click="() => count++" />
160+
</template>
161+
```
162+
163+
</eslint-code-block>
164+
165+
### `["method", "inline-function"], { "ignoreIncludesComment": true }`
166+
167+
<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', ['method', 'inline-function'], {ignoreIncludesComment: true}]}">
168+
169+
```vue
170+
<template>
171+
<!-- ✓ GOOD -->
172+
<button v-on:click="handler" />
173+
<button v-on:click="() => handler() /* comment */" />
174+
175+
<!-- ✗ BAD -->
176+
<button v-on:click="handler()" />
177+
<button v-on:click="() => handler()" />
178+
<button v-on:click="handler() /* comment */" />
179+
</template>
180+
```
181+
182+
</eslint-code-block>
183+
184+
### `["method", "inline"], { "ignoreIncludesComment": true }`
185+
186+
<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', ['method', 'inline'], {ignoreIncludesComment: true}]}">
187+
188+
```vue
189+
<template>
190+
<!-- ✓ GOOD -->
191+
<button v-on:click="handler" />
192+
<button v-on:click="handler() /* comment */" />
193+
194+
<!-- ✗ BAD -->
195+
<button v-on:click="handler()" />
196+
<button v-on:click="() => handler()" />
197+
<button v-on:click="() => handler() /* comment */" />
198+
</template>
199+
```
200+
201+
</eslint-code-block>
202+
203+
## :couple: Related Rules
204+
205+
- [vue/v-on-style](./v-on-style.md)
206+
- [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md)
207+
208+
## :books: Further Reading
209+
210+
- [Guide - Inline Handlers]
211+
- [Guide - Method Handlers]
212+
213+
[Guide - Inline Handlers]: https://vuejs.org/guide/essentials/event-handling.html#inline-handlers
214+
[Guide - Method Handlers]: https://vuejs.org/guide/essentials/event-handling.html#method-handlers
215+
216+
## :mag: Implementation
217+
218+
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/v-on-handler-style.js)
219+
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/v-on-handler-style.js)

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

+4
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,10 @@ Default is set to `shorthand`.
5959

6060
</eslint-code-block>
6161

62+
## :couple: Related Rules
63+
64+
- [vue/v-on-handler-style](./v-on-handler-style.md)
65+
6266
## :books: Further Reading
6367

6468
- [Style guide - Directive shorthands](https://vuejs.org/style-guide/rules-strongly-recommended.html#directive-shorthands)

‎lib/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,7 @@ module.exports = {
200200
'v-for-delimiter-style': require('./rules/v-for-delimiter-style'),
201201
'v-on-event-hyphenation': require('./rules/v-on-event-hyphenation'),
202202
'v-on-function-call': require('./rules/v-on-function-call'),
203+
'v-on-handler-style': require('./rules/v-on-handler-style'),
203204
'v-on-style': require('./rules/v-on-style'),
204205
'v-slot-style': require('./rules/v-slot-style'),
205206
'valid-attribute-name': require('./rules/valid-attribute-name'),

‎lib/rules/v-on-function-call.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,9 @@ module.exports = {
8282
},
8383
additionalProperties: false
8484
}
85-
]
85+
],
86+
deprecated: true,
87+
replacedBy: ['v-on-handler-style']
8688
},
8789
/** @param {RuleContext} context */
8890
create(context) {

0 commit comments

Comments
 (0)