Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Change default casing of vue/custom-event-name-casing rule to camelCase #1846

Merged
merged 1 commit into from May 11, 2022
Merged

Change default casing of vue/custom-event-name-casing rule to camelCase #1846

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
30 changes: 15 additions & 15 deletions docs/rules/custom-event-name-casing.md
View file
Open in desktop
Expand Up @@ -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.

Expand All @@ -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')
}
}
}
Expand All @@ -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"`
Expand Down Expand Up @@ -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')
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion lib/rules/custom-event-name-casing.js
View file
Open in desktop
Expand Up @@ -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
Expand Down
143 changes: 135 additions & 8 deletions tests/lib/rules/custom-event-name-casing.js
View file
Open in desktop
Expand Up @@ -41,7 +41,8 @@ tester.run('custom-event-name-casing', rule, {
}
}
</script>
`
`,
options: ['kebab-case']
},
{
filename: 'test.vue',
Expand All @@ -67,7 +68,8 @@ tester.run('custom-event-name-casing', rule, {
}
}
</script>
`
`,
options: ['kebab-case']
},
{
filename: 'test.vue',
Expand All @@ -92,7 +94,8 @@ tester.run('custom-event-name-casing', rule, {
}
}
</script>
`
`,
options: ['kebab-case']
},
{
filename: 'test.vue',
Expand All @@ -117,7 +120,8 @@ tester.run('custom-event-name-casing', rule, {
}
}
</script>
`
`,
options: ['kebab-case']
},
{
filename: 'test.vue',
Expand Down Expand Up @@ -149,7 +153,8 @@ tester.run('custom-event-name-casing', rule, {
},
}
</script>
`
`,
options: ['kebab-case']
},
{
filename: 'test.vue',
Expand All @@ -165,7 +170,8 @@ tester.run('custom-event-name-casing', rule, {
},
}
</script>
`
`,
options: ['kebab-case']
},
{
filename: 'test.vue',
Expand Down Expand Up @@ -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: [
Expand Down Expand Up @@ -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.",
Expand Down Expand Up @@ -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.",
Expand Down Expand Up @@ -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.",
Expand Down Expand Up @@ -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: `
Expand Down Expand Up @@ -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: `
Expand All @@ -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
}
]
}
Expand Down