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 769b09f

Browse files
feat(v-on-handler-style): allow ["inline", "inline-function"] option
1 parent 516253d commit 769b09f

File tree

3 files changed

+110
-2
lines changed

3 files changed

+110
-2
lines changed

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

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ This rule aims to enforce a consistent style in `v-on` event handlers:
4747
```json
4848
{
4949
"vue/v-on-handler-style": ["error",
50-
["method", "inline-function"], // ["method", "inline-function"] | ["method", "inline"] | "inline-function" | "inline"
50+
["method", "inline-function"], // ["method", "inline-function"] | ["method", "inline"] | ["inline", "inline-function"] | "inline-function" | "inline"
5151
{
5252
"ignoreIncludesComment": false
5353
}
@@ -58,6 +58,7 @@ This rule aims to enforce a consistent style in `v-on` event handlers:
5858
- First option ... Specifies the name of an allowed style. Default is `["method", "inline-function"]`.
5959
- `["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)"`.
6060
- `["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)"`.
61+
- `["inline", "inline-function"]` ... Allow inline handlers. e.g. `v-on:click="handler()"`. Allow inline functions if they have at least 1 argument. e.g. `v-on:click="(arg1, arg2) => handler(arg1, arg2)"`.
6162
- `"inline-function"` ... Allow inline functions. e.g. `v-on:click="() => handler()"`
6263
- `"inline"` ... Allow inline handlers. e.g. `v-on:click="handler()"`
6364
- Second option
@@ -121,6 +122,33 @@ This rule aims to enforce a consistent style in `v-on` event handlers:
121122

122123
</eslint-code-block>
123124

125+
### `["inline", "inline-function"]`
126+
127+
<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', ['inline', 'inline-function']]}">
128+
129+
```vue
130+
<template>
131+
<!-- ✓ GOOD -->
132+
<button v-on:click="count++" />
133+
<button v-on:click="handler()" />
134+
<button v-on:click="handler($event)" />
135+
<button v-on:click="(arg) => handler(arg)" />
136+
<template v-for="e in list">
137+
<button v-on:click="handler(e)" />
138+
<button v-on:click="handler($event, e)" />
139+
<button v-on:click="(arg) => handler(arg, e)" />
140+
</template>
141+
142+
<!-- ✗ BAD -->
143+
<button v-on:click="() => count++" />
144+
<button v-on:click="handler" />
145+
<button v-on:click="() => handler()" />
146+
<button v-on:click="() => handler($event)" />
147+
</template>
148+
```
149+
150+
</eslint-code-block>
151+
124152
### `"inline-function"`
125153

126154
<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', 'inline-function']}">

‎lib/rules/v-on-handler-style.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,14 @@ module.exports = {
126126
additionalItems: false,
127127
minItems: 2,
128128
maxItems: 2
129+
},
130+
{
131+
type: 'array',
132+
items: [{ const: 'inline' }, { const: 'inline-function' }],
133+
uniqueItems: true,
134+
additionalItems: false,
135+
minItems: 2,
136+
maxItems: 2
129137
}
130138
]
131139
},
@@ -527,7 +535,12 @@ module.exports = {
527535
case 'ArrowFunctionExpression':
528536
case 'FunctionExpression': {
529537
// e.g. v-on:click="()=>foo()"
530-
if (allows[0] === 'inline-function') {
538+
if (
539+
allows[0] === 'inline-function' ||
540+
(allows[0] === 'inline' &&
541+
allows[1] === 'inline-function' &&
542+
expression.params.length > 0)
543+
) {
531544
return
532545
}
533546
for (const allow of allows) {

‎tests/lib/rules/v-on-handler-style.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,23 @@ tester.run('v-on-handler-style', rule, {
7171
{
7272
filename: 'test.vue',
7373
code: '<template><button :click="foo()" /></template>'
74+
},
75+
{
76+
filename: 'test.vue',
77+
code: `<template>
78+
<button @click="value++" />
79+
<button @click="foo()" />
80+
<button @click="foo($event)" />
81+
<button @click="(evt) => foo(evt)" />
82+
<button @click="(a, b) => foo(a, b)" />
83+
<template v-for="e in list">
84+
<button @click="foo(e)" />
85+
<button @click="foo($event, e)" />
86+
<button @click="(evt) => foo(evt, e)" />
87+
<button @click="(a, b) => foo(a, b, e)" />
88+
</template>
89+
</template>`,
90+
options: [['inline', 'inline-function']]
7491
}
7592
],
7693
invalid: [
@@ -1136,6 +1153,56 @@ tester.run('v-on-handler-style', rule, {
11361153
column: 25
11371154
}
11381155
]
1156+
},
1157+
// ['inline', 'inline-function']
1158+
{
1159+
filename: 'test.vue',
1160+
code: `<template>
1161+
<button @click="() => value++" />
1162+
<button @click="foo" />
1163+
<button @click="() => foo()" />
1164+
<button @click="() => foo($event)" />
1165+
<template v-for="e in list">
1166+
<button @click="() => foo(e)" />
1167+
</template>
1168+
</template>`,
1169+
output: `<template>
1170+
<button @click="value++" />
1171+
<button @click="foo" />
1172+
<button @click="foo()" />
1173+
<button @click="foo($event)" />
1174+
<template v-for="e in list">
1175+
<button @click="foo(e)" />
1176+
</template>
1177+
</template>`,
1178+
options: [['inline', 'inline-function']],
1179+
errors: [
1180+
{
1181+
message: 'Prefer inline handler over inline function in v-on.',
1182+
line: 2,
1183+
column: 25
1184+
},
1185+
{
1186+
message: 'Prefer inline handler over method handler in v-on.',
1187+
line: 3,
1188+
column: 25
1189+
},
1190+
{
1191+
message: 'Prefer inline handler over inline function in v-on.',
1192+
line: 4,
1193+
column: 25
1194+
},
1195+
{
1196+
message: 'Prefer inline handler over inline function in v-on.',
1197+
line: 5,
1198+
column: 25
1199+
},
1200+
{
1201+
message: 'Prefer inline handler over inline function in v-on.',
1202+
line: 7,
1203+
column: 27
1204+
}
1205+
]
11391206
}
11401207
]
11411208
})

0 commit comments

Comments
(0)

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