Movatterモバイル変換

[0]ホーム
URL:

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

Addvue/v-on-handler-style rule and deprecatevue/v-on-function-call rule#2009

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.

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

Already on GitHub?Sign in to your account

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

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletiondocs/rules/README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -264,7 +264,7 @@ For example:
| [vue/sort-keys](./sort-keys.md) | enforce sort-keys in a manner that is compatible with order-in-components | | :hammer: |
| [vue/static-class-names-order](./static-class-names-order.md) | enforce static class names order | :wrench: | :hammer: |
| [vue/v-for-delimiter-style](./v-for-delimiter-style.md) | enforce `v-for` directive's delimiter style | :wrench: | :lipstick: |
| [vue/v-on-function-call](./v-on-function-call.md) | enforceor forbid parentheses after method calls without arguments in `v-on` directives | :wrench: | :hammer: |
| [vue/v-on-handler-style](./v-on-handler-style.md) | enforcewriting style for handlers in `v-on` directives | :wrench: | :hammer: |

</rules-table>

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

## Removed

Expand Down
1 change: 1 addition & 0 deletionsdocs/rules/v-on-event-hyphenation.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -107,6 +107,7 @@ Don't use hyphenated name but allow custom event names

- [vue/custom-event-name-casing](./custom-event-name-casing.md)
- [vue/attribute-hyphenation](./attribute-hyphenation.md)
- [vue/v-on-handler-style](./v-on-handler-style.md)

## :books: Further Reading

Expand Down
1 change: 1 addition & 0 deletionsdocs/rules/v-on-function-call.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ since: v5.2.0

> enforce or forbid parentheses after method calls without arguments in `v-on` directives

- :warning: This rule was **deprecated** and replaced by [vue/v-on-handler-style](v-on-handler-style.md) rule.
- :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.

## :book: Rule Details
Expand Down
219 changes: 219 additions & 0 deletionsdocs/rules/v-on-handler-style.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
---
pageClass: rule-details
sidebarDepth: 0
title: vue/v-on-handler-style
description: enforce writing style for handlers in `v-on` directives
---
# vue/v-on-handler-style

> enforce writing style for handlers in `v-on` directives

- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
- :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.

## :book: Rule Details

This rule aims to enforce a consistent style in `v-on` event handlers:

```vue
<!-- Method handler: -->
<button v-on:click="handler" />

<!-- Inline handler: -->
<button v-on:click="handler()" />

<!-- Inline function: -->
<button v-on:click="() => handler()" />
```

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

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

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

</eslint-code-block>

## :wrench: Options

```json
{
"vue/v-on-handler-style": ["error",
["method", "inline-function"], // ["method", "inline-function"] | ["method", "inline"] | "inline-function" | "inline"
{
"ignoreIncludesComment": false
}
]
}
```

- 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 inline handlers or inline functions containing comments, even if the preferred style is `"method"`. Default is `false`.

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

<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 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 v-on:click="e()" />
<button v-on:click="() => e()" />
<button v-on:click="handler(e)" />
</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>

<!-- ✗ 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 v-on:click="e()" />
<button v-on:click="() => e()" />
<button v-on:click="() => handler(e)" />
</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']]}">

```vue
<template>
<!-- ✓ 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)" />
<button v-on:click="(foo, bar) => handler(foo, bar)" />
<button v-on:click="() => count++" />
</template>
```

</eslint-code-block>

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

<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() /* comment */" />

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

</eslint-code-block>

### `["method", "inline"], { "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 */" />

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

</eslint-code-block>

## :couple: Related Rules

- [vue/v-on-style](./v-on-style.md)
- [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md)

## :books: Further Reading

- [Guide - Inline Handlers]
- [Guide - Method Handlers]

[Guide - Inline Handlers]: https://vuejs.org/guide/essentials/event-handling.html#inline-handlers
[Guide - Method Handlers]: https://vuejs.org/guide/essentials/event-handling.html#method-handlers

## :mag: Implementation

- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/v-on-handler-style.js)
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/v-on-handler-style.js)
4 changes: 4 additions & 0 deletionsdocs/rules/v-on-style.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -59,6 +59,10 @@ Default is set to `shorthand`.

</eslint-code-block>

## :couple: Related Rules

- [vue/v-on-handler-style](./v-on-handler-style.md)

## :books: Further Reading

- [Style guide - Directive shorthands](https://vuejs.org/style-guide/rules-strongly-recommended.html#directive-shorthands)
Expand Down
1 change: 1 addition & 0 deletionslib/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -200,6 +200,7 @@ module.exports = {
'v-for-delimiter-style': require('./rules/v-for-delimiter-style'),
'v-on-event-hyphenation': require('./rules/v-on-event-hyphenation'),
'v-on-function-call': require('./rules/v-on-function-call'),
'v-on-handler-style': require('./rules/v-on-handler-style'),
'v-on-style': require('./rules/v-on-style'),
'v-slot-style': require('./rules/v-slot-style'),
'valid-attribute-name': require('./rules/valid-attribute-name'),
Expand Down
4 changes: 3 additions & 1 deletionlib/rules/v-on-function-call.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,9 @@ module.exports = {
},
additionalProperties: false
}
]
],
deprecated: true,
replacedBy: ['v-on-handler-style']
},
/** @param {RuleContext} context */
create(context) {
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp