VSCode本身不运行Babel，真正起作用的是终端执行的babel命令或构建工具调用@babel/core；关键配置包括babel.config.js必须用exports.default、targets需硬编码浏览器版本、React 17+需配@babel/preset-react并设runtime: "automatic"、launch.json中program必须指向编译后文件。
VSCode 本身不运行 Babel，它只提供编辑和调试环境；真正起作用的是你在终端里执行的 babel 命令或构建工具（如 Webpack）调用的 @babel/core。Node 环境只是执行载体，关键在配置是否匹配当前 Babel 版本与目标浏览器需求。
babel.config.js 必须用 exports.default，不是 module.exports
很多人写完配置却没生效，根本原因是 Babel 7+ 只认 exports.default。哪怕你用的是最新版 @babel/cli 或 babel-loader，只要 babel.config.js 里写的是 module.exports = { presets: [...] }，整个转译就静默失败——没有报错，但代码原样输出。
- 正确写法：
exports.default = { presets: [ ['@babel/preset-env', { targets: { chrome: '58', safari: '12', ie: '11' } }] ] }; - 错误写法：
module.exports = { presets: [...] }—— 这个在 monorepo、pnpm workspace 或 VSCode 终端里尤其容易被忽略 - 如果项目含 TypeScript，
babel.config.js里不能有import type或任何 TS 类型语法，Babel 不解析类型，会直接抛SyntaxError: Unexpected token 'export'
@babel/preset-env 的 targets 必须写死版本号
只写 "last 2 versions" 或 "> 0.25%, not dead" 看似省事，但对旧版浏览器兼容性极不可靠。Babel 默认按 node: "current" 处理，结果 Chrome 90+ 的 /d 正则标志、?. 可选链全都不降级，IE11 直接白屏报 SyntaxError: Invalid regular expression flag 'd'。
- 明确指定目标：
targets: { chrome: '58', safari: '12', ie: '11', firefox: '60' } - 避免用模糊描述，比如
"ie >= 11"在某些 Babel 版本中会被忽略 - 若用 Webpack +
babel-loader，确保exclude: /node_modules/没误伤需转译的现代依赖（如某些 UI 库已发 ES2017+ 源码）
React 17+ 必须配 @babel/preset-react 并设 runtime: "automatic"
没配这个 preset，JSX 会变成 React.createElement(...)；但 React 17+ 默认启用新 JSX 转换，要求调用 jsx() 函数。结果就是运行时报 ReferenceError: jsx is not defined，而不是编译期报错。
- 安装：
npm install --save-dev @babel/preset-react - 配置：
['@babel/preset-react', { runtime: 'automatic' }] - 不需要再手动 import
React，新 runtime 会自动注入 - 若混用 Preact 或其他库，需改
importSource，否则jsx函数找不到对应实现
VSCode 调试时要指向转译后文件，不是源文件
VSCode 的 launch.json 中 "program" 字段必须填编译后的路径，比如 "${workspaceFolder}/dist/index.js"。如果还指向 src/index.js，Node 直接执行 ES6 代码，Babel 彻底没机会介入——报错信息全是原始语法错误，和 Babel 配置无关。
- 推荐搭配
babel --watch或 Webpack dev server，让转译实时发生 - 在
package.json里加脚本："build": "babel src --out-dir dist --source-maps" - 调试前先跑一次
npm run build，确认dist/下有可用文件 - 别依赖
.babelrc：Babel 7+ 优先读babel.config.js，.babelrc只在单包场景下有效，monorepo 里基本失效
最常被跳过的点是 exports.default 和 targets 版本硬编码——这两处一错，其余配置全白搭。VSCode 只负责打开文件、启动 Node、转发调试请求，真正的兼容性由 Babel 配置决定，不是编辑器能“智能修复”的事。
