vscode本身不运行tsx，真正支持它的是ts-node+node组合；必须通过launch.json显式将执行权交给ts-node或配置esm loader，否则node原生无法解析jsx语法而报错。
直接说结论：VSCode 本身不运行 TSX，真正支持它的是 ts-node + node 的组合；配置核心是让调试器能正确加载 tsx 文件并识别 JSX 语法，而不是靠 VSCode 插件“翻译”。
为什么 launch.json 里不能只写 "program": "${relativeFile}"
因为 Node.js 原生不理解 .tsx 后缀，更不认识 JSX 语法。直接运行会报错：Cannot use JSX unless the '--jsx' flag is provided 或 Unexpected token '。VSCode 的 node 调试类型默认调用 node index.js，它不会自动触发 TypeScript 编译或 JSX 处理。
必须显式把执行权交给 ts-node（或带 --loader ts-node/esm 的 Node），否则调试器启动即失败。
- 全局安装
ts-node和@types/node（后者防止console、process等报错）：npm install -g ts-node @types/node
- 确保项目根目录有
tsconfig.json，且含"jsx": "preserve"或"react-jsx"（根据你用的 React 版本） - 在
.vscode/launch.json中，"program"必须指向ts-node的入口，不是你的.tsx文件本身："program": "${workspaceFolder}/node_modules/.bin/ts-node",（Linux/macOS）或"program": "${workspaceFolder}/node_modules/.bin/ts-node.cmd",（Windows） - 如果项目是 ESM（含
"type": "module"），改用node --loader ts-node/esm方式，此时"program"应设为"node"，并在"runtimeArgs"里加--loader和--experimental-specifier-resolution=node
tsconfig.json 里哪些选项影响 TSX 调试
不是所有 compilerOptions 都在调试时生效——ts-node 只读取部分，且默认忽略 outDir、declaration 等产出类配置。但以下几项直接影响能否跑通：
微软正式发布 Visual Studio Code 1.118 版本 。本次更新重点强化了 AI 开发体验与企业管理能力，其中最引人注目的是新增 Copilot CLI 远程控制功能，允许开发者通过手机或网页远程监控和接管 AI 会话 。同时，为了提高 AI 的运行性价比，新版本优化了令牌缓存策略以降低成本 。此外，1.118 版还引入了 Chronicle 本地历史追踪、TypeScript 7.0 支持以及更严格的企业级访问管控 。
-
"jsx"：必须设置，值为"preserve"（保留 JSX 供 Babel 处理）、"react"（旧版 React.createElement）、"react-jsx"（新版$jsxruntime）。调试时推荐"react-jsx"，避免额外配置 Babel -
"module"：建议"CommonJS"（兼容ts-node默认行为）；若用"ES2022"或"NodeNext"，需配合 ESM 启动方式（见上一条） -
"lib"：至少包含["ES2022", "DOM", "DOM.Iterable"]，否则document、fetch等全局变量标红 -
"skipLibCheck": true：强烈建议开启，跳过node_modules/@types类型检查，大幅提升ts-node启动速度
调试时遇到 Cannot find module 'react' 怎么办
这是 ts-node 运行时模块解析失败，和 TypeScript 编译无关。常见于两种情况：
- 项目没装
react和react-dom（即使只是写个 demo）：npm install react react-dom
（注意不是@types/react，那是给类型系统用的） - 用了
exports字段但ts-node版本太老（npm install -D ts-node@latest - 路径别名（如
@/components）未被ts-node识别：需在tsconfig.json中配"baseUrl"和"paths"，再在launch.json的"env"里加NODE_OPTIONS=--loader ts-node/esm（ESM 模式下）或使用ts-node --project tsconfig.json显式指定配置
attach 模式调试 TSX 的实际限制
你看到的 "request": "attach" 配置（端口 9229）只适用于已启动的 Node 进程——比如你用 npx ts-node --inspect-brk src/index.tsx 手动启一个带调试端口的服务，VSCode 再去连。它不适用于直接点击「开始调试」按钮启动 TSX 文件。
换句话说：attach 是“连上去”，launch 是“拉起来”。对 TSX，几乎总是用 launch 模式，且必须通过 ts-node 启动。
容易被忽略的一点：如果你在终端里手动跑了 ts-node --inspect src/app.tsx，但没加 -brk，VSCode attach 上去时代码可能已经执行完了，断点失效。真要用 attach，务必加 --inspect-brk。
