search

vuejs / eslint-plugin-vue

Official ESLint plugin for Vue.js
https://eslint.vuejs.org/
MIT License
4.47k stars 665 forks source link

Rule proposal: `component-filename-casing` #248

Closed michalsnik closed 6 years ago

michalsnik commented 6 years ago

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 commented 6 years ago

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

michalsnik commented 6 years ago

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

chrisvfritz commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 4 years ago

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