added options for events that ignore custom-event-name-casing (#1321)

* added options for custom-event-name-casing

* add test case to close #1260

* update docs for custom-event-name-casing

* Update test case event name with regex

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>

* Update docs/rules/custom-event-name-casing.md for better description

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>

* updated custom-event-name-casing readme with ignores options

* added custom-event-name-casing invalid test cases

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>

Author: devTeaa

docs/rules/custom-event-name-casing.md

@@ -49,7 +49,47 @@ export default {
 
 ## :wrench: Options
 
-Nothing.
+
+```json
+{
+  "vue/custom-event-name-casing": ["error", {
+    "ignores": []
+  }]
+}
+```
+- `ignores` (`string[]`) ... The event names to ignore. Sets the event name to allow. For example, custom event names, Vue components event with special name, or Vue library component event name. You can set the regexp by writing it like `"/^name/"` or `click:row` or `fooBar`.
+
+### `"ignores": ["fooBar", "/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u"]`
+
+<eslint-code-block :rules="{'vue/custom-event-name-casing': ['error', {ignores:'/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u'}]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button @click="$emit('click:row')" />
+  <button @click="$emit('fooBar')" />
+
+  <!-- ✗ BAD -->
+  <button @click="$emit('myEvent')" />
+</template>
+<script>
+export default {
+  methods: {
+    onClick () {
+      /* ✓ GOOD */
+      this.$emit('click:row')
+      this.$emit('fooBar')
+
+      /* ✗ BAD */
+      this.$emit('myEvent')
+    }
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
 
 ## :books: Further Reading
 

lib/rules/custom-event-name-casing.js

@@ -11,6 +11,7 @@
 const { findVariable } = require('eslint-utils')
 const utils = require('../utils')
 const { isKebabCase } = require('../utils/casing')
+const { toRegExp } = require('../utils/regexp')
 
 // ------------------------------------------------------------------------------
 // Helpers
@@ -72,21 +73,37 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/custom-event-name-casing.html'
     },
     fixable: null,
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          ignores: {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true,
+            additionalItems: false
+          }
+        },
+        additionalProperties: false
+      }
+    ],
     messages: {
       unexpected: "Custom event name '{{name}}' must be kebab-case."
     }
   },
   /** @param {RuleContext} context */
   create(context) {
     const setupContexts = new Map()
+    const options = context.options[0] || {}
+    /** @type {RegExp[]} */
+    const ignores = (options.ignores || []).map(toRegExp)
 
     /**
      * @param { Literal & { value: string } } nameLiteralNode
      */
     function verify(nameLiteralNode) {
       const name = nameLiteralNode.value
-      if (isValidEventName(name)) {
+      if (ignores.some((re) => re.test(name)) || isValidEventName(name)) {
         return
       }
       context.report({

tests/lib/rules/custom-event-name-casing.js

@@ -166,6 +166,66 @@ tester.run('custom-event-name-casing', rule, {
       }
       </script>
       `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <input
+          @click="$emit('fooBar')">
+      </template>
+      <script>
+      export default {
+        setup(props, context) {
+          return {
+            onInput(value) {
+              context.emit('barBaz')
+            }
+          }
+        },
+        methods: {
+          onClick() {
+            this.$emit('bazQux')
+          }
+        }
+      }
+      </script>
+      `,
+      options: [{ ignores: ['fooBar', 'barBaz', 'bazQux'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <input
+          @click="$emit('input:update')">
+        <input
+          @click="$emit('search:update')">
+        <input
+          @click="$emit('click:row')">
+      </template>
+      <script>
+      export default {
+        setup(props, context) {
+          return {
+            onInput(value) {
+              context.emit('input:update')
+              context.emit('search:update')
+              context.emit('click:row')
+            }
+          }
+        },
+        methods: {
+          onClick() {
+            this.$emit('input:update')
+            this.$emit('search:update')
+            this.$emit('click:row')
+          }
+        }
+      }
+      </script>
+      `,
+      options: [{ ignores: ['/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u'] }]
     }
   ],
   invalid: [
@@ -276,6 +336,68 @@ tester.run('custom-event-name-casing', rule, {
         "Custom event name 'barBaz' must be kebab-case.",
         "Custom event name 'bazQux' must be kebab-case."
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <input
+          @click="$emit('input/update')">
+      </template>
+      <script>
+      export default {
+        setup(props, context) {
+          return {
+            onInput(value) {
+              context.emit('search/update')
+            }
+          }
+        },
+        methods: {
+          onClick() {
+            this.$emit('click/row')
+          }
+        }
+      }
+      </script>
+      `,
+      options: [{ ignores: ['/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u'] }],
+      errors: [
+        "Custom event name 'input/update' must be kebab-case.",
+        "Custom event name 'search/update' must be kebab-case.",
+        "Custom event name 'click/row' must be kebab-case."
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <input
+          @click="$emit('input/update')">
+      </template>
+      <script>
+      export default {
+        setup(props, context) {
+          return {
+            onInput(value) {
+              context.emit('search/update')
+            }
+          }
+        },
+        methods: {
+          onClick() {
+            this.$emit('click/row')
+          }
+        }
+      }
+      </script>
+      `,
+      options: [{ ignores: ['input:update', 'search:update', 'click:row'] }],
+      errors: [
+        "Custom event name 'input/update' must be kebab-case.",
+        "Custom event name 'search/update' must be kebab-case.",
+        "Custom event name 'click/row' must be kebab-case."
+      ]
     }
   ]
 })