Back to Biomejs

useVueMultiWordComponentNames

src/content/docs/linter/rules/use-vue-multi-word-component-names.mdx

latest9.3 KB
Original Source

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Rule available since: `v2.2.3` - Diagnostic Category: [`lint/nursery/useVueMultiWordComponentNames`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - This rule belongs to the following domains: - [`vue`](/linter/domains#vue) - Sources: - Inspired from [`vue/multi-word-component-names`](https://eslint.vuejs.org/rules/multi-word-component-names)

How to configure

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

Description

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.

Examples

Invalid

vue
<script>
export default {
  name: "Foo"
};
</script>
<pre class="language-text"><code class="language-text">code-block.vue:2:9 <a href="https://biomejs.dev/linter/rules/use-vue-multi-word-component-names">lint/nursery/useVueMultiWordComponentNames</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">This Component's name </span><span style="color: Tomato;"><strong>&quot;Foo&quot;</strong></span><span style="color: Tomato;"> only contains one word.</span> <strong>1 │ </strong>export default &#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong> name: &quot;Foo&quot; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>3 │ </strong>&#125;; <strong>4 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Single-word component names can collide with HTML elements and are less descriptive.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Rename the component to have 2 or more words (e.g. &quot;FooItem&quot;, or &quot;BarView&quot;).</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit </span><span style="color: lightgreen;"><a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a></span><span style="color: lightgreen;"> for more information.</span> </code></pre>
js
import { defineComponent } from "vue";
export default defineComponent({
  name: "Header"
});
<pre class="language-text"><code class="language-text">code-block.js:3:9 <a href="https://biomejs.dev/linter/rules/use-vue-multi-word-component-names">lint/nursery/useVueMultiWordComponentNames</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">This Component's name </span><span style="color: Tomato;"><strong>&quot;Header&quot;</strong></span><span style="color: Tomato;"> only contains one word.</span> <strong>1 │ </strong>import &#123; defineComponent &#125; from &quot;vue&quot;; <strong>2 │ </strong>export default defineComponent(&#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>3 │ </strong> name: &quot;Header&quot; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>4 │ </strong>&#125;); <strong>5 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Single-word component names can collide with HTML elements and are less descriptive.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Rename the component to have 2 or more words (e.g. &quot;FooItem&quot;, or &quot;BarView&quot;).</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit </span><span style="color: lightgreen;"><a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a></span><span style="color: lightgreen;"> for more information.</span> </code></pre>
js
import { createApp } from "vue";
createApp({
  name: "Widget"
}).mount("#app");
<pre class="language-text"><code class="language-text">code-block.js:3:9 <a href="https://biomejs.dev/linter/rules/use-vue-multi-word-component-names">lint/nursery/useVueMultiWordComponentNames</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">This Component's name </span><span style="color: Tomato;"><strong>&quot;Widget&quot;</strong></span><span style="color: Tomato;"> only contains one word.</span> <strong>1 │ </strong>import &#123; createApp &#125; from &quot;vue&quot;; <strong>2 │ </strong>createApp(&#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>3 │ </strong> name: &quot;Widget&quot; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>4 │ </strong>&#125;).mount(&quot;#app&quot;); <strong>5 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Single-word component names can collide with HTML elements and are less descriptive.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Rename the component to have 2 or more words (e.g. &quot;FooItem&quot;, or &quot;BarView&quot;).</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit </span><span style="color: lightgreen;"><a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a></span><span style="color: lightgreen;"> for more information.</span> </code></pre>

Valid

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

Options

ignores

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

json
{
	"linter": {
		"rules": {
			"nursery": {
				"useVueMultiWordComponentNames": {
					"options": {
						"ignores": [
							"Foo"
						]
					}
				}
			}
		}
	}
}

Valid

vue
<script>
export default {
  name: "Foo"
};
</script>
</TabItem> </Tabs>