如何解决 Vue.js 中的“相邻 JSX 元素必须包含在封闭标记中”问题

Question

我正在 WebStorm 中运行一个 Vue.js 项目。出于某种原因，我收到了这个 ESLint 错误：

ESLint: 解析错误：相邻的 JSX 元素必须用封闭标签包裹

以下代码：

<template>
    <div>

    </div>

</template>

<script>

正如您在屏幕截图中看到的，这发生在 <script> 开始标记上。

关于 React 项目有重复的问题，但他们的答案不适用于我的 Vue 项目。

有人可以帮忙吗？任何帮助将不胜感激。

这是我的 .eslintrc.js：

module.exports = {
    "extends": ["vue", "standard"],
    "plugins": [
      "import",
      "vue"
    ],
};

Answer 1

将'plugin:vue/recommended' 添加到 .eslintrc.js 解决了我的问题。 现在我的 .eslintrc.js 看起来像这样：

module.exports = {
    "extends": ["vue", "standard", "plugin:vue/recommended"],
    "plugins": ["import", "vue"],
};