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>
vuejs · Oct 18, 2020 · 9932d13 · 9932d13
1 parent d626ec1
commit 9932d13
Show file tree

Hide file tree

Showing 3 changed files with 182 additions and 3 deletions.
diff --git a/docs/rules/custom-event-name-casing.md b/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
 

diff --git a/lib/rules/custom-event-name-casing.js b/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({

diff --git a/tests/lib/rules/custom-event-name-casing.js b/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."
+      ]
     }
   ]
 })