VS Code编写Vue3代码时提示[vue/no-multiple-template-root]The template root requires exactly one element.

一、问题复现

笔者使用VS Code写Vue2代码时，在template标签里只能写一个根标签，在这个根标签里面可以任意多个标签：

<template>
  <!-- Vue2在template标签里面只能写一个根标签，这里我使用的div标签 -->
  <div>
      <!-- 在这个根标签div中可以写多个标签 -->
      <h1>员工信息</h1>
      <h2>姓名: {{employeeName}}</h2>
      <!-- 其他代码已省略 -->
  </div>
</template>

在Vue3中，可以不用在<template>中写根标签了，直接写成如下形式：

<template>
  <!-- 直接在template标签中写代码 -->
  <h1>员工信息</h1>
  <h2>姓名: {{employeeName}}</h2>
</template>

但是，VS Code会对当前代码进行语法检查，会出现如下报错提示，虽然不影响正常使用，但是这样挂着报错信息也不太好看（属于强迫症了哈哈哈）：

出现上述问题的主要原因是VS Code中安装的插件Vetur中对<template>标签检查的问题。

二、解决方案

1. 点击左侧插件商店（或者按CtrlShiftX）：

2. 找到Vetur插件，点击设置（小齿轮），然后点击扩展设置：

3. 在当前设置中一直向下翻到最后，找到Vetur > Validation: Template，然后取消勾选Validate vue-html in <template> using eslint-plugin-vue，如下图：

4. 此时在<template>标签中就不会出现语法检查提示错误现象了，正常启动项目也不会出现错误信息：