ESLint error in Vue template concerning JSX

user_1220014 0
Viewed 324

I have a vue single file component where, the template section looks like this

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

Card is an imported Vue component.

For some reason, I don't understand, ESLint in VSCode underlines the element with the red line and is warning me that Card cannot be used as a JSX component. I have installed and configured eslint with vue with every online tutorial I could find and the warning won't go away.

Any ideas on what should I configure to remove this stupid warning?

jsx eslint vue.js
1 Answers

To solve the immediate problem, add "jsx": "preserve" to your tsconfig.json file.

For a more permanent solution, you can also extend the recommended Vue-based typescript settings in your tsconfig.json by adding:

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

user_34171430
Related