eslint-plugin-vue

外观

vue/component-name-in-template-casing ​

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

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

为模板中组件名称的大小写定义一种风格，以确保一致性。

📖 规则详情 ​

此规则旨在警告 Vue.js 模板中与配置的大小写不一致的标签名称。

🔧 选项 ​

json
{
  "vue/component-name-in-template-casing": ["error", "PascalCase" | "kebab-case", {
    "registeredComponentsOnly": true,
    "ignores": []
  }]
}
  • "PascalCase" (默认) ... 强制标签名称为帕斯卡大小写。例如 <CoolComponent>。这与 JSX 实践一致。
  • "kebab-case" ... 强制标签名称为短横线分隔大小写：例如 <cool-component>。这与最初不区分大小写的 HTML 实践一致。
  • registeredComponentsOnly ... 如果为 true，则仅检查注册的组件（以帕斯卡大小写表示）。如果为 false，则检查所有组件。默认值为 true
  • ignores (string[]) ... 要忽略的元素名称。设置允许的元素名称。例如，自定义元素或具有特殊名称的 Vue 组件。您可以通过像 "/^name/" 这样编写来设置正则表达式。
  • globals (string[]) ... 要检查的全局注册组件名称。例如，RouterView 和 RouterLink 由 vue-router 全局注册，无法在 SFC 文件中检测到其注册。

"PascalCase", { registeredComponentsOnly: true } (默认) ​

正在加载...

"kebab-case" ​

正在加载...

"PascalCase", { registeredComponentsOnly: false } ​

正在加载...

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

正在加载...

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

正在加载...

📚 进一步阅读 ​

🚀 版本 ​

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

🔍 实现 ​