Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add vue/v-on-handler-style rule and deprecate vue/v-on-function-call rule #2009

Merged
merged 18 commits into from Oct 30, 2022
Merged

Add vue/v-on-handler-style rule and deprecate vue/v-on-function-call rule #2009

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
f099cbc
Add `vue/v-on-handler-style` rule and deprecated `vue/v-on-function-c…
ota-meshi Oct 8, 2022
56fd2e9
Update docs/rules/v-on-handler-style.md
ota-meshi Oct 12, 2022
f76cfad
Update docs/rules/v-on-handler-style.md
ota-meshi Oct 12, 2022
bc1f8c8
simplify element in doc
ota-meshi Oct 12, 2022
5bd54e9
add related rules to doc
ota-meshi Oct 12, 2022
e316a69
add ignored examples to doc
ota-meshi Oct 12, 2022
e9e9516
change to report morev
ota-meshi Oct 12, 2022
194fe21
fix doc
ota-meshi Oct 12, 2022
cf2c89a
Merge branch 'master' into v-on-handler-style
ota-meshi Oct 12, 2022
3395673
change v-on-handler-style
ota-meshi Oct 15, 2022
7296bc9
refactor
ota-meshi Oct 15, 2022
c0e2fe1
Apply suggestions from code review
ota-meshi Oct 26, 2022
b471fd3
update docs
ota-meshi Oct 26, 2022
7134914
fix error message
ota-meshi Oct 26, 2022
b5f4479
Merge branch 'master' into v-on-handler-style
ota-meshi Oct 26, 2022
1b21be6
refactor
ota-meshi Oct 27, 2022
6fd394d
Update docs/rules/v-on-handler-style.md
ota-meshi Oct 28, 2022
fb42bb5
Merge branch 'master' into v-on-handler-style
FloEdelmann Oct 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
101 changes: 73 additions & 28 deletions docs/rules/v-on-handler-style.md
View file
Open in desktop
Expand Up @@ -32,10 +32,10 @@ This rule aims to enforce a consistent style in `v-on` event handlers:
<template>
<!-- ✓ GOOD -->
<button v-on:click="handler" />
<button v-on:click="() => handler()" />

<!-- ✗ BAD -->
<button v-on:click="handler()" />
<button v-on:click="() => handler()" />
</template>
```

Expand All @@ -46,57 +46,100 @@ This rule aims to enforce a consistent style in `v-on` event handlers:
```json
{
"vue/v-on-handler-style": ["error",
[
"method",
"inline-function"
],
["method", "inline-function"], // ["method", "inline-function"] | ["method", "inline"] | "inline-function" | "inline"
{
"ignoreIncludesComment": false
}
]
}
```

- First option ... An array of names of allowed styles. Default is `["method", "inline-function"]`.
- `"method"` ... Allow handlers by method binding. e.g. `v-on:click="handler"`
- `"inline"` ... Allow inline handlers. e.g. `v-on:click="handler()"`
Even if this is not specified, writing styles that cannot be converted to other allowed styles are allowed.
- First option ... Specifies the name of an allowed style. Default is `["method", "inline-function"]`.
- `["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)"`.
- `["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)"`.
- `"inline-function"` ... Allow inline functions. e.g. `v-on:click="() => handler()"`
- `"inline"` ... Allow inline handlers. e.g. `v-on:click="handler()"`
- Second option
- `ignoreIncludesComment` ... If `true`, do not report expressions containing comments. This option takes effect if `"method"` is allowed. Default is `false`.
- `ignoreIncludesComment` ... If `true`, do not report expressions containing comments to be converted to method handlers. However, it will be reported if the second style is not used. This option takes effect if `"method"` is allowed. Default is `false`.
ota-meshi marked this conversation as resolved.
Show resolved Hide resolved

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

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

