vscode本身不转码，必须用@babel/cli搭本地环境：严格命名.babelrc、显式声明targets、用npx babel执行、html引入dist路径。
VSCode 本身不参与转码，只负责启动和显示
很多人卡在第一步：装了插件、点了“转码”按钮、控制台没报错，但浏览器还是 SyntaxError。根本原因是 VSCode 不是编译器，它不会执行 Babel 转码逻辑——它只是个编辑器。所有转码必须由 @babel/cli 在终端里完成，VSCode 的作用仅限于开个集成终端、写配置、改代码、看输出。
常见错误现象：
- 装了 “Babel ES6/ES7” 插件，保存后没生成
dist/目录； - 插件声称“自动转码”，但 HTML 引入
src/index.js后直接报Unexpected token 'const'； - 插件生成的文件没有 source map，Chrome 报错堆栈指向
dist/index.js:12，完全没法定位原始行。
实操建议：
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
- 卸载所有宣称“一键转码”的 VSCode Babel 插件（它们多数只是调用
npx babel的壳，但配置不可控）； - 把 VSCode 当作纯文本编辑器 + 终端容器，所有构建动作走命令行；
- 打开 VSCode 集成终端（
Ctrl+`），cd 到项目根目录，直接敲npx babel命令。
.babelrc 文件名和内容必须严格匹配 Babel 7+ 规则
Babel 找不到配置不是因为你写错了语法，而是它压根没读到文件。VSCode 里看不见隐藏文件，.babelrc 少一个点、多一个空格、拼错 presets 字段，都会导致整个配置静默失效。
必须满足的条件：
- 文件名是
.babelrc（开头带英文点，不是babelrc、.babelrc.json或babel.config.js）； - 内容是合法 JSON，不能有尾逗号、注释或
import； -
presets字段值必须是数组，且至少含"@babel/preset-env"（"es2015"已废弃，"latest"已移除）； - 如果要兼容 IE11，必须显式写
"targets": { "ie": "11" }，否则默认按现代 Node 环境处理，不降级。
正确示例（保存为项目根目录下的 .babelrc）：
{
"presets": [
["@babel/preset-env", {
"targets": {
"chrome": "58",
"safari": "12",
"ie": "11"
}
}]
]
}
必须用 npx babel，别碰全局 babel 命令
全局安装 @babel/cli 看似方便，实际会让多个项目共享同一套转码逻辑。某天你升级了全局 Babel，老项目突然开始把 async/await 漏掉不转，排查半天发现是 preset 版本不兼容。
实操建议：
- 只在项目内执行
npm install --save-dev @babel/cli @babel/preset-env； - 永远用
npx babel（不是babel），确保调用的是node_modules/.bin/babel； - 常用命令组合：
npx babel src -d dist -s → 整个 src/ 目录转到 dist/，带 source map；
npx babel src/index.js -o dist/index.js -s → 单文件调试用，输出路径清晰；
npx babel src -w -d dist → 开启监听模式，保存即重编译，VSCode 里挂一个终端就行。
HTML 必须引入 dist/ 下的文件，且需本地服务运行
转码成功 ≠ 页面能跑。90% 的兼容性报错，根源是 HTML 还在引用 src/index.js。浏览器直接双击打开 index.html（file:// 协议）还会触发跨域限制，导致 script 加载失败或 MIME 类型错误。
检查要点：
-
<script src="dist/index.js"></script>—— 路径必须指向dist/，不是src/； - 确认
index.html和dist/的相对位置（例如 HTML 在项目根目录，dist/是其子目录，则路径正确）； - 开发时务必用轻量 server 启动，比如
npx serve（自动监听 5000 端口）或npx http-server。
如果你在 Chrome 控制台看到 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain".，那就是 file:// 协议惹的祸，换 server 就好。
真正卡住人的从来不是某个 API 不熟，而是 .babelrc 少了个点、targets 没写、HTML 引错了路径、或者忘了开本地服务——四步缺一不可，漏一个，页面就白屏，控制台报错还找不到源头。
