vue/component-name-in-template-casing

强制模板中组件命名样式使用特定大小写

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

为模板大小写中的组件名称定义样式以实现一致性。

¥Define a style for the component name in template casing for consistency purposes.

📖 规则详情

此规则旨在警告 Vue.js 模板中除配置的大小写之外的标签名称。

¥This rule aims to warn the tag names other than the configured casing in Vue.js template.

🔧选项

¥🔧 Options

{
  "vue/component-name-in-template-casing": ["error", "PascalCase" | "kebab-case", {
    "registeredComponentsOnly": true,
    "ignores": []
  }]
}

• "PascalCase"（默认）...强制标签名称采用帕斯卡大小写。例如<CoolComponent>。这与 JSX 实践一致。

  ¥"PascalCase" (default) ... enforce tag names to pascal case. E.g. <CoolComponent>. This is consistent with the JSX practice.

• "kebab-case" ...强制标签名称采用短横线大小写：例如<cool-component>。这与最初不区分大小写的 HTML 实践一致。

  ¥"kebab-case" ... enforce tag names to kebab case: E.g. <cool-component>. This is consistent with the HTML practice which is case-insensitive originally.

• registeredComponentsOnly ...如果是 true，则仅检查已注册的组件（PascalCase）。如果是 false，则检查全部。默认 true

  ¥registeredComponentsOnly ... If true, only registered components (in PascalCase) are checked. If false, check all. default true

• ignores (string[]) ...要忽略的元素名称。设置要允许的元素名称。例如，具有特殊名称的自定义元素或 Vue 组件。你可以通过像 "/^name/" 这样的书写方式来设置正则表达式。

  ¥ignores (string[]) ... The element names to ignore. Sets the element name to allow. For example, custom elements or Vue components with special name. You can set the regexp by writing it like "/^name/".

• globals (string[]) ...要检查的全局注册组件名称。例如，RouterView 和 RouterLink 由 vue-router 全局注册，无法检测到在 SFC 文件中注册。

  ¥globals (string[]) ... Globally registered component names to check. For example, RouterView and RouterLink are globally registered by vue-router and can't be detected as registered in a SFC file.

"PascalCase", { registeredComponentsOnly: true }（默认）

¥"PascalCase", { registeredComponentsOnly: true } (default)

Now loading...

"kebab-case"

Now loading...

"PascalCase", { registeredComponentsOnly: false }

Now loading...

"PascalCase", { ignores: ["/^custom-/"], registeredComponentsOnly: false }

Now loading...

"PascalCase", { globals: ["RouterView"] }

Now loading...

📚扩展阅读

¥📚 Further Reading

• 样式指南 - 模板中的组件名称大小写

  ¥Style guide - Component name casing in templates

🚀版本

¥🚀 Version

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

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

🔍代码实现

¥🔍 Implementation

• 规则源

  ¥Rule source

• 测试源

  ¥Test source