Перейти до вмісту

useVueMultiWordComponentNames

Цей контент ще не доступний вашою мовою.

biome.json
{
"linter": {
"rules": {
"nursery": {
"useVueMultiWordComponentNames": "error"
}
}
}
}

Enforce multi-word component names in Vue components.

Using a single-word component name (e.g. App, Header) can:

  • Conflict with native/custom HTML elements (present or future)
  • Reduce clarity/expressiveness

This rule requires component names to be “multi-word”.

A name is considered multi-word when:

  • Kebab-case: contains at least one hyphen (my-component)
  • PascalCase / CamelCase: contains at least two capital letters (MyComponent); single-cap names like App or Foo are rejected

Component names are extracted from the name property in Options API components, or inferred from the file name if not explicitly set.

<script>
export default {
name: "Foo"
};
</script>
code-block.vue:2:9 lint/nursery/useVueMultiWordComponentNames ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

This Component’s name “Foo” only contains one word.

1 │ export default {
> 2 │ name: “Foo”
^^^^^
3 │ };
4 │

Single-word component names can collide with HTML elements and are less descriptive.

Rename the component to have 2 or more words (e.g. “FooItem”, or “BarView”).

import { defineComponent } from "vue";
export default defineComponent({
name: "Header"
});
code-block.js:3:9 lint/nursery/useVueMultiWordComponentNames ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

This Component’s name “Header” only contains one word.

1 │ import { defineComponent } from “vue”;
2 │ export default defineComponent({
> 3 │ name: “Header”
^^^^^^^^
4 │ });
5 │

Single-word component names can collide with HTML elements and are less descriptive.

Rename the component to have 2 or more words (e.g. “FooItem”, or “BarView”).

import { createApp } from "vue";
createApp({
name: "Widget"
}).mount("#app");
code-block.js:3:9 lint/nursery/useVueMultiWordComponentNames ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

This Component’s name “Widget” only contains one word.

1 │ import { createApp } from “vue”;
2 │ createApp({
> 3 │ name: “Widget”
^^^^^^^^
4 │ }).mount(“#app”);
5 │

Single-word component names can collide with HTML elements and are less descriptive.

Rename the component to have 2 or more words (e.g. “FooItem”, or “BarView”).

<script>
export default {
name: "MyComponent"
};
</script>
export default {
name: "my-component"
};
defineComponent({
name: "MyComponent"
});
createApp({ name: "MyApp" }).mount("#app");

Additional single-word component names to ignore (case-insensitive). The rule already ignores Vue built-in components and App by default.

biome.json
{
"linter": {
"rules": {
"nursery": {
"useVueMultiWordComponentNames": {
"options": {
"ignores": [
"Foo"
]
}
}
}
}
}
}
<script>
export default {
name: "Foo"
};
</script>