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

docs/rules/README.md

@@ -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) | enforce or forbid parentheses after method calls without arguments in `v-on` directives | :wrench: | :hammer: |
+| [vue/v-on-handler-style](./v-on-handler-style.md) | enforce writing style for handlers in `v-on` directives | :wrench: | :hammer: |
 
 </rules-table>
 
@@ -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
 

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

@@ -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

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

@@ -0,0 +1,153 @@
+---
+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 using method handlers on `v-on`, using inline handlers on `v-on`, or binding inline functions to `v-on`.
+
+```vue
+<!-- Method handlers -->
+<button v-on:click="handler">...</button>
+<!-- Inline handlers -->
+<button v-on:click="handler()">...</button>
+<!-- Inline functions -->
+<button v-on:click="() => handler()">...</button>
+```
+
+<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button v-on:click="handler">...</button>
+  <button v-on:click="() => handler()">...</button>
+
+  <!-- ✗ BAD -->
+  <button v-on:click="handler()">...</button>
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/v-on-handler-style": ["error",
+    [
+      "method",
+      "inline-function"
+    ],
+    {
+      "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.
+  - `"inline-function"` ... Allow inline functions. e.g. `v-on:click="() => handler()"`  
+                            Even if this is not specified, writing styles that cannot be converted to other allowed styles are allowed.
+- Second option
+  - `ignoreIncludesComment` ... If `true`, do not report expressions containing comments. This option takes effect if `"method"` is allowed. Default is `false`.
+
+### `["method"]`
+
+<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', ['method']]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button v-on:click="handler">...</button>
+
+  <!-- ✗ BAD -->
+  <button v-on:click="handler()">...</button>
+  <button v-on:click="() => handler()">...</button>
+
+  <!-- Ignore -->
+  <button v-on:click="handler(foo)">...</button>
+  <button v-on:click="() => handler(foo)">...</button>
+</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>
+
+  <!-- ✗ BAD -->
+  <button v-on:click="handler">...</button>
+  <button v-on:click="() => handler()">...</button>
+  <button v-on:click="(foo) => handler(foo)">...</button>
+</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>
+
+  <!-- ✗ BAD -->
+  <button v-on:click="handler">...</button>
+  <button v-on:click="handler()">...</button>
+</template>
+```
+
+</eslint-code-block>
+
+### `["method"], { "ignoreIncludesComment": true }`
+
+<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', ['method'], {ignoreIncludesComment: true}]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button v-on:click="handler">...</button>
+  <button v-on:click="handler() /* comment */">...</button>
+  <button v-on:click="() => handler() /* comment */">...</button>
+
+  <!-- ✗ BAD -->
+  <button v-on:click="handler()">...</button>
+  <button v-on:click="() => handler()">...</button>
+</template>
+```
+
+</eslint-code-block>
+
+## :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)

lib/index.js

@@ -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'),

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

@@ -94,7 +94,9 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    deprecated: true,
+    replacedBy: ['v-on-handler-style']
   },
   /** @param {RuleContext} context */
   create(context) {