vue/component-options-name-casing

强制 components 选项中的组件名称的大小写

• 🔧 command line 上的 --fix 选项可以自动修复此规则报告的一些问题。

• 💡此规则报告的某些问题可以通过编辑器 suggestions 手动修复。

  ¥💡 Some problems reported by this rule are manually fixable by editor suggestions.

📖 规则详情

此规则旨在强制 components 选项中的组件名称的大小写。

¥This rule aims to enforce casing of the component names in components options.

🔧选项

¥🔧 Options

{
  "vue/component-options-name-casing": ["error", "PascalCase" | "kebab-case" | "camelCase"]
}

此规则有一个选项，可以是以下值之一：

¥This rule has an option which can be one of these values:

• "PascalCase"（默认）...强制组件名称采用帕斯卡大小写。

  ¥"PascalCase" (default) ... enforce component names to pascal case.

• "kebab-case" ...强制组件名称为短横线大小写。

  ¥"kebab-case" ... enforce component names to kebab case.

• "camelCase" ...强制组件名称为驼峰大小写。

  ¥"camelCase" ... enforce component names to camel case.

请注意，如果你在 components 选项中使用 kebab 大小写，则只能在模板中使用 kebab 大小写；如果你在 components 选项中使用驼峰式大小写，则不能在模板中使用帕斯卡式大小写。

¥Please note that if you use kebab case in components options, you can only use kebab case in template; and if you use camel case in components options, you can't use pascal case in template.

为了演示，代码示例无效：

¥For demonstration, the code example is invalid:

<template>
  <div>
    <!-- All are invalid. DO NOT use like these. -->
    <KebabCase />
    <kebabCase />
    <CamelCase />
  </div>
</template>

<script>
export default {
  components: {
    camelCase: MyComponent,
    'kebab-case': MyComponent
  }
}
</script>

"PascalCase"（默认）

¥"PascalCase" (default)

Now loading...

Now loading...

"kebab-case"

Now loading...

Now loading...

"camelCase"

Now loading...

Now loading...

🚀版本

¥🚀 Version

此规则在 eslint-plugin-vue v8.2.0 中引入

¥This rule was introduced in eslint-plugin-vue v8.2.0

🔍代码实现

¥🔍 Implementation

• 规则源

  ¥Rule source

• 测试源

  ¥Test source