在 .vue 里写 script setup lang=tsx 常见报错的完整解决方案

本节目标：理解“在 .vue 里写 script setup lang=tsx 常见报错的完整解决方案”的核心思路，并能把它用于实际开发或面试表达。 错误表现 ESLint 报：Parsing error: '>' expected（或类似 “意外的 <”）原因是 代码编译器（Vite + Vue 插件）早已支持 TSX，而 ESLint 解析器 仍按普通 TS 解析，看到 <div> 就当成泛型尖括号——于是语法报错。

1️⃣ 思路梳理


角色	任务	关键配置
TypeScript	类型检查 & 保留 TSX	compilerOptions.jsx = "preserve"
jsxImportSource = "vue"
Vite / Babel	把 TSX 转成浏览器可执行代码	@vitejs/plugin-vue-jsx
@vue/babel-plugin-jsx
ESLint	语法分析 & 规则校验	vue-eslint-parser（拆 SFC）
@typescript-eslint/parser（解析 TSX）

缺哪一环就会报错；大部分脚手架已经配好前两环，本次故障属于 第三环缺配置。

2️⃣ 步骤速查

安装依赖（若还没装）pnpm add -D vue-eslint-parser @typescript-eslint/parser \ @vitejs/plugin-vue-jsx @vue/babel-plugin-jsx
tsconfig.json 确保开启 TSX：{ "compilerOptions": { "jsx": "preserve", "jsxImportSource": "vue" // Vue 3.4+ 必须 }}
vite.config.ts 启用 TSX 插件：import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vueJsx from '@vitejs/plugin-vue-jsx'export default defineConfig({ plugins: [vue(), vueJsx()],})
ESLint Flat-Config 补一段解析器配置（放在已有规则后即可——只改“关键差异行”，保持代码最小改动）// 💡 让 .vue 中的 <script lang="tsx"> 被正确解析

  {
    name: 'app/vue-sfc-tsx',
    files: ['**/*.vue'],
    languageOptions: {
      //

外层解析

 SFC
      parser: 'vue-eslint-parser',
      parserOptions: {
        //

内层 \<script\> 交给 TS 解析器

        parser: '@typescript-eslint/parser',
        ecmaFeatures: { jsx: true },     //

开启

 TSX
        extraFileExtensions: ['.vue'],   //

识别

 .vue
      },
    },
  },

如果还有独立 .tsx 文件，再加块

  {
    name: 'app/tsx-files',
    files: ['**/*.tsx'],
    languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } },
  },

重新执行pnpm lint # 应不再报 '>' expectedpnpm dev # TSX 正常编译

3️⃣ 背后原理

vue-eslint-parser
- 把 .vue 拆解成“模板 AST”和“脚本 AST”；
- 对 <script setup> 再调用你指定的 子解析器。
@typescript-eslint/parser
- 实际解析 TS/TSX 语法，ecmaFeatures.jsx: true 告诉它“嘴里可能有 <div>”。
JSX 流程
- TypeScript “保留”JSX → 交给 Babel / esbuild 转换；
- 转换时由 @vue/babel-plugin-jsx / vueJsx 插件把 JSX 变成 h(...) 调用。

4️⃣ 常见陷阱 & 提示


症状	排查
IDE 仍红线	确认 IDE 使用的 tsconfig 与项目一致；有时需重启 ES 模块。
编译通过但 ESLint 报错	九成是没加 vue-eslint-parser；或 files 匹配不到。
模板宏报错	TSX 里写 defineExpose 等宏要加 /#PURE/，或直接用 <script setup> 模式。
jest/vitest 测试失败	在测试环境也需要 vueJsx Babel 插件；可用 @vitejs/plugin-vue-jsx 的 babelPreset。

5️⃣ 小结

问题本质：编译器会，但 ESLint 不识别 TSX。
一行判断：报错点在 ESLint 还是编译？前者就补解析器。
核心修复：vue-eslint-parser ➕ @typescript-eslint/parser(ecmaFeatures.jsx)。

照此流程，一次配置，后续任何 .vue + TSX 代码都能愉快通过。

在 .vue 里写 script setup lang=tsx 常见报错的完整解决方案 ​

在 .vue 里写 script setup lang=tsx 常见报错的完整解决方案