From 35f1e03f731a7133c3925844a5ce8cb4eef89988 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Thu, 14 Apr 2022 13:09:36 +0900
Subject: [PATCH] Change default casing of `vue/custom-event-name-casing` rule
 to camelCase

---
 docs/rules/custom-event-name-casing.md      |  30 ++--
 lib/rules/custom-event-name-casing.js       |   2 +-
 tests/lib/rules/custom-event-name-casing.js | 143 ++++++++++++++++++--
 3 files changed, 151 insertions(+), 24 deletions(-)

diff --git a/docs/rules/custom-event-name-casing.md b/docs/rules/custom-event-name-casing.md
index a2c4d3644..29afde056 100644
--- a/docs/rules/custom-event-name-casing.md
+++ b/docs/rules/custom-event-name-casing.md
@@ -13,7 +13,7 @@ Define a style for custom event name casing for consistency purposes.
 
 ## :book: Rule Details
 
-This rule aims to warn the custom event names other than the configured casing.
+This rule aims to warn the custom event names other than the configured casing. (Default is **camelCase**.)
 
 Vue 2 recommends using kebab-case for custom event names.
 
@@ -27,28 +27,28 @@ In Vue 3, using either camelCase or kebab-case for your custom event name does n
 
 See [Guide - Custom Events] for more details.
 
-This rule enforces kebab-case by default.
+This rule enforces camelCase by default.
 
 <eslint-code-block :rules="{'vue/custom-event-name-casing': ['error']}">
 
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <button @click="$emit('my-event')" />
+  <button @click="$emit('myEvent')" />
 
   <!-- ✗ BAD -->
-  <button @click="$emit('myEvent')" />
+  <button @click="$emit('my-event')" />
 </template>
 <script>
 export default {
   methods: {
     onClick () {
       /* ✓ GOOD */
-      this.$emit('my-event')
+      this.$emit('myEvent')
       this.$emit('update:myProp', myProp)
 
       /* ✗ BAD */
-      this.$emit('myEvent')
+      this.$emit('my-event')
     }
   }
 }
