Skip to content

Commit 2936553

Browse files
ota-meshiota-meshi
authored
Change default casing of vue/custom-event-name-casing rule to camelCase (#1846)
1 parent 19c6e86 commit 2936553

File tree

3 files changed

+151
-24
lines changed

3 files changed

+151
-24
lines changed

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Define a style for custom event name casing for consistency purposes.
1313

1414
## :book: Rule Details
1515

16-
This rule aims to warn the custom event names other than the configured casing.
16+
This rule aims to warn the custom event names other than the configured casing. (Default is **camelCase**.)
1717

1818
Vue 2 recommends using kebab-case for custom event names.
1919

@@ -27,28 +27,28 @@ In Vue 3, using either camelCase or kebab-case for your custom event name does n
2727

2828
See [Guide - Custom Events] for more details.
2929

30-
This rule enforces kebab-case by default.
30+
This rule enforces camelCase by default.
3131

3232
<eslint-code-block :rules="{'vue/custom-event-name-casing': ['error']}">
3333

3434
```vue
3535
<template>
3636
<!-- ✓ GOOD -->
37-
<button @click="$emit('my-event')" />
37+
<button @click="$emit('myEvent')" />
3838
3939
<!-- ✗ BAD -->
40-
<button @click="$emit('myEvent')" />
40+
<button @click="$emit('my-event')" />
4141
</template>
4242
<script>
4343
export default {
4444
methods: {
4545
onClick () {
4646
/* ✓ GOOD */
47-
this.$emit('my-event')
47+
this.$emit('myEvent')
4848
this.$emit('update:myProp', myProp)
4949
5050
/* ✗ BAD */
51-
this.$emit('myEvent')
51+
this.$emit('my-event')
5252
}
5353
}
5454
}
@@ -62,16 +62,16 @@ export default {
6262
```json
6363
{
6464
"vue/custom-event-name-casing": ["error",
65-
"kebab-case" | "camelCase",
65+
"camelCase" | "kebab-case",
6666
{
6767
"ignores": []
6868
}
6969
]
7070
}
7171
```
7272

73-
- `"kebab-case"` (default) ... Enforce custom event names to kebab-case.
74-
- `"camelCase"` ... Enforce custom event names to camelCase.
73+
- `"camelCase"` (default) ... Enforce custom event names to camelCase.
74+
- `"kebab-case"` ... Enforce custom event names to kebab-case.
7575
- `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`.
7676

7777
### `"kebab-case"`
@@ -132,29 +132,29 @@ export default {
132132

133133
</eslint-code-block>
134134

135-
### `"ignores": ["fooBar", "/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u"]`
135+
### `"ignores": ["foo-bar", "/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u"]`
136136

137-
<eslint-code-block :rules="{'vue/custom-event-name-casing': ['error', { ignores: ['fooBar', '/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u'] }]}">
137+
<eslint-code-block :rules="{'vue/custom-event-name-casing': ['error', 'camelCase', { ignores: ['foo-bar', '/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u'] }]}">
138138

139139
```vue
140140
<template>
141141
<!-- ✓ GOOD -->
142142
<button @click="$emit('click:row')" />
143-
<button @click="$emit('fooBar')" />
143+
<button @click="$emit('foo-bar')" />
144144
145145
<!-- ✗ BAD -->
146-
<button @click="$emit('myEvent')" />
146+
<button @click="$emit('my-event')" />
147147
</template>
148148
<script>
149149
export default {
150150
methods: {
151151
onClick () {
152152
/* ✓ GOOD */
153153
this.$emit('click:row')
154-
this.$emit('fooBar')
154+
this.$emit('foo-bar')
155155
156156
/* ✗ BAD */
157-
this.$emit('myEvent')
157+
this.$emit('my-event')
158158
}
159159
}
160160
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const { toRegExp } = require('../utils/regexp')
2222
// ------------------------------------------------------------------------------
2323

2424
const ALLOWED_CASE_OPTIONS = ['kebab-case', 'camelCase']
25-
const DEFAULT_CASE = 'kebab-case'
25+
const DEFAULT_CASE = 'camelCase'
2626

2727
/**
2828
* Get the name param node from the given CallExpression

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

Lines changed: 135 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@ tester.run('custom-event-name-casing', rule, {
4141
}
4242
}
4343
</script>
44-
`
44+
`,
45+
options: ['kebab-case']
4546
},
4647
{
4748
filename: 'test.vue',
@@ -67,7 +68,8 @@ tester.run('custom-event-name-casing', rule, {
6768
}
6869
}
6970
</script>
70-
`
71+
`,
72+
options: ['kebab-case']
7173
},
7274
{
7375
filename: 'test.vue',
@@ -92,7 +94,8 @@ tester.run('custom-event-name-casing', rule, {
9294
}
9395
}
9496
</script>
95-
`
97+
`,
98+
options: ['kebab-case']
9699
},
97100
{
98101
filename: 'test.vue',
@@ -117,7 +120,8 @@ tester.run('custom-event-name-casing', rule, {
117120
}
118121
}
119122
</script>
120-
`
123+
`,
124+
options: ['kebab-case']
121125
},
122126
{
123127
filename: 'test.vue',
@@ -149,7 +153,8 @@ tester.run('custom-event-name-casing', rule, {
149153
},
150154
}
151155
</script>
152-
`
156+
`,
157+
options: ['kebab-case']
153158
},
154159
{
155160
filename: 'test.vue',
@@ -165,7 +170,8 @@ tester.run('custom-event-name-casing', rule, {
165170
},
166171
}
167172
</script>
168-
`
173+
`,
174+
options: ['kebab-case']
169175
},
170176
{
171177
filename: 'test.vue',
@@ -269,6 +275,60 @@ tester.run('custom-event-name-casing', rule, {
269275
</script>
270276
`,
271277
options: ['camelCase']
278+
},
279+
// Default
280+
{
281+
filename: 'test.vue',
282+
code: `
283+
<template>
284+
<input
285+
@click="$emit('fooBar')">
286+
</template>
287+
<script>
288+
export default {
289+
setup(props, context) {
290+
return {
291+
onInput(value) {
292+
context.emit('barBaz')
293+
}
294+
}
295+
},
296+
methods: {
297+
onClick() {
298+
this.$emit('bazQux')
299+
}
300+
}
301+
}
302+
</script>
303+
`
304+
},
305+
306+
// kebab-case
307+
{
308+
filename: 'test.vue',
309+
code: `
310+
<template>
311+
<input
312+
@click="$emit('foo-bar')">
313+
</template>
314+
<script>
315+
export default {
316+
setup(props, context) {
317+
return {
318+
onInput(value) {
319+
context.emit('bar-baz')
320+
}
321+
}
322+
},
323+
methods: {
324+
onClick() {
325+
this.$emit('baz-qux')
326+
}
327+
}
328+
}
329+
</script>
330+
`,
331+
options: ['kebab-case']
272332
}
273333
],
274334
invalid: [
@@ -296,6 +356,7 @@ tester.run('custom-event-name-casing', rule, {
296356
}
297357
</script>
298358
`,
359+
options: ['kebab-case'],
299360
errors: [
300361
{
301362
message: "Custom event name 'fooBar' must be kebab-case.",
@@ -344,6 +405,7 @@ tester.run('custom-event-name-casing', rule, {
344405
}
345406
</script>
346407
`,
408+
options: ['kebab-case'],
347409
errors: [
348410
"Custom event name 'fooBar' must be kebab-case.",
349411
"Custom event name 'barBaz' must be kebab-case.",
@@ -374,6 +436,7 @@ tester.run('custom-event-name-casing', rule, {
374436
}
375437
</script>
376438
`,
439+
options: ['kebab-case'],
377440
errors: [
378441
"Custom event name 'fooBar' must be kebab-case.",
379442
"Custom event name 'barBaz' must be kebab-case.",
@@ -448,6 +511,7 @@ tester.run('custom-event-name-casing', rule, {
448511
"Custom event name 'click/row' must be kebab-case."
449512
]
450513
},
514+
// camelCase
451515
{
452516
filename: 'test.vue',
453517
code: `
@@ -479,6 +543,69 @@ tester.run('custom-event-name-casing', rule, {
479543
"Custom event name 'baz-qux' must be camelCase."
480544
]
481545
},
546+
// Default
547+
{
548+
filename: 'test.vue',
549+
code: `
550+
<template>
551+
<input
552+
@click="$emit('foo-bar')">
553+
</template>
554+
<script>
555+
export default {
556+
setup(props, context) {
557+
return {
558+
onInput(value) {
559+
context.emit('bar-baz')
560+
}
561+
}
562+
},
563+
methods: {
564+
onClick() {
565+
this.$emit('baz-qux')
566+
}
567+
}
568+
}
569+
</script>
570+
`,
571+
errors: [
572+
"Custom event name 'foo-bar' must be camelCase.",
573+
"Custom event name 'bar-baz' must be camelCase.",
574+
"Custom event name 'baz-qux' must be camelCase."
575+
]
576+
},
577+
// kebab-case
578+
{
579+
filename: 'test.vue',
580+
code: `
581+
<template>
582+
<input
583+
@click="$emit('fooBar')">
584+
</template>
585+
<script>
586+
export default {
587+
setup(props, context) {
588+
return {
589+
onInput(value) {
590+
context.emit('barBaz')
591+
}
592+
}
593+
},
594+
methods: {
595+
onClick() {
596+
this.$emit('bazQux')
597+
}
598+
}
599+
}
600+
</script>
601+
`,
602+
options: ['kebab-case'],
603+
errors: [
604+
"Custom event name 'fooBar' must be kebab-case.",
605+
"Custom event name 'barBaz' must be kebab-case.",
606+
"Custom event name 'bazQux' must be kebab-case."
607+
]
608+
},
482609
{
483610
filename: 'test.vue',
484611
code: `
@@ -490,8 +617,8 @@ tester.run('custom-event-name-casing', rule, {
490617
`,
491618
errors: [
492619
{
493-
message: "Custom event name 'fooBar' must be kebab-case.",
494-
line: 4
620+
message: "Custom event name 'foo-bar' must be camelCase.",
621+
line: 5
495622
}
496623
]
497624
}

0 commit comments

Comments
 (0)