⭐️New: Add vue/match-component-file-name rule

[rodrigopedra]

Described in issue #667

Discussed in the comments of PR #589 with @chrisvfritz

[rodrigopedra]

Hi @armano2 I fixed my commit to pass the lint and I think as I force pushed to have just one commit github cannot show your review. If it is not related to fixing the linting problems, I would as you to please repost your review. Sorry for force pushing I wasn't expecting this to reviwed so quickly.

I think we could add the "run npm run lint" to the Contributing section on the README.md file.

[armano2]

Missing valid tests:

export default {
  name: componentName,
  template: '<div />'
}

// test.js(x)
export default {
  name: `test`,
  template: '<div />'
}

// foo.js(x)
export default {
  name: `test${foo}`,
  template: '<div />'
}

// foo.js(x)
export default {
  name,
  template: '<div />'
}

---

There is also:

Vue.component('test', {})

but this one is a little more tricky, component-definition-name-casing

---

Last case is multiple components in same file.

[rodrigopedra]

Still missing the test of multiple components in the same file... Working (struggling) on it

[armano2]

I don't think that's possible without changing logic in
https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/index.js#L545
executeOnVue, executeOnVueInstance and executeOnVueComponent

hmm...

[armano2]

what's about making variable errors instead of context.report

and increase counter in utils.executeOnVue(context, (obj) => {

and on Program:end checking if counter === 1 && error than context.report(error)

[rodrigopedra]

Hi @armano2 , used Program:exit to test for multiple components. Please take a look and see if it is ok. Thanks a lot for the help.

[mysticatea]

Our style guide mentions kebab-case filenames because a mix of case-sensitive/insensitive file systems can cause a certain problem.

I'd like to see how this rule handles kebab-case filenames.

[rodrigopedra]

Hi @mysticatea , good question. The implementation only checks if the component's name property is equal to its file name. It doesn't do any case conversion. So if your file is names my-component.jsx, the rule will check if the component's name property is name: 'my-component'.

In the examples and testing I used only PascalCase examples for shortness but if you look into the rule's code you will see that nothing fancy is done when comparing the component's name property and its file name.

See the comparison in the source

EDIT - added link to the source file

[mysticatea]

Thank you for the explanation.

Does allowing kebab-case file names make sense?
utils/casing.js has utilities about name conversion.
It may be name !== filename && casing.kebabCase(name) !== filename.

[rodrigopedra]

should it be

casing.pascalCase(name) !== filename && casing.kebabCase(name) !== filename

so it can accept any combination of cases?

• name: 'my-component' with my-component.jsx
• name: 'my-component' with MyComponent.jsx
• name: 'MyComponent' with my-component.jsx
• name: 'MyComponent' with MyComponent.jsx

[mysticatea]

Sounds good to me.

[rodrigopedra]

Hi @armano2 thanks for approving the changes. Let me know if there’s anything else that is needed on this issue. And thanks a lot to you and to @mysticatea for the guidance.

[ota-meshi]

@rodrigopedra Thank you!

[rodrigopedra]

@ota-meshi You are welcome. If you find anything else I could help, please let me know.

[michalsnik]

Sorry guys, but since we're still in v5 beta and all new rules are on hold - to get everything in place for official release - I reverted this PR and will merge it back in the next few days (after 5.0.0 release). I hope this is fine

[michalsnik]

Reverted back to master.