useVueMultiWordComponentNames

JavaScript (and super languages)

摘要

¥Summary

规则生效日期：v2.2.3

¥Rule available since: v2.2.3
诊断类别：lint/nursery/useVueMultiWordComponentNames

¥Diagnostic Category: lint/nursery/useVueMultiWordComponentNames
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 error。

¥The default severity of this rule is error.
此规则属于以下域：

¥This rule belongs to the following domains:
- vue
来源：

¥Sources:
- 灵感来自 vue/multi-word-component-names
  
  ¥Inspired from vue/multi-word-component-names

如何配置

¥How to configure

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

描述

¥Description

强制要求 Vue 组件使用多词组件名称。

¥Enforce multi-word component names in Vue components.

使用单字组件名称（例如 App、Header）可能会导致：

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

与原生/自定义 HTML 元素（现有或未来）的冲突

¥Conflict with native/custom HTML elements (present or future)
降低清晰度/表达力

¥Reduce clarity/expressiveness

此规则要求组件名称为 “multi-word”。

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

名称在以下情况下被视为多词：

¥A name is considered multi-word when:

Kebab-case 命名法：包含至少一个连字符 (my-component)

¥Kebab-case: contains at least one hyphen (my-component)
PascalCase / CamelCase：包含至少两个大写字母 (MyComponent)；拒绝使用单大写字母名称，例如 App 或 Foo。

¥PascalCase / CamelCase: contains at least two capital letters (MyComponent); single-cap names like App or Foo are rejected

组件名称从 Options API 组件的 name 属性中提取，如果未显式设置，则从文件名推断。

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

示例

¥Examples

无效

¥Invalid

1
<script>
2
export default {
3
  name: "Foo"
4
};
5
</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”).

1
import { defineComponent } from "vue";
2
export default defineComponent({
3
  name: "Header"
4
});

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”).

1
import { createApp } from "vue";
2
createApp({
3
  name: "Widget"
4
}).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”).

有效

¥Valid

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

1
export default {
2
  name: "my-component"
3
};

1
defineComponent({
2
  name: "MyComponent"
3
});

1
createApp({ name: "MyApp" }).mount("#app");

选项

¥Options

`ignores`

新增了要忽略的单字组件名称（不区分大小写）。该规则默认忽略 Vue 内置组件和 App。

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

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVueMultiWordComponentNames": {
6
          "options": {
7
            "ignores": [
8
              "Foo"
9
            ]
10
          }
11
        }
12
      }
13
    }
14
  }
15
}

有效

¥Valid

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

useVueMultiWordComponentNames

摘要

如何配置

描述

示例

无效

有效

选项

ignores

有效

相关链接

`ignores`