Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 66a678f

Browse files
authored
fix(component-name-in-template-casing): ignore vue template syntax (#2301)
1 parent 467631e commit 66a678f

File tree

4 files changed

+23
-9
lines changed

4 files changed

+23
-9
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,8 @@ module.exports = {
123123
if (
124124
(!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
125125
utils.isHtmlWellKnownElementName(node.rawName) ||
126-
utils.isSvgWellKnownElementName(node.rawName)
126+
utils.isSvgWellKnownElementName(node.rawName) ||
127+
utils.isVueBuiltInElementName(node.rawName)
127128
) {
128129
return false
129130
}

‎lib/utils/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const VUE2_BUILTIN_COMPONENT_NAMES = new Set(
5454
const VUE3_BUILTIN_COMPONENT_NAMES = new Set(
5555
require('./vue3-builtin-components')
5656
)
57+
const VUE_BUILTIN_ELEMENT_NAMES = new Set(require('./vue-builtin-elements'))
5758
const path = require('path')
5859
const vueEslintParser = require('vue-eslint-parser')
5960
const { traverseNodes, getFallbackKeys, NS } = vueEslintParser.AST
@@ -867,6 +868,15 @@ module.exports = {
867868
)
868869
},
869870

871+
/**
872+
* Check whether the given name is Vue builtin element name or not.
873+
* @param {string} name The name to check.
874+
* @returns {boolean} `true` if the name is a builtin Vue element name
875+
*/
876+
isVueBuiltInElementName(name) {
877+
return VUE_BUILTIN_ELEMENT_NAMES.has(name.toLowerCase())
878+
},
879+
870880
/**
871881
* Check whether the given name is Vue builtin directive name or not.
872882
* @param {string} name The name to check.

‎lib/utils/vue-builtin-elements.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = ['template', 'slot', 'component']

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,10 @@ tester.run('component-name-in-template-casing', rule, {
8686
code: '<template><circle cx="0" cy="0" :d="radius"></template>',
8787
options: ['PascalCase', { registeredComponentsOnly: false }]
8888
},
89+
{
90+
code: '<template><component is="div" /></template>',
91+
options: ['PascalCase', { registeredComponentsOnly: false }]
92+
},
8993

9094
// kebab-case
9195
{
@@ -108,6 +112,10 @@ tester.run('component-name-in-template-casing', rule, {
108112
code: '<template><math><mspace/></math></template>',
109113
options: ['kebab-case', { registeredComponentsOnly: false }]
110114
},
115+
{
116+
code: '<template><component is="div" /></template>',
117+
options: ['kebab-case', { registeredComponentsOnly: false }]
118+
},
111119

112120
// ignores
113121
{
@@ -859,7 +867,7 @@ tester.run('component-name-in-template-casing', rule, {
859867
`,
860868
output: `
861869
<template>
862-
<Component />
870+
<component />
863871
<Suspense />
864872
<Teleport />
865873
<ClientOnly />
@@ -868,7 +876,6 @@ tester.run('component-name-in-template-casing', rule, {
868876
`,
869877
options: ['PascalCase', { registeredComponentsOnly: false }],
870878
errors: [
871-
'Component name "component" is not PascalCase.',
872879
'Component name "suspense" is not PascalCase.',
873880
'Component name "teleport" is not PascalCase.',
874881
'Component name "client-only" is not PascalCase.',
@@ -1025,7 +1032,7 @@ tester.run('component-name-in-template-casing', rule, {
10251032
<HelloWorld3 />
10261033
<HelloWorld4 />
10271034
<HelloWorld5 />
1028-
<Component />
1035+
<component />
10291036
</template>
10301037
`,
10311038
errors: [
@@ -1058,11 +1065,6 @@ tester.run('component-name-in-template-casing', rule, {
10581065
message: 'Component name "hello-world5" is not PascalCase.',
10591066
line: 18,
10601067
column: 17
1061-
},
1062-
{
1063-
message: 'Component name "component" is not PascalCase.',
1064-
line: 19,
1065-
column: 17
10661068
}
10671069
]
10681070
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /