useVueMatchingComponentFileName (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/useVueMatchingComponentFileName
This rule has an unsafe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Inspired from vue/match-component-file-name

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVueMatchingComponentFileName": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce that the name of a Vue component matches its file name.

When a component’s name differs from the name of the file that defines it, finding the component’s source from its name, or the other way around, becomes harder.

The names must be identical, including uppercase and lowercase letters: a component named my-component doesn’t match the file MyComponent.vue.

The rule checks every component whose name is written as a string, including when a file defines several components. It reads the component’s name from:

the name option of export default { ... } in a .vue, .jsx, or .tsx file;
the name option passed to defineComponent(), createApp(), or defineOptions();
the name passed to app.component() together with the component’s definition.

Examples

Invalid

1
<script>
2
export default {
3
  name: "MyButton"
4
};
5
</script>

/MyComponent.vue:3:9 lint/nursery/useVueMatchingComponentFileName  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The component name "MyButton" doesn't match the file name "MyComponent".
  
    1 │ <script>
    2 │ export default {
  > 3 │   name: "MyButton"
      │         ^^^^^^^^^^
    4 │ };
    5 │ </script>
  
  ℹ When a component and its file have different names, it's harder to find where the component is defined.
  
  ℹ Rename the component or the file so that both names are the same.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Rename the component to "MyComponent".
  
    1 1 │   <script>
    2 2 │   export default {
    3   │ - ··name:·"MyButton"
      3 │ + ··name:·"MyComponent"
    4 4 │   };
    5 5 │   </script>

1
<script setup>
2
defineOptions({
3
  name: "my-component"
4
});
5
</script>

/MyComponent.vue:3:9 lint/nursery/useVueMatchingComponentFileName  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The component name "my-component" doesn't match the file name "MyComponent".
  
    1 │ <script setup>
    2 │ defineOptions({
  > 3 │   name: "my-component"
      │         ^^^^^^^^^^^^^^
    4 │ });
    5 │ </script>
  
  ℹ When a component and its file have different names, it's harder to find where the component is defined.
  
  ℹ Rename the component or the file so that both names are the same.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Rename the component to "MyComponent".
  
    1 1 │   <script setup>
    2 2 │   defineOptions({
    3   │ - ··name:·"my-component"
      3 │ + ··name:·"MyComponent"
    4 4 │   });
    5 5 │   </script>

1
app.component("MyButton", {
2
  template: "<div />"
3
});

/MyComponent.js:1:15 lint/nursery/useVueMatchingComponentFileName  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The component name "MyButton" doesn't match the file name "MyComponent".
  
  > 1 │ app.component("MyButton", {
      │               ^^^^^^^^^^
    2 │   template: "<div />"
    3 │ });
  
  ℹ When a component and its file have different names, it's harder to find where the component is defined.
  
  ℹ Rename the component or the file so that both names are the same.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Rename the component to "MyComponent".
  
    1   │ - app.component("MyButton",·{
      1 │ + app.component("MyComponent",·{
    2 2 │     template: "<div />"
    3 3 │   });

Valid

1
<script>
2
export default {
3
  name: "MyComponent"
4
};
5
</script>