Vue 3 模板根只需要一个元素。 eslint-plugin-vue

Posted 2023-03-16

【中文标题】Vue 3 模板根只需要一个元素。 eslint-plugin-vue

【英文标题】：Vue 3 The template root requires exactly one element. eslint-plugin-vue

【发布时间】：2021-02-28 05:04:38

【问题描述】：

在搭建 Vue 3 项目后，我注意到我的 App.vue 中有一个错误。

A functional component that renders the matched component for the given path. Components rendered in can also contain its own , which will render components for nested paths.

API Reference

[vue/no-multiple-template-root]
The template root requires exactly one element.eslint-plugin-vue

我试过了

"vue/no-multiple-template-root": 0

在我的 .eslintrc.js 中

但错误仍然存​​在。我怎样才能摆脱错误？由于在 Vue 3 中，您不必在模板中只有一个元素。

module.exports = 
    root: true,
    env: 
        node: true
    ,
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint"
    ],
    parserOptions: 
        ecmaVersion: 2020
    ,
    rules: 
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
        "vue/no-multiple-template-root": 0
    
;

【问题讨论】：

请在此处添加完整的.eslintrc.js。

我添加了 .eslintrc.js

嗯，这种类型的错误对我来说从来没有真正发生过。我能看到的唯一区别（与我的设置相比）是extends 部分。我正在使用标准 linter，而您似乎正在使用 Prettier。这些就是我要扩展的所有内容：plugin:vue/vue3-essential、@vue/standard、@vue/typescript/recommended，到目前为止，它们从未给我带来任何问题。

对我来说，问题不在于 eslint。我打开了一个文件夹，里面有很多项目。这样一来，eslint 就对验证一头雾水了。 Here 是 github 问题。

【参考方案1】：

我最终关闭了 Vetur linting。 Vetur 认为它是一个 Vue 2 项目，因为它位于 VS Code 工作区中。

https://github.com/vuejs/vetur/issues/2299#issuecomment-696015374

你可以通过这样做来解决这个问题

F1>Preferences:Open Settings (JSON)

粘贴

"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,

【讨论】：

虽然这确实有效，但我很想了解我刚刚关闭的确切内容。我也只需要将风险...模板设置为假。这让我想知道为什么您还建议关闭脚本和样式。介意解释吗？感谢您的洞察力。

在您执行此操作之前，您是否确保模板中只有 1 个父标记？不要忘记将 放在父标签内。

【参考方案2】：

这个错误发生在我身上，因为我没有在 VS Code 中打开项目根目录，而是打开了父文件夹，因此 Vetur 在此查找package.json。

【讨论】：

这个答案可能听起来很傻，但事实并非如此！这个技巧对我来说比其他人更有效。点赞！！！

这里也一样。赞成。甚至不需要更改 package.json，或者将 .eslintrc.js 文件添加到项目中

谢谢！这也适用于我。

是的，你没看错，我是项目文件夹上面的一个目录！坦克！

【参考方案3】：

这里处理过这个：

在 .eslintrc.js 中

代替：

rules:  "vue/no-multiple-template-root": 0 

尝试：

rules: "vue/no-multiple-template-root": "off" 

【讨论】：

如果你使用 vue CLI 构建你的 vue 项目，你在 package.json 中有一个规则部分，这就是它必须去的地方。

【参考方案4】：

如果你正在开发一个 monorepo，因此 package.json 不在工作空间的根目录下，那么 Vetur 默认将无法找到 package.json，因此它无法确定 vue 版本。

在这种情况下，我们需要告诉 Vetur package.json 的位置

https://vuejs.github.io/vetur/guide/setup.html#advanced

【参考方案5】：

在 .eslintrc.js 中

规则： “vue/有效模板根”：“关闭”

【讨论】：

不起作用。我试过这个。也试过：规则：“vue/no-multiple-template-root”：“off”

@Ryan 尝试更新 plugin:vue/essential 和 eslint:recommended。如果您使用，请更新您的 vue ts 扩展。我没有任何其他特殊设置，它的工作原理。 setup.

【参考方案6】：

在 Vue3 上使用 vue create project，将其添加到您的 package.json 文件中：

"eslintConfig": 
    "root": true,
    "env": 
      "node": true
    ,
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": 
      "parser": "babel-eslint"
    ,
    "rules": 
      "vue/no-multiple-template-root": "off"
    
  

添加“规则”可以消除问题中描述的错误。无需更改默认 vetur 设置。

【讨论】：

重启 VS Code 后，这解决了我的问题！

【参考方案7】：

Penny Liu 和 skalta 为 Vue-cli 创建的 Vue 3 项目提供了真正的答案。问题是 package.json 必须在直接路径中，而不是在子文件夹中。

由于 package.json 指定了 Vue3 在下面扩展，vscode/vetur 将读取配置并且错误将消失。添加 "vue/no-multiple-template-root": "off" 无济于事，因为 linter 甚至没有读取 package.json。

  "eslintConfig": 
    "root": true,
    "env": 
      "node": true
    ,
    "extends": [
      "plugin:vue/vue3-essential",
      "@vue/standard"
    ],
    "parserOptions": 
      "parser": "babel-eslint"
    ,
    "rules": 
  ,

【参考方案8】：

禁用 Vetur 并改用 Volar。它现在是 Vue 3 项目的官方推荐。

来自官方迁移guide：

建议使用带有我们官方扩展 Volar (opens new window) 的 VSCode，它为 Vue 3 提供了全面的 IDE 支持。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案9】：

我认为，最好的解决方案是将模板中的所有元素包装到一个 div 元素中。它非常适合我。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案10】：

我也有同样的问题，因为 vetur 扩展。通过仅在 settings.json 中为我的模板 linting 关闭它来修复它。

"vetur.validation.template": false

如果您想在特定工作区中关闭，您可以在根文件夹中创建一个.vscode 文件夹，并在settings.json 内创建一个新文件.vscode，然后将上面的代码粘贴到您的settings.json

输入ctrl+shift+p然后输入Reload Window重新加载你的vscode并回车，错误应该消失了。

【参考方案11】：

在使用 Vue2 的情况下，可以通过将我的 html 代码仅包装在一个 <div> 中来修复 @mikseros suggested 提到的问题。

这将触发警告：

 <template>
   <div class="first child"> </div>
   <div class="second child"> </div>
 </template>

这将解决它：

 <template>
   <div>
      <div class="first child"> </div>
      <div class="second child"> </div>
   </div>
 </template>

在使用 React 时，这在 JSX 中也很常见。

【参考方案12】：

朋友们好， 出现此错误的主要原因是您的项目位于文件夹内。只需将其从文件夹中删除即可。您的项目只能在一个文件夹中。如果您只遵循这些简单的步骤，您将不会看到此错误。

谢谢

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案13】：

检查

 vscode-> plugins-> close Vetur 

重启 vscode，然后打开 Vetur。

欲了解更多信息，请查看以下链接： https://github.com/vuejs/eslint-plugin-vue/issues/1297#issuecomment-755202013