```vue
<template>
<!-- ✓ GOOD -->
<button v-on:click="handler" />
<template v-for="e in list">
<button @click="e" />
<button @click="e" />
<button v-on:click="e" />
<button v-on:click="() => handler(e)" />
</template>

<!-- ✗ BAD -->
<button v-on:click="handler()" />
<button v-on:click="count++" />
<button v-on:click="() => handler()" />
<button v-on:click="() => count++" />
<button v-on:click="(a, b) => handler(a, b)" />
<template v-for="e in list">
<button @click="e()" />
<button @click="() => e()" />
<button v-on:click="e()" />
<button v-on:click="() => e()" />
<button v-on:click="handler(e)" /> <!-- Can use inline function -->
FloEdelmann marked this conversation as resolved.
Show resolved Hide resolved
</template>
</template>
```

</eslint-code-block>

### `["method", "inline"]`

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

```vue
<template>
<!-- ✓ GOOD -->
<button v-on:click="handler" />
<template v-for="e in list">
<button v-on:click="e" />
<button v-on:click="handler(e)" />
</template>

<!-- Ignore -->
<!-- ✗ BAD -->
<button v-on:click="handler()" />
<button v-on:click="count++" />
<button v-on:click="() => handler()" />
<button v-on:click="() => count++" />
<button v-on:click="(a, b) => handler(a, b)" />
<template v-for="e in list">
<button @click="handler(e)" />
<button @click="() => handler(e)" />
<button v-on:click="e()" />
<button v-on:click="() => e()" />
<button v-on:click="() => handler(e)" /> <!-- Can use inline handler -->
FloEdelmann marked this conversation as resolved.
Show resolved Hide resolved
</template>
</template>
```

</eslint-code-block>

### `["inline-function"]`

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

```vue
<template>
<!-- ✓ GOOD -->
<button v-on:click="() => handler()" />
<button v-on:click="() => count++" />

<!-- ✗ BAD -->
<button v-on:click="handler" />
<button v-on:click="handler()" />
<button v-on:click="handler($event)" />
<button v-on:click="count++" />
</template>
```

</eslint-code-block>

### `["inline"]`

<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', ['inline']]}">
Expand All @@ -106,50 +149,52 @@ This rule aims to enforce a consistent style in `v-on` event handlers:
<!-- ✓ GOOD -->
<button v-on:click="handler()" />
<button v-on:click="handler($event)" />
<button v-on:click="count++" />

<!-- ✗ BAD -->
<button v-on:click="handler" />
<button v-on:click="() => handler()" />
<button v-on:click="(foo) => handler(foo)" />

<!-- Ignore -->
<button v-on:click="(foo, bar) => handler(foo, bar)" />
<button v-on:click="() => count++" />
</template>
```

</eslint-code-block>

### `["inline-function"]`
### `["method", "inline-function"], { "ignoreIncludesComment": true }`

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

```vue
<template>
<!-- ✓ GOOD -->
<button v-on:click="() => handler()" />
<button v-on:click="handler" />
<button v-on:click="() => handler() /* comment */" />

<!-- ✗ BAD -->
<button v-on:click="handler" />
<button v-on:click="handler()" />
<button v-on:click="() => handler()" />
<button v-on:click="handler() /* comment */" />
FloEdelmann marked this conversation as resolved.
Show resolved Hide resolved
</template>
```

</eslint-code-block>

### `["method"], { "ignoreIncludesComment": true }`
### `["method", "inline"], { "ignoreIncludesComment": true }`

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

```vue
<template>
<!-- ✓ GOOD -->
<button v-on:click="handler" />
<button v-on:click="handler() /* comment */" />
<button v-on:click="() => handler() /* comment */" />

<!-- ✗ BAD -->
<button v-on:click="handler()" />
<button v-on:click="() => handler()" />
<button v-on:click="() => handler() /* comment */" />
FloEdelmann marked this conversation as resolved.
Show resolved Hide resolved
</template>
```

Expand Down