vue/custom-event-name-casing

强制自定义事件名称使用特定大小写
¥enforce specific casing for custom event name

为自定义事件名称大小写定义样式以实现一致性。

¥Define a style for custom event name casing for consistency purposes.

📖 规则详情

此规则旨在警告除配置的大小写之外的自定义事件名称。（默认为 camelCase。）

¥This rule aims to warn the custom event names other than the configured casing. (Default is camelCase.)

Vue 2 建议对自定义事件名称使用 kebab-case。

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

事件名称永远不会用作 JavaScript 中的变量或属性名称，因此没有理由使用 camelCase 或 PascalCase。此外，DOM 模板内的 v-on 事件监听器将自动转换为小写（由于 HTML 不区分大小写），因此 v-on:myEvent 将变成 v-on:myevent - 使得 myEvent 无法监听。
¥Event names will never be used as variable or property names in JavaScript, so there’s no reason to use camelCase or PascalCase. Additionally, v-on event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML’s case-insensitivity), so v-on:myEvent would become v-on:myevent – making myEvent impossible to listen to.
出于这些原因，我们建议你始终使用 kebab-case 作为事件名称。
¥For these reasons, we recommend you always use kebab-case for event names.

有关更多详细信息，请参阅指南（适用于 v2） - 自定义事件。

¥See Guide (for v2) - Custom Events for more details.

在 Vue 3 中，使用 camelCase 或 kebab-case 作为自定义事件名称不会限制其在 v-on 中的使用。但是，按照 JavaScript 惯例，camelCase 更自然。

¥In Vue 3, using either camelCase or kebab-case for your custom event name does not limit its use in v-on. However, following JavaScript conventions, camelCase is more natural.

有关更多详细信息，请参阅指南 - 自定义事件。

¥See Guide - Custom Events for more details.

此规则默认强制使用 camelCase。

¥This rule enforces camelCase by default.

Now loading...

🔧选项

¥🔧 Options

json

{
  "vue/custom-event-name-casing": ["error",
    "camelCase" | "kebab-case",
    {
      "ignores": []
    }
  ]
}

"camelCase"（默认）...强制自定义事件名称为驼峰式大小写。
¥"camelCase" (default) ... Enforce custom event names to camelCase.
"kebab-case" ...强制自定义事件名称为短横线大小写。
¥"kebab-case" ... Enforce custom event names to kebab-case.
ignores (string[]) ...要忽略的事件名称。设置要允许的事件名称。例如，自定义事件名称、具有特殊名称的 Vue 组件事件或 Vue 库组件事件名称。你可以通过像 "/^name/" 或 click:row 或 fooBar 这样的书写方式来设置正则表达式。
¥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"`

Now loading...

`"camelCase"`

Now loading...

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

Now loading...

👫相关规则

¥👫 Related Rules

📚扩展阅读

¥📚 Further Reading

🚀版本

¥🚀 Version

此规则在 eslint-plugin-vue v7.0.0 中引入

¥This rule was introduced in eslint-plugin-vue v7.0.0

🔍代码实现

¥🔍 Implementation

vue/custom-event-name-casing ​

📖 规则详情 ​

🔧选项 ​

"kebab-case" ​

"camelCase" ​

"ignores": ["foo-bar", "/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u"] ​

👫相关规则 ​

📚扩展阅读 ​

🚀版本 ​

🔍代码实现 ​

vue/custom-event-name-casing

📖 规则详情

🔧选项

`"kebab-case"`

`"camelCase"`

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

👫相关规则

📚扩展阅读

🚀版本

🔍代码实现