VSCode本身不转码，稳定降级ES6→ES5必须用@babel/cli搭本地环境：严格命名.babelrc、显式声明targets、用npx babel执行、HTML引入dist路径。
VSCode 本身不转码，装插件点一下就转 ES6 → ES5 的方案基本不可靠，真要稳定降级，必须用 @babel/cli 搭本地环境——不是“能不能”，而是“必须这么干”。
为什么不能只靠 VSCode 插件
多数所谓“Babel 插件”只是包装了 npx babel 或偷偷调用全局 babel，但：
- 插件配置项常缺失 target 浏览器声明，转出来可能仍含 const、=>；
- 不生成 source map，报错时堆栈指向 dist 文件而非 src 原始行；
- 无法控制输出结构（比如保留目录层级）、不支持监听模式 -w；
- 插件更新滞后，新版 @babel/preset-env 的按需 polyfill 功能根本用不上。
.babelrc 文件名和内容必须严格匹配
常见失败原因不是语法写错，而是文件没被识别：
- 文件名必须是 .babelrc（开头带点，不是 babelrc 或 .babelrc.json）；
- 内容必须是合法 JSON，且 presets 字段不能拼错成 presets 或留空；
- 新项目一律用 "@babel/preset-env"，别用已废弃的 "es2015" 或 "latest"；
- 如果要兼容 IE11，得显式加 "targets": { "ie": "11" }，否则默认只降到现代浏览器所需级别。
执行命令必须用 npx babel，别碰全局安装
全局装 @babel/cli 看似省事，实际埋雷：
- 多个项目共用一个版本，某天升级后所有老项目突然转码异常；
- babel --version 显示的可能是全局版本，而项目里 package.json 锁的是旧版；
- 正确做法：只在项目内 npm install --save-dev @babel/cli @babel/preset-env，然后始终用 npx 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，不是 src
转码成功 ≠ 能跑起来，90% 的 “SyntaxError: Unexpected token 'const'” 都是这一步错了：
- 确保 HTML 中 <script src="dist/index.js"></script>，不是 src/index.js；
- 如果用相对路径，检查当前 HTML 所在目录与 dist 的层级关系（比如 HTML 在根目录，dist 是子目录，则路径正确）；
- 开发时建议配一个轻量 server（如 npx serve），避免浏览器直接打开 file:// 导致跨域或 MIME 类型错误。
真正卡住人的从来不是某个命令记不住，而是 .babelrc 名字少了个点、presets 拼错、HTML 引错了路径——四步环环相扣，漏一个，控制台就报错，还查不出哪出的问题。
