Vue 模板中有关 JSX 的 ESLint 错误

Question

我有一个 vue 单文件组件，其中模板部分如下所示

<template>
   <Card>
      /// rest of template here ///
   </Card>
</template>

Card是一个导入的Vue组件。

由于某种原因，我不明白，VSCode 中的 ESLint 用红线强调了该元素，并警告我Card cannot be used as a JSX component. 我已经使用 vue 安装并配置了 eslint 以及我能找到的每个在线教程，并且警告不会消失。

关于我应该配置什么来删除这个愚蠢的警告有什么想法吗？

Answer 1

要解决眼前的问题，请添加"jsx": "preserve"到您的tsconfig.json文件中。

为了获得更永久的解决方案，您还可以通过添加以下内容来扩展推荐的基于 Vue 的打字稿设置tsconfig.json：

"extends": "@vue/tsconfig/tsconfig.json"