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 91da522

Browse files
feat(v-on-handler-style): add allowInlineFuncSingleArg option
1 parent 769b09f commit 91da522

File tree

3 files changed

+255
-46
lines changed

3 files changed

+255
-46
lines changed

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

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ This rule aims to enforce a consistent style in `v-on` event handlers:
6363
- `"inline"` ... Allow inline handlers. e.g. `v-on:click="handler()"`
6464
- Second option
6565
- `ignoreIncludesComment` ... If `true`, do not report inline handlers or inline functions containing comments, even if the preferred style is `"method"`. Default is `false`.
66+
- `allowInlineFuncSingleArg` ... Used in conjunction with `["method", "inline-function"]` or `["inline", "inline-function"]`. If `true`, allow inline functions with a single argument. Default is `false`.
6667

6768
### `["method", "inline-function"]` (Default)
6869

@@ -126,24 +127,59 @@ This rule aims to enforce a consistent style in `v-on` event handlers:
126127

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

130+
```vue
131+
<template>
132+
<!-- ✓ GOOD -->
133+
<button v-on:click="count++" />
134+
<button v-on:click="handler()" />
135+
<button v-on:click="handler($event)" />
136+
<button v-on:click="(arg1, arg2) => handler(arg1, arg2)" />
137+
<template v-for="e in list">
138+
<button v-on:click="handler(e)" />
139+
<button v-on:click="handler($event, e)" />
140+
<button v-on:click="(arg1, arg2) => handler(arg1, arg2, e)" />
141+
</template>
142+
143+
<!-- ✗ BAD -->
144+
<button v-on:click="() => count++" />
145+
<button v-on:click="handler" />
146+
<button v-on:click="() => handler()" />
147+
<button v-on:click="(arg) => handler(arg)" />
148+
<template v-for="e in list">
149+
<button v-on:click="() => handler(e)" />
150+
<button v-on:click="(arg) => handler(arg, e)" />
151+
</template>
152+
</template>
153+
```
154+
155+
</eslint-code-block>
156+
157+
### `["inline", "inline-function"]` with `allowInlineFuncSingleArg: true`
158+
159+
<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', ['inline', 'inline-function'], { allowInlineFuncSingleArg: true }]}">
160+
129161
```vue
130162
<template>
131163
<!-- ✓ GOOD -->
132164
<button v-on:click="count++" />
133165
<button v-on:click="handler()" />
134166
<button v-on:click="handler($event)" />
135167
<button v-on:click="(arg) => handler(arg)" />
168+
<button v-on:click="(arg1, arg2) => handler(arg1, arg2)" />
136169
<template v-for="e in list">
137170
<button v-on:click="handler(e)" />
138171
<button v-on:click="handler($event, e)" />
139172
<button v-on:click="(arg) => handler(arg, e)" />
173+
<button v-on:click="(arg1, arg2) => handler(arg1, arg2, e)" />
140174
</template>
141175
142176
<!-- ✗ BAD -->
143177
<button v-on:click="() => count++" />
144178
<button v-on:click="handler" />
145179
<button v-on:click="() => handler()" />
146-
<button v-on:click="() => handler($event)" />
180+
<template v-for="e in list">
181+
<button v-on:click="() => handler(e)" />
182+
</template>
147183
</template>
148184
```
149185

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

Lines changed: 86 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const utils = require('../utils')
1111
* @typedef {'method' | 'inline' | 'inline-function'} HandlerKind
1212
* @typedef {object} ObjectOption
1313
* @property {boolean} [ignoreIncludesComment]
14+
* @property {boolean} [allowInlineFuncSingleArg]
1415
*/
1516

