Component File Name Casing
Checks if the component file name is in PascalCase or kebab-case.
👉 https://vuejs.org/style-guide/rules-strongly-recommended.html#single-file-component-filename-casing
❓ Why it's good to follow this rule?
- Consistency: It's easier to find a component when you know how it's named.
- Predictability: It's easier to predict the name of the component when you know the naming convention.
😱 Examples of code for which this rule will throw a warning
WARNING
The following component file name is written in a casing that is neither PascalCase nor kebab-case. This can lead to inconsistencies in naming conventions.
vue
// Incorrect filename
components/myheader.vue
🤩 How to fix it?
TIP
Rename the component file to follow either PascalCase or kebab-case conventions to ensure consistency. Here are examples of valid filenames:
vue
// Valid filenames
components/MyHeader.vue // PascalCase
components/my-header.vue // kebab-case