ESLint Vue 多字组件答案

【问题标题】：ESLint Vue multiword componentsESLint Vue 多字组件
【发布时间】：2022-08-09 07:14:35
【问题描述】：

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

每次我运行 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\": {}
}

包.json

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

将你想要的配置添加到.eslintrc?文档中有广泛的指导：eslint.org/docs/user-guide/configuring。但是 Vue 风格指南将其描述为“基本”：vuejs.org/v2/style-guide/#Multi-word-component-names-essential，这就是它在该预设中的原因。
@jonrsharpe 这是我最初的想法，但正如您在“组件”中所说，这是必不可少的。但据我了解，这不包括视图，因为即使 vue-cli 使用单个单词名称生成它们，因为您不会将它们用作代码中的标签......
@Tomkys 唯一（应该）是一个单词的组件是 App.vue - 随着新的更新，生成的组件也是 Multi-Word i bleieve

标签： vue.js vue-router eslint vuejs3 vite

【解决方案1】：

选项 1：全局禁用

要禁用所有文件中的规则（即使是src/components 中的那些）：

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

选项 2：`overrides` 在 ESLint 配置中为 `src/views/`

要仅为src/views/**/*.vue 禁用规则，请指定overrides config：

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

笔记：如果使用带有ESLint Extension 的VS Code，可能需要重新启动ESLint 服务器（通过Command Palette 的>ESLint: Restart ESLint Server 命令）或重新启动IDE 以重新加载配置。

选项 3：`src/views/` 的目录级配置

也可以使用.eslintrc.js file in that directory 禁用src/views/**/*.vue 的规则：

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

【讨论】：

【解决方案2】：

对于仍然遇到此问题的用户，请在 .eslintrc.js 文件中的规则下添加以下内容

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

【讨论】：

我的 eslint 配置规则列在 package.json 下，我必须重新开始使更改生效的 VS Code

【解决方案3】：

有一个简单的解决方案。你需要用一个以上的词来定义你的组件名称。应该是 PascalCase 如下；

例如：AboutPage.vue

【讨论】：

【解决方案4】：

在项目根目录下找到vue.config.js文件，没有的话就在根目录下新建一个，写下下面标注的代码，保存，重新编译。项目将正常运行

【讨论】：

【解决方案5】：

Adicione a seguinte regra para evitar os erros no arquivo package.json

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

Altere também o seguinte arquivo vue.config.js

module.exports = defineConfig({
  transpileDependencies: ["vuetify"],
  lintOnSave:false
})

【讨论】：

选项 1：全局禁用

选项 2：overrides 在 ESLint 配置中为 src/views/

选项 3：src/views/ 的目录级配置

选项 2：`overrides` 在 ESLint 配置中为 `src/views/`

选项 3：`src/views/` 的目录级配置