如何解决 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"],
};