Change default casing of vue/custom-event-name-casing rule to camel…

…Case (#1846)
vuejs · May 11, 2022 · 2936553 · 2936553
1 parent 19c6e86
commit 2936553
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 24 deletions.
diff --git 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,16 +62,16 @@ export default {
 ```json
 {
   "vue/custom-event-name-casing": ["error",
-    "kebab-case" | "camelCase",
+    "camelCase" | "kebab-case",
     {
       "ignores": []
     }
   ]
 }
 ```
 
-- `"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,29 +132,29 @@ 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 {
   methods: {
     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
@@ -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
@@ -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
         }
       ]
     }