未使用JSX却触发JSX警告？Vue+Quasar项目TS报17004错误

云上老周

2026-9-2

问题表现

基于Quasar框架的Vue+TypeScript项目中，<template>标签内编写的如下q-btn代码被TypeScript标记错误，其余原生HTML元素、其他Quasar组件均无报错：

<q-btn
 color="green"
 label="save & continue editing"
 @click="saveCase()"
/>

错误详情：

[{
    "resource": "/D:/dev-pro/secops-cases/front/src/components/Case.vue",
    "owner": "_generated_diagnostic_collection_name_#0",
    "code": "17004",
    "severity": 8,
    "message": "Cannot use JSX unless the '--jsx' flag is provided.",
    "source": "ts",
    "startLineNumber": 108,
    "startColumn": 11,
    "endLineNumber": 112,
    "endColumn": 13
}]

项目未使用React技术栈，仅采用Vue.js、Quasar与TypeScript开发。

报错原因

该错误是TypeScript语言服务识别偏差导致：TS服务未正确识别Vue模板语法，将自闭合写法的<q-btn>误判定为JSX标签，触发了JSX编译参数缺失的报错。常见触发场景包括：

tsconfig.json未正确配置Vue对应的TS解析规则，TS服务默认按原生JS/TS规则校验.vue文件内容
Vue官方语言服务Volar加载异常，或缺少Quasar配套的Volar类型插件，导致全局注册的Quasar组件类型识别失效
IDE同时启用Vetur和Volar两个Vue语法插件，插件冲突引发语法校验异常

解决方案

按以下顺序排查修复：

修正项目根目录tsconfig.json配置，确保核心配置符合Vue+Quasar+TS的要求，参考配置如下：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "jsx": "preserve",
    "moduleResolution": "bundler",
    "types": ["quasar"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "vueCompilerOptions": {
    "plugins": ["@quasar/volar-plugin"]
  }
}

修改完成后重启IDE的TypeScript服务，VS Code可通过命令面板执行TypeScript: Restart TS Server完成重启。

安装Quasar官方Volar插件补全全局组件类型，执行安装命令后重启IDE：
```
npm install @quasar/volar-plugin -D
```
检查IDE插件列表，若同时安装了Vetur和Volar（Vue Language Features），禁用Vetur插件，仅保留Volar作为Vue语法支持插件，避免插件冲突。
若仅单个组件临时报错，可将自闭合写法改为成对标签写法绕过校验：
```
<q-btn
 color="green"
 label="save & continue editing"
 @click="saveCase()"
></q-btn>
```

内容的提问来源于stack exchange，提问作者WoJ