feat(v-on-handler-style): allow ["inline", "inline-function"] option

Author: ByScripts

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

@@ -47,7 +47,7 @@ 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"] | "inline-function" | "inline"
+    ["method", "inline-function"], // ["method", "inline-function"] | ["method", "inline"] | ["inline", "inline-function"] | "inline-function" | "inline"
     {
       "ignoreIncludesComment": false
     }
@@ -58,6 +58,7 @@ This rule aims to enforce a consistent style in `v-on` event handlers:
 - 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", "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)"`.
   - `"inline-function"` ... Allow inline functions. e.g. `v-on:click="() => handler()"`
   - `"inline"` ... Allow inline handlers. e.g. `v-on:click="handler()"`
 - Second option
@@ -121,6 +122,33 @@ This rule aims to enforce a consistent style in `v-on` event handlers:
 
 </eslint-code-block>
 
+### `["inline", "inline-function"]`
+
+<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', ['inline', 'inline-function']]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button v-on:click="count++" />
+  <button v-on:click="handler()" />
+  <button v-on:click="handler($event)" />
+  <button v-on:click="(arg) => handler(arg)" />
+  <template v-for="e in list">
+    <button v-on:click="handler(e)" />
+    <button v-on:click="handler($event, e)" />
+    <button v-on:click="(arg) => handler(arg, e)" />
+  </template>
+
+  <!-- ✗ BAD -->
+  <button v-on:click="() => count++" />
+  <button v-on:click="handler" />
+  <button v-on:click="() => handler()" />
+  <button v-on:click="() => handler($event)" />
+</template>
+```
+
+</eslint-code-block>
+
 ### `"inline-function"`
 
 <eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', 'inline-function']}">

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

@@ -126,6 +126,14 @@ module.exports = {
             additionalItems: false,
             minItems: 2,
             maxItems: 2
+          },
+          {
+            type: 'array',
+            items: [{ const: 'inline' }, { const: 'inline-function' }],
+            uniqueItems: true,
+            additionalItems: false,
+            minItems: 2,
+            maxItems: 2
           }
         ]
       },
@@ -527,7 +535,12 @@ module.exports = {
             case 'ArrowFunctionExpression':
             case 'FunctionExpression': {
               // e.g. v-on:click="()=>foo()"
-              if (allows[0] === 'inline-function') {
+              if (
+                allows[0] === 'inline-function' ||
+                (allows[0] === 'inline' &&
+                  allows[1] === 'inline-function' &&
+                  expression.params.length > 0)
+              ) {
                 return
               }
               for (const allow of allows) {

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

@@ -71,6 +71,23 @@ tester.run('v-on-handler-style', rule, {
     {
       filename: 'test.vue',
       code: '<template><button :click="foo()" /></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="value++" />
+        <button @click="foo()" />
+        <button @click="foo($event)" />
+        <button @click="(evt) => foo(evt)" />
+        <button @click="(a, b) => foo(a, b)" />
+        <template v-for="e in list">
+          <button @click="foo(e)" />
+          <button @click="foo($event, e)" />
+          <button @click="(evt) => foo(evt, e)" />
+          <button @click="(a, b) => foo(a, b, e)" />
+        </template>
+      </template>`,
+      options: [['inline', 'inline-function']]
     }
   ],
   invalid: [
@@ -1136,6 +1153,56 @@ tester.run('v-on-handler-style', rule, {
           column: 25
         }
       ]
+    },
+    // ['inline', 'inline-function']
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="() => value++" />
+        <button @click="foo" />
+        <button @click="() => foo()" />
+        <button @click="() => foo($event)" />
+        <template v-for="e in list">
+          <button @click="() => foo(e)" />
+        </template>
+      </template>`,
+      output: `<template>
+        <button @click="value++" />
+        <button @click="foo" />
+        <button @click="foo()" />
+        <button @click="foo($event)" />
+        <template v-for="e in list">
+          <button @click="foo(e)" />
+        </template>
+      </template>`,
+      options: [['inline', 'inline-function']],
+      errors: [
+        {
+          message: 'Prefer inline handler over inline function in v-on.',
+          line: 2,
+          column: 25
+        },
+        {
+          message: 'Prefer inline handler over method handler in v-on.',
+          line: 3,
+          column: 25
+        },
+        {
+          message: 'Prefer inline handler over inline function in v-on.',
+          line: 4,
+          column: 25
+        },
+        {
+          message: 'Prefer inline handler over inline function in v-on.',
+          line: 5,
+          column: 25
+        },
+        {
+          message: 'Prefer inline handler over inline function in v-on.',
+          line: 7,
+          column: 27
+        }
+      ]
     }
   ]
 })