1617
/**
@@ -33,8 +34,9 @@ function parseOptions(context) {
3334

3435
const option = options[1] || {}
3536
const ignoreIncludesComment = !!option.ignoreIncludesComment
37+
const allowInlineFuncSingleArg = option.allowInlineFuncSingleArg === true
3638

37-
return { allows, ignoreIncludesComment }
39+
return { allows, ignoreIncludesComment, allowInlineFuncSingleArg }
3840
}
3941

4042
/**
@@ -112,41 +114,73 @@ module.exports = {
112114
url: 'https://eslint.vuejs.org/rules/v-on-handler-style.html'
113115
},
114116
fixable: 'code',
115-
schema: [
116-
{
117-
oneOf: [
118-
{ enum: ['inline', 'inline-function'] },
119-
{
120-
type: 'array',
121-
items: [
122-
{ const: 'method' },
123-
{ enum: ['inline', 'inline-function'] }
124-
],
125-
uniqueItems: true,
126-
additionalItems: false,
127-
minItems: 2,
128-
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
137-
}
138-
]
139-
},
140-
{
141-
type: 'object',
142-
properties: {
143-
ignoreIncludesComment: {
144-
type: 'boolean'
145-
}
117+
schema: {
118+
anyOf: [
119+
// `inline`, `inline-function` or `['method', 'inline']`
120+
{
121+
type: 'array',
122+
items: [
123+
{
124+
anyOf: [
125+
{ enum: ['inline', 'inline-function'] },
126+
{
127+
type: 'array',
128+
items: [{ const: 'method' }, { const: 'inline' }],
129+
uniqueItems: true,
130+
additionalItems: false,
131+
minItems: 2,
132+
maxItems: 2
133+
}
134+
]
135+
},
136+
{
137+
type: 'object',
138+
properties: {
139+
ignoreIncludesComment: {
140+
type: 'boolean'
141+
}
142+
},
143+
additionalProperties: false
144+
}
145+
],
146+
additionalItems: false,
147+
minItems: 1,
148+
maxItems: 2
146149
},
147-
additionalProperties: false
148-
}
149-
],
150+
// `['method', 'inline-function']` or `['inline', 'inline-function']`
151+
{
152+
type: 'array',
153+
items: [
154+
{
155+
type: 'array',
156+
items: [
157+
{ enum: ['method', 'inline'] },
158+
{ const: 'inline-function' }
159+
],
160+
uniqueItems: true,
161+
additionalItems: false,
162+
minItems: 2,
163+
maxItems: 2
164+
},
165+
{
166+
type: 'object',
167+
properties: {
168+
ignoreIncludesComment: {
169+
type: 'boolean'
170+
},
171+
allowInlineFuncSingleArg: {
172+
type: 'boolean'
173+
}
174+
},
175+
additionalProperties: false
176+
}
177+
],
178+
additionalItems: false,
179+
minItems: 0,
180+
maxItems: 2
181+
}
182+
]
183+
},
150184
messages: {
151185
preferMethodOverInline:
152186
'Prefer method handler over inline handler in v-on.',
@@ -170,7 +204,8 @@ module.exports = {
170204
},
171205
/** @param {RuleContext} context */
172206
create(context) {
173-
const { allows, ignoreIncludesComment } = parseOptions(context)
207+
const { allows, ignoreIncludesComment, allowInlineFuncSingleArg } =
208+
parseOptions(context)
174209

175210
/** @type {Set<VElement>} */
176211
const upperElements = new Set()
@@ -535,14 +570,23 @@ module.exports = {
535570
case 'ArrowFunctionExpression':
536571
case 'FunctionExpression': {
537572
// e.g. v-on:click="()=>foo()"
538-
if (
539-
allows[0] === 'inline-function' ||
540-
(allows[0] === 'inline' &&
541-
allows[1] === 'inline-function' &&
542-
expression.params.length > 0)
543-
) {
573+
if (allows[0] === 'inline-function') {
544574
return
545575
}
576+
577+
if (allows[1] === 'inline-function') {
578+
if (expression.params.length > 1) {
579+
return
580+
}
581+
582+
if (
583+
expression.params.length === 1 &&
584+
allowInlineFuncSingleArg
585+
) {
586+
return
587+
}
588+
}
589+
546590
for (const allow of allows) {
547591
if (verifyForInlineFunction(expression, allow)) {
548592
return

0 commit comments

Comments
(0)

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