Add globals option to component-name-in-template-casing

docs/rules/component-name-in-template-casing.md

@@ -33,6 +33,7 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
 - `registeredComponentsOnly` ... If `true`, only registered components (in PascalCase) are checked. If `false`, check all.
     default `true`
 - `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[]`) ... 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 }` (default)
 

lib/rules/component-name-in-template-casing.js

@@ -40,6 +40,11 @@ module.exports = {
       {
         type: 'object',
         properties: {
+          globals: {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true
+          },
           ignores: {
             type: 'array',
             items: { type: 'string' },
@@ -63,13 +68,15 @@ module.exports = {
       : defaultCase
     /** @type {RegExp[]} */
     const ignores = (options.ignores || []).map(toRegExp)
+    /** @type {string[]} */
+    const globals = (options.globals || []).map(casing.pascalCase)
     const registeredComponentsOnly = options.registeredComponentsOnly !== false
     const tokens =
       context.parserServices.getTemplateBodyTokenStore &&
       context.parserServices.getTemplateBodyTokenStore()
 
     /** @type { Set<string> } */
-    const registeredComponents = new Set()
+    const registeredComponents = new Set(globals)
 
     if (utils.isScriptSetup(context)) {
       // For <script setup>
@@ -106,15 +113,8 @@ module.exports = {
         }
         return true
       }
-      // We only verify the components registered in the component.
-      if (
-        [...registeredComponents]
-          .filter((name) => casing.isPascalCase(name)) // When defining a component with PascalCase, you can use either case
-          .some(
-            (name) =>
-              node.rawName === name || casing.pascalCase(node.rawName) === name
-          )
-      ) {
+      // We only verify the registered components.
+      if (registeredComponents.has(casing.pascalCase(node.rawName))) {
         return true
       }
 

tests/lib/rules/component-name-in-template-casing.js

@@ -168,6 +168,40 @@ tester.run('component-name-in-template-casing', rule, {
           <keep-alive />
         </template>
       `
+    },
+
+    // globals
+    {
+      code: `
+        <template>
+          <RouterView />
+        </template>
+      `,
+      options: ['PascalCase', { globals: ['RouterView'] }]
+    },
+    {
+      code: `
+        <template>
+          <RouterView />
+        </template>
+      `,
+      options: ['PascalCase', { globals: ['router-view'] }]
+    },
+    {
+      code: `
+        <template>
+          <router-view />
+        </template>
+      `,
+      options: ['kebab-case', { globals: ['RouterView'] }]
+    },
+    {
+      code: `
+        <template>
+          <router-view />
+        </template>
+      `,
+      options: ['kebab-case', { globals: ['router-view'] }]
     }
   ],
   invalid: [
@@ -854,6 +888,48 @@ tester.run('component-name-in-template-casing', rule, {
         </script>
       `,
       errors: ['Component name "TheComponent" is not kebab-case.']
+    },
+    {
+      code: `
+        <template>
+          <router-view />
+        </template>
+      `,
+      options: ['PascalCase', { globals: ['RouterView'] }],
+      output: `
+        <template>
+          <RouterView />
+        </template>
+      `,
+      errors: ['Component name "router-view" is not PascalCase.']
+    },
+    {
+      code: `
+        <template>
+          <RouterView />
+        </template>
+      `,
+      options: ['kebab-case', { globals: ['RouterView'] }],
+      output: `
+        <template>
+          <router-view />
+        </template>
+      `,
+      errors: ['Component name "RouterView" is not kebab-case.']
+    },
+    {
+      code: `
+        <template>
+          <RouterView />
+        </template>
+      `,
+      options: ['kebab-case', { globals: ['router-view'] }],
+      output: `
+        <template>
+          <router-view />
+        </template>
+      `,
+      errors: ['Component name "RouterView" is not kebab-case.']
     }
   ]
 })