diff --git a/lib/rules/component-name-in-template-casing.js b/lib/rules/component-name-in-template-casing.js index fc1849b18..487af7714 100644 --- a/lib/rules/component-name-in-template-casing.js +++ b/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 } diff --git a/lib/utils/index.js b/lib/utils/index.js index 8702c6260..22119ae98 100644 --- a/lib/utils/index.js +++ b/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. diff --git a/lib/utils/vue-builtin-elements.js b/lib/utils/vue-builtin-elements.js new file mode 100644 index 000000000..70ddb6b7d --- /dev/null +++ b/lib/utils/vue-builtin-elements.js @@ -0,0 +1 @@ +module.exports = ['template', 'slot', 'component'] diff --git a/tests/lib/rules/component-name-in-template-casing.js b/tests/lib/rules/component-name-in-template-casing.js index 3aa4ee43d..992063808 100644 --- a/tests/lib/rules/component-name-in-template-casing.js +++ b/tests/lib/rules/component-name-in-template-casing.js @@ -86,6 +86,10 @@ tester.run('component-name-in-template-casing', rule, { code: '', options: ['PascalCase', { registeredComponentsOnly: false }] }, + { + code: '', + options: ['PascalCase', { registeredComponentsOnly: false }] + }, // kebab-case { @@ -108,6 +112,10 @@ tester.run('component-name-in-template-casing', rule, { code: '', options: ['kebab-case', { registeredComponentsOnly: false }] }, + { + code: '', + options: ['kebab-case', { registeredComponentsOnly: false }] + }, // ignores { @@ -859,7 +867,7 @@ tester.run('component-name-in-template-casing', rule, { `, output: ` `, 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 } ] }