Add globals option to component-name-in-template-casing (#1989)

vuejs · Oct 11, 2022 · abcb642 · abcb642
1 parent 4d79ceb
commit abcb642
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 10 deletions.
diff --git a/docs/rules/component-name-in-template-casing.md b/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)
 
@@ -141,6 +142,22 @@ export default {
 
 </eslint-code-block>
 
+### `"PascalCase", { globals: ["RouterView"] }`
+
+<eslint-code-block fix :rules="{'vue/component-name-in-template-casing': ['error', 'PascalCase', {globals: ['RouterView']}]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <RouterView></RouterView>
+  
+  <!-- ✗ BAD -->
+  <router-view></router-view>
+</template>
+```
+
+</eslint-code-block>
+
 ## :books: Further Reading
 
 - [Style guide - Component name casing in templates](https://vuejs.org/style-guide/rules-strongly-recommended.html#component-name-casing-in-templates)

diff --git a/lib/rules/component-name-in-template-casing.js b/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
       }
 

diff --git a/tests/lib/rules/component-name-in-template-casing.js b/tests/lib/rules/component-name-in-template-casing.js
@@ -168,6 +168,30 @@ tester.run('component-name-in-template-casing', rule, {
           <keep-alive />
         </template>
       `
+    },
+
+    // globals
+    {
+      code: `
+        <template>
+          <div>
+            <RouterView />
+            <RouterLink />
+          </div>
+        </template>
+      `,
+      options: ['PascalCase', { globals: ['RouterView', 'router-link'] }]
+    },
+    {
+      code: `
+        <template>
+          <div>
+            <router-view />
+            <router-link />
+          </div>
+        </template>
+      `,
+      options: ['kebab-case', { globals: ['RouterView', 'router-link'] }]
     }
   ],
   invalid: [
@@ -854,6 +878,66 @@ 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: [
+        {
+          message: 'Component name "router-view" is not PascalCase.',
+          line: 3,
+          column: 11
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <RouterView />
+        </template>
+      `,
+      options: ['kebab-case', { globals: ['RouterView'] }],
+      output: `
+        <template>
+          <router-view />
+        </template>
+      `,
+      errors: [
+        {
+          message: 'Component name "RouterView" is not kebab-case.',
+          line: 3,
+          column: 11
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <RouterView />
+        </template>
+      `,
+      options: ['kebab-case', { globals: ['router-view'] }],
+      output: `
+        <template>
+          <router-view />
+        </template>
+      `,
+      errors: [
+        {
+          message: 'Component name "RouterView" is not kebab-case.',
+          line: 3,
+          column: 11
+        }
+      ]
     }
   ]
 })