VSCode 本身不支持直接运行 JSX，需配置 Babel 或使用 Node.js + @babel/register 转译，否则会报 SyntaxError: Unexpected token。
VSCode 里直接运行 JSX 报 SyntaxError: Unexpected token '
这不是 VSCode 配置问题，而是 Node.js 默认不解析 JSX——它只认标准 JavaScript 或 ESM/CommonJS 模块语法。node index.js 执行时遇到 <div> 就会直接报错，和 Babel、React、打包工具无关。JSX 是语法糖，必须先转译。
- 别指望
code-runner或F5调试器原生支持 JSX；它调用的是裸node，没加任何编译层 - 也别改
launch.json的runtimeExecutable或加--loader参数试图“硬撑”——Node 官方 loader API 对 JSX 支持极弱，且不稳定 - 真实可行路径只有一条：让 JS 文件在执行前被转成合法 JS，再交给 Node 运行
用 @babel/register 动态转译 JSX（适合小脚本/实验）
适用于单文件快速验证 JSX 渲染逻辑，比如写个 render.js 测试 React.createElement 行为，不涉及 HMR 或打包。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 项目根目录装依赖：
npm install --save-dev @babel/core @babel/preset-react - 建
.babelrc，内容为：{"presets": ["@babel/preset-react"]} - 运行命令改成：
node -r @babel/register render.js - 如果用
code-runner，在设置里搜code-runner.executorMap，把javascript改成："node -r @babel/register $fileName" - 注意：
@babel/register是运行时转译，每次执行都重新解析，不适合大项目或热重载场景
用 ts-node + .tsx 文件绕过 JSX 限制（推荐给 TS 用户）
如果你项目已用 TypeScript，ts-node 默认支持 JSX（只要 tsconfig.json 里 "jsx": "react"），且无需额外配置 Babel。
- 确保已安装：
npm install --save-dev ts-node @types/react @types/react-dom -
tsconfig.json中必须有："compilerOptions": { "jsx": "react", "moduleResolution": "node" } - 把文件后缀从
.js改成.tsx，例如app.tsx - 直接运行：
ts-node app.tsx（code-runner可配"typescriptreact": "ts-node $fileName"） - 优势：类型检查 + JSX 支持一步到位；劣势：启动略慢，且不能用于纯 JS 项目
别踩的坑：JSX 不是 Node 原生能力，也不是 VSCode 能“配出来”的
所有试图通过修改 launch.json、加 node --loader、或依赖 esbuild-node-loader 等实验性方案的做法，在 2026 年仍属边缘实践——要么版本兼容差，要么无法处理 import.meta、动态 import 或 source map。真正稳定的方式只有两个：Babel 运行时转译，或迁移到 TS + ts-node。最常被忽略的一点是：你写的不是“可执行的 JS”，而是“需要先翻译的源码”。VSCode 只负责调用执行器，它不参与编译。
