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

Posted 2023-03-27

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

【英文标题】：How to resolve "Adjacent JSX elements must be wrapped in an enclosing tag" issue in Vue.js

【发布时间】：2019-06-06 00:12:18

【问题描述】：

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

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

以下代码：

<template>
    <div>

    </div>

</template>

<script>

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

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

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

这是我的 .eslintrc.js：

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

【问题讨论】：

考虑到您没有使用 JSX，这似乎是一个配置问题

可能相关~github.com/vuejs/eslint-plugin-vue/issues/188

【参考方案1】：

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

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

【讨论】：

有没有办法一次性安装所有依赖项？