Rule proposal: component-filename-casing

[michalsnik]

Similar to name-property-casing this rule would enforce proper filename casing of vue component.
https://vuejs.org/v2/style-guide/#Single-file-component-filename-casing-strongly-recommended

It should be quite easy to do in eslint. While parsing AST we can check for filename and report the root element if it's not ok.

[chrisvfritz]

I think this would be good to have, but I'm really torn on what the default should be. 😕

[michalsnik]

I think PascalCase is the only right default :) it would be common with the way you import components

[chrisvfritz]

The only issue is that PascalCase can cause issues when renaming files on case-insensitive OSes and with Git, e.g. when renaming Todolist.vue to TodoList.vue. The benefit is that PascalCase works better with autocompletion (and snippets) in editors. In the style guide, we say both are acceptable and use PascalCase in most examples, because it's what most of the team uses.

When setting defaults for other users though, I feel uncomfortable with an out-of-the-box config that can cause subtle issues and even be difficult to diagnose and fix if they've never encountered the problem before. I think ideally, the default would be "either convention, as long as it's consistently one or the other." Is that possible?

If not, I think it might be best to either make kebab-case the default, so that users have to explicitly opt in to a potentially dangerous file naming scheme, or not include it in any config by default.

[michalsnik]

This is a valid concern @chrisvfritz. Unfortunately we can't compare one file to another. If we use PascalCase everywhere, but would have a rule with kebab-case default, that we can't even put in recommended config, I'm not sure we should even implement it. Perhaps it's just one of these rules, that we don't need to have.

[michalsnik]

If someone thinks otherwise and have strong opinion, please reopen this issue to continue discussion :) I'm going to close topics that have no conclusion after a while by default.

[JonathanDn]

@michalsnik Is there any progress or any plugins / rules you know of that can enforce kebab-case .vue file names with eslint-plugin-vue ?