ESLint Vue 多字组件

Question

有没有办法停止从 ESLint 中获取 Vue3 中单个单词 view 名称的错误？

每次运行 ESLint 时，我都会收到以下消息：

  1:1  error  Component name "About" should always be multi-word  vue/multi-word-component-names

我目前有这样的设置：

文件结构：

├── index.html
├── node_modules
├── npm
├── package.json
├── package-lock.json
├── public
│   └── favicon.ico
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.svg
│   ├── components
│   │   └── Menu.vue
│   ├── env.d.ts
│   ├── main.ts
│   ├── router
│   │   └── index.ts
│   └── views
│       ├── About.vue
│       └── Home.vue
├── tsconfig.json
└── vite.config.ts

.eslintrc：

{
    "root": true,
    "env": {
        "node": true
    },
    "extends": [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 2021
    },
    "rules": {}
}

package.json

{
...
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "lint": "eslint --ext .ts,vue --ignore-path .gitignore ."
  },
...
}

Answer 1

选项 1：全局禁用

要禁用所有文件中的规则（甚至是

src/components

中的文件）：

// <projectRoot>/.eslintrc.js
module.exports = {
  ⋮
  rules: {
    'vue/multi-word-component-names': 0,
  },
}

选项 2：ESLint 配置中的

overrides

为

src/views/

要仅针对

src/views/**/*.vue

禁用规则，请指定

overrides

配置:

// <projectRoot>/.eslintrc.js
module.exports = {
  ⋮
  overrides: [
    {
      files: ['src/views/**/*.vue'],
      rules: {
        'vue/multi-word-component-names': 0,
      },
    },
  ],
}

注意： 如果将 VS Code 与 ESLint 扩展一起使用，则可能需要重新启动 ESLint 服务器（通过 Command Palette 的

>ESLint: Restart ESLint Server

命令）或重新启动 IDE 来重新加载配置。

选项 3：目录级配置

src/views/

也可以使用该目录中的

src/views/**/*.vue 文件禁用

.eslintrc.js

的规则:

// <projectRoot>/src/views/.eslintrc.js
module.exports = {
  rules: {
    'vue/multi-word-component-names': 0,
  },
}

Answer 2

对于仍然遇到此问题的人，请在

.eslintrc.js

文件中的规则下添加以下内容

rules: {
  ...
  'vue/multi-word-component-names': 0,
}

Answer 3

有一个简单的解决方案。您需要使用多个单词来定义您的组件名称，正如它所指出的那样。应为 PascalCase，如下所示；

例如：AboutPage.vue

Answer 4

在项目根目录下找到一个

vue.config.js

文件，如果没有就在根目录下创建一个，写入下面标记的代码，保存并重新编译。项目就可以正常运行了

Answer 5

将组件名称从

About

更改为

AboutView

这可以防止与现有和未来的 HTML 元素发生冲突，因为所有 HTML 元素都是单个单词。

不好

<!-- in pre-compiled templates -->
<Item />

<!-- in in-DOM templates -->
<item></item>

---

好

<!-- in pre-compiled templates -->
<TodoItem />

<!-- in in-DOM templates -->
<todo-item></todo-item>

Answer 6

您只需运行此命令，它就会通过删除插件本身来自动修复问题：

npm 删除@vue/cli-plugin-eslint

致以诚挚的问候！