@@ -62,7 +62,7 @@ export default {
 ```json
 {
   "vue/custom-event-name-casing": ["error",
-    "kebab-case" | "camelCase",
+    "camelCase" | "kebab-case",
     {
       "ignores": []
     }
@@ -70,8 +70,8 @@ export default {
 }
 ```
 
-- `"kebab-case"` (default) ... Enforce custom event names to kebab-case.
-- `"camelCase"` ... Enforce custom event names to camelCase.
+- `"camelCase"` (default) ... Enforce custom event names to camelCase.
+- `"kebab-case"` ... Enforce custom event names to kebab-case.
 - `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`.
 
 ### `"kebab-case"`
@@ -132,18 +132,18 @@ export default {
 
 </eslint-code-block>
 
-### `"ignores": ["fooBar", "/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u"]`
+### `"ignores": ["foo-bar", "/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u"]`
 
-<eslint-code-block :rules="{'vue/custom-event-name-casing': ['error', { ignores: ['fooBar', '/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u'] }]}">
+<eslint-code-block :rules="{'vue/custom-event-name-casing': ['error', 'camelCase', { ignores: ['foo-bar', '/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u'] }]}">
 
 ```vue
 <template>
   <!-- ✓ GOOD -->
   <button @click="$emit('click:row')" />
-  <button @click="$emit('fooBar')" />
+  <button @click="$emit('foo-bar')" />
 
   <!-- ✗ BAD -->
-  <button @click="$emit('myEvent')" />
+  <button @click="$emit('my-event')" />
 </template>
 <script>
 export default {
@@ -151,10 +151,10 @@ export default {
     onClick () {
       /* ✓ GOOD */
       this.$emit('click:row')
-      this.$emit('fooBar')
+      this.$emit('foo-bar')
 
       /* ✗ BAD */
-      this.$emit('myEvent')
+      this.$emit('my-event')
     }
   }
 }
diff --git a/lib/rules/custom-event-name-casing.js b/lib/rules/custom-event-name-casing.js
index f59fa9c2a..5db15a875 100644
--- a/lib/rules/custom-event-name-casing.js
+++ b/lib/rules/custom-event-name-casing.js
@@ -22,7 +22,7 @@ const { toRegExp } = require('../utils/regexp')
 // ------------------------------------------------------------------------------
 
 const ALLOWED_CASE_OPTIONS = ['kebab-case', 'camelCase']
-const DEFAULT_CASE = 'kebab-case'
+const DEFAULT_CASE = 'camelCase'
 
 /**
  * Get the name param node from the given CallExpression
diff --git a/tests/lib/rules/custom-event-name-casing.js b/tests/lib/rules/custom-event-name-casing.js
index 00b76e4ed..8ad20377e 100644
--- a/tests/lib/rules/custom-event-name-casing.js
+++ b/tests/lib/rules/custom-event-name-casing.js
@@ -41,7 +41,8 @@ tester.run('custom-event-name-casing', rule, {
         }
       }
       </script>
-      `
+      `,
+      options: ['kebab-case']
     },
     {
       filename: 'test.vue',
@@ -67,7 +68,8 @@ tester.run('custom-event-name-casing', rule, {
         }
       }
       </script>
-      `
+      `,
+      options: ['kebab-case']
     },
     {
       filename: 'test.vue',
@@ -92,7 +94,8 @@ tester.run('custom-event-name-casing', rule, {
         }
       }
       </script>
-      `
+      `,
+      options: ['kebab-case']
     },
     {
       filename: 'test.vue',
@@ -117,7 +120,8 @@ tester.run('custom-event-name-casing', rule, {
         }
       }
       </script>
-      `
+      `,
+      options: ['kebab-case']
     },
     {
       filename: 'test.vue',
@@ -149,7 +153,8 @@ tester.run('custom-event-name-casing', rule, {
         },
       }
       </script>
-      `
+      `,
+      options: ['kebab-case']
     },
     {
       filename: 'test.vue',
@@ -165,7 +170,8 @@ tester.run('custom-event-name-casing', rule, {
         },
       }
       </script>
-      `
+      `,
+      options: ['kebab-case']
     },
     {
       filename: 'test.vue',
@@ -269,6 +275,60 @@ tester.run('custom-event-name-casing', rule, {
       </script>
       `,
       options: ['camelCase']
+    },
+    // Default
+    {
+      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>
+      `
+    },
+
+    // kebab-case
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <input
+          @click="$emit('foo-bar')">
+      </template>
+      <script>
+      export default {
+        setup(props, context) {
+          return {
+            onInput(value) {
+              context.emit('bar-baz')
+            }
+          }
+        },
+        methods: {
+          onClick() {
+            this.$emit('baz-qux')
+          }
+        }
+      }
+      </script>
+      `,
+      options: ['kebab-case']
     }
   ],
   invalid: [
@@ -296,6 +356,7 @@ tester.run('custom-event-name-casing', rule, {
       }
       </script>
       `,
+      options: ['kebab-case'],
       errors: [
         {
           message: "Custom event name 'fooBar' must be kebab-case.",
@@ -344,6 +405,7 @@ tester.run('custom-event-name-casing', rule, {
       }
       </script>
       `,
+      options: ['kebab-case'],
       errors: [
         "Custom event name 'fooBar' must be kebab-case.",
         "Custom event name 'barBaz' must be kebab-case.",
@@ -374,6 +436,7 @@ tester.run('custom-event-name-casing', rule, {
       }
       </script>
       `,
+      options: ['kebab-case'],
       errors: [
         "Custom event name 'fooBar' must be kebab-case.",
         "Custom event name 'barBaz' must be kebab-case.",
@@ -448,6 +511,7 @@ tester.run('custom-event-name-casing', rule, {
         "Custom event name 'click/row' must be kebab-case."
       ]
     },
+    // camelCase
     {
       filename: 'test.vue',
       code: `
@@ -479,6 +543,69 @@ tester.run('custom-event-name-casing', rule, {
         "Custom event name 'baz-qux' must be camelCase."
       ]
     },
+    // Default
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <input
+          @click="$emit('foo-bar')">
+      </template>
+      <script>
+      export default {
+        setup(props, context) {
+          return {
+            onInput(value) {
+              context.emit('bar-baz')
+            }
+          }
+        },
+        methods: {
+          onClick() {
+            this.$emit('baz-qux')
+          }
+        }
+      }
+      </script>
+      `,
+      errors: [
+        "Custom event name 'foo-bar' must be camelCase.",
+        "Custom event name 'bar-baz' must be camelCase.",
+        "Custom event name 'baz-qux' must be camelCase."
+      ]
+    },
+    // kebab-case
+    {
+      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: ['kebab-case'],
+      errors: [
+        "Custom event name 'fooBar' must be kebab-case.",
+        "Custom event name 'barBaz' must be kebab-case.",
+        "Custom event name 'bazQux' must be kebab-case."
+      ]
+    },
     {
       filename: 'test.vue',
       code: `
@@ -490,8 +617,8 @@ tester.run('custom-event-name-casing', rule, {
       `,
       errors: [
         {
-          message: "Custom event name 'fooBar' must be kebab-case.",
-          line: 4
+          message: "Custom event name 'foo-bar' must be camelCase.",
+          line: 5
         }
       ]
     }