Skip to content

Commit

Permalink
feat: fixable match-component-file-name rule
Browse files Browse the repository at this point in the history 
improve #1816

For the following reasons why name option changed.
If change file name, alto need to change import statement.
  • Loading branch information
Hideaki Matsunami committed Apr 29, 2022
1 parent 4fc9116 commit 2bd2cb4
Show file tree
Hide file tree
Showing 2 changed files with 165 additions and 2 deletions.
10 changes: 8 additions & 2 deletions lib/rules/match-component-file-name.js
View file
Expand Up @@ -37,7 +37,7 @@ module.exports = {
categories: undefined,
url: 'https://eslint.vuejs.org/rules/match-component-file-name.html'
},
fixable: null,
fixable: 'code',
schema: [
{
type: 'object',
Expand Down Expand Up @@ -102,19 +102,25 @@ module.exports = {
*/
function verifyName(node) {
let name
let quote = ''
if (node.type === 'TemplateLiteral') {
const quasis = node.quasis[0]
name = quasis.value.cooked
quote = '`'
} else {
name = `${node.value}`
quote = node.raw[0]
}

if (!compareNames(name, filename)) {
errors.push({
node,
message:
'Component name `{{name}}` should match file name `{{filename}}`.',
data: { filename, name }
data: { filename, name },
fix(fixer) {
return fixer.replaceText(node, `${quote}${filename}${quote}`)
}
})
}
}
Expand Down
157 changes: 157 additions & 0 deletions tests/lib/rules/match-component-file-name.js
View file
Expand Up @@ -560,6 +560,12 @@ ruleTester.run('match-component-file-name', rule, {
render() { return <div /> }
}
`,
output: `
export default {
name: 'MyComponent',
render() { return <div /> }
}
`,
parserOptions: jsxParserOptions,
errors: [
{
Expand All @@ -576,6 +582,35 @@ ruleTester.run('match-component-file-name', rule, {
render() { return <div /> }
}
`,
output: `
export default {
name: 'MyComponent',
render() { return <div /> }
}
`,
options: [{ extensions: ['jsx'] }],
parserOptions: jsxParserOptions,
errors: [
{
message:
'Component name `MComponent` should match file name `MyComponent`.'
}
]
},
{
filename: 'MyComponent.jsx',
code: `
export default {
name: "MComponent",
render() { return <div /> }
}
`,
output: `
export default {
name: "MyComponent",
render() { return <div /> }
}
`,
options: [{ extensions: ['jsx'] }],
parserOptions: jsxParserOptions,
errors: [
Expand All @@ -593,6 +628,12 @@ ruleTester.run('match-component-file-name', rule, {
render() { return <div /> }
}
`,
output: `
export default {
name: \`MyComponent\`,
render() { return <div /> }
}
`,
options: [{ extensions: ['jsx'] }],
parserOptions: jsxParserOptions,
errors: [
Expand All @@ -614,6 +655,42 @@ ruleTester.run('match-component-file-name', rule, {
}
</script>
`,
output: `
<script>
export default {
name: 'MyComponent',
template: '<div />'
}
</script>
`,
options: [{ extensions: ['vue'] }],
parser: require.resolve('vue-eslint-parser'),
parserOptions,
errors: [
{
message:
'Component name `MComponent` should match file name `MyComponent`.'
}
]
},
{
filename: 'MyComponent.vue',
code: `
<script>
export default {
name: "MComponent",
template: '<div />'
}
</script>
`,
output: `
<script>
export default {
name: "MyComponent",
template: '<div />'
}
</script>
`,
options: [{ extensions: ['vue'] }],
parser: require.resolve('vue-eslint-parser'),
parserOptions,
Expand All @@ -634,6 +711,14 @@ ruleTester.run('match-component-file-name', rule, {
}
</script>
`,
output: `
<script>
export default {
name: \`MyComponent\`,
template: '<div />'
}
</script>
`,
options: [{ extensions: ['vue'] }],
parser: require.resolve('vue-eslint-parser'),
parserOptions,
Expand All @@ -654,6 +739,35 @@ ruleTester.run('match-component-file-name', rule, {
template: '<div />'
})
`,
output: `
new Vue({
name: 'MyComponent',
template: '<div />'
})
`,
options: [{ extensions: ['js'] }],
parserOptions,
errors: [
{
message:
'Component name `MComponent` should match file name `MyComponent`.'
}
]
},
{
filename: 'MyComponent.js',
code: `
new Vue({
name: "MComponent",
template: '<div />'
})
`,
output: `
new Vue({
name: "MyComponent",
template: '<div />'
})
`,
options: [{ extensions: ['js'] }],
parserOptions,
errors: [
Expand All @@ -671,6 +785,12 @@ ruleTester.run('match-component-file-name', rule, {
template: '<div />'
})
`,
output: `
new Vue({
name: \`MyComponent\`,
template: '<div />'
})
`,
options: [{ extensions: ['js'] }],
parserOptions,
errors: [
Expand All @@ -687,6 +807,11 @@ ruleTester.run('match-component-file-name', rule, {
name: 'MComponent',
})
`,
output: `
Vue.mixin({
name: 'MyComponent',
})
`,
options: [{ extensions: ['js'] }],
parserOptions,
errors: [
Expand All @@ -703,6 +828,11 @@ ruleTester.run('match-component-file-name', rule, {
name: \`MComponent\`,
})
`,
output: `
Vue.mixin({
name: \`MyComponent\`,
})
`,
options: [{ extensions: ['js'] }],
parserOptions,
errors: [
Expand All @@ -719,6 +849,11 @@ ruleTester.run('match-component-file-name', rule, {
template: '<div />'
})
`,
output: `
Vue.component('MyComponent', {
template: '<div />'
})
`,
options: [{ extensions: ['js'] }],
parserOptions,
errors: [
Expand All @@ -735,6 +870,11 @@ ruleTester.run('match-component-file-name', rule, {
template: '<div />'
})
`,
output: `
Vue.component(\`MyComponent\`, {
template: '<div />'
})
`,
options: [{ extensions: ['js'] }],
parserOptions,
errors: [
Expand All @@ -751,6 +891,11 @@ ruleTester.run('match-component-file-name', rule, {
template: '<div />'
})
`,
output: `
app.component(\`MyComponent\`, {
template: '<div />'
})
`,
options: [{ extensions: ['js'] }],
parserOptions,
errors: [
Expand All @@ -770,6 +915,12 @@ ruleTester.run('match-component-file-name', rule, {
render() { return <div /> }
}
`,
output: `
export default {
name: 'MyComponent',
render() { return <div /> }
}
`,
options: [{ shouldMatchCase: true }],
parserOptions: jsxParserOptions,
errors: [
Expand All @@ -787,6 +938,12 @@ ruleTester.run('match-component-file-name', rule, {
render() { return <div /> }
}
`,
output: `
export default {
name: 'my-component',
render() { return <div /> }
}
`,
options: [{ shouldMatchCase: true }],
parserOptions: jsxParserOptions,
errors: [
Expand Down

0 comments on commit 2bd2cb4

Please sign in to comment.