fix(component-name-in-template-casing): ignore vue template syntax (#2301)

Author: antfu

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

@@ -123,7 +123,8 @@ module.exports = {
       if (
         (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
         utils.isHtmlWellKnownElementName(node.rawName) ||
-        utils.isSvgWellKnownElementName(node.rawName)
+        utils.isSvgWellKnownElementName(node.rawName) ||
+        utils.isVueBuiltInElementName(node.rawName)
       ) {
         return false
       }

lib/utils/index.js

@@ -54,6 +54,7 @@ const VUE2_BUILTIN_COMPONENT_NAMES = new Set(
 const VUE3_BUILTIN_COMPONENT_NAMES = new Set(
   require('./vue3-builtin-components')
 )
+const VUE_BUILTIN_ELEMENT_NAMES = new Set(require('./vue-builtin-elements'))
 const path = require('path')
 const vueEslintParser = require('vue-eslint-parser')
 const { traverseNodes, getFallbackKeys, NS } = vueEslintParser.AST
@@ -867,6 +868,15 @@ module.exports = {
     )
   },
 
+  /**
+   * Check whether the given name is Vue builtin element name or not.
+   * @param {string} name The name to check.
+   * @returns {boolean} `true` if the name is a builtin Vue element name
+   */
+  isVueBuiltInElementName(name) {
+    return VUE_BUILTIN_ELEMENT_NAMES.has(name.toLowerCase())
+  },
+
   /**
    * Check whether the given name is Vue builtin directive name or not.
    * @param {string} name The name to check.

lib/utils/vue-builtin-elements.js

@@ -0,0 +1 @@
+module.exports = ['template', 'slot', 'component']

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

@@ -86,6 +86,10 @@ tester.run('component-name-in-template-casing', rule, {
       code: '<template><circle cx="0" cy="0" :d="radius"></template>',
       options: ['PascalCase', { registeredComponentsOnly: false }]
     },
+    {
+      code: '<template><component is="div" /></template>',
+      options: ['PascalCase', { registeredComponentsOnly: false }]
+    },
 
     // kebab-case
     {
@@ -108,6 +112,10 @@ tester.run('component-name-in-template-casing', rule, {
       code: '<template><math><mspace/></math></template>',
       options: ['kebab-case', { registeredComponentsOnly: false }]
     },
+    {
+      code: '<template><component is="div" /></template>',
+      options: ['kebab-case', { registeredComponentsOnly: false }]
+    },
 
     // ignores
     {
@@ -859,7 +867,7 @@ tester.run('component-name-in-template-casing', rule, {
       `,
       output: `
         <template>
-          <Component />
+          <component />
           <Suspense />
           <Teleport />
           <ClientOnly />
@@ -868,7 +876,6 @@ tester.run('component-name-in-template-casing', rule, {
       `,
       options: ['PascalCase', { registeredComponentsOnly: false }],
       errors: [
-        'Component name "component" is not PascalCase.',
         'Component name "suspense" is not PascalCase.',
         'Component name "teleport" is not PascalCase.',
         'Component name "client-only" is not PascalCase.',
@@ -1025,7 +1032,7 @@ tester.run('component-name-in-template-casing', rule, {
                 <HelloWorld3 />
                 <HelloWorld4 />
                 <HelloWorld5 />
-                <Component />
+                <component />
               </template>
             `,
             errors: [
@@ -1058,11 +1065,6 @@ tester.run('component-name-in-template-casing', rule, {
                 message: 'Component name "hello-world5" is not PascalCase.',
                 line: 18,
                 column: 17
-              },
-              {
-                message: 'Component name "component" is not PascalCase.',
-                line: 19,
-                column: 17
               }
             ]
           }