VSCode本身不执行Babel转译，必须用npx babel跑命令；需本地安装@babel/cli和@babel/preset-env，严格命名.babelrc，显式声明targets，HTML引入dist路径，缺一不可。
VSCode本身不执行Babel转译，必须用npx babel跑命令
VSCode不是构建工具，它不内置Babel转码能力。所谓“装个插件点一下就转ES6→ES5”的方案基本不可靠——插件背后往往只是悄悄调用 npx babel，但缺失关键控制权。真要稳定降级，你得自己搭本地环境，而不是指望编辑器替你决策。
常见错误现象：SyntaxError: Unexpected token 'const' 或箭头函数报错，90% 都是因为没走 npx babel，而是直接在浏览器里跑了 src/index.js。
- 别全局安装
@babel/cli：多项目共用一个版本，某天升级后老项目全崩 - 必须在项目内执行：
npm install --save-dev @babel/cli @babel/preset-env - 后续所有转码操作都用
npx babel，它会自动读取项目里的node_modules/.bin/babel，版本精准锁定
.babelrc 文件名和内容必须严格匹配
文件没被识别，比语法写错更致命。Babel 只认 .babelrc（开头带点），不是 babelrc、.babelrc.json 或 babel.config.json（后者仅适用于 monorepo 场景）。
内容也容易踩坑：JSON 格式必须合法，presets 字段不能拼成 presets 或留空；新项目一律用 "@babel/preset-env"，别用已废弃的 "es2015"。
- 兼容 IE11？必须显式声明：
"targets": { "ie": "11" }，否则默认只降到现代浏览器所需级别 - 按需 polyfill？
@babel/preset-env支持useBuiltIns: 'usage'，但需要配合core-js引入，插件根本做不到 - 检查是否生效：删掉
.babelrc，运行npx babel src/index.js -o dist/index.js，对比输出里还有没有class或=>—— 有就是没加载成功
HTML 必须引入 dist 目录下的文件，不是 src
转码成功 ≠ 页面能跑。绝大多数 SyntaxError 都卡在这一步：HTML 还在引用 src/index.js，而浏览器直接执行了未转译代码。
路径细节决定成败：
-
<script src="dist/index.js"></script>—— 前提是 HTML 在项目根目录，dist是同级子目录 - 如果 HTML 在
public/下，而dist在根目录，就得写成../dist/index.js - 别用
file://直接打开 HTML：跨域 + MIME 类型错误会导致脚本不执行，开发时用npx serve起个本地服务
监听模式（-w）适合 VSCode 开发流，但别依赖插件自动触发
在 VSCode 终端里跑 npx babel src -w -d dist，保存即重编译，是最轻量、最可控的开发流。它比任何“保存时自动转码”插件都可靠，因为你能看到实时日志、立刻定位失败原因。
插件的问题在于：它不告诉你为什么失败，也不暴露 targets 或 sourceMap 是否启用。
- 加
-s参数生成 source map：npx babel src -w -d dist -s，报错堆栈才能指向src原始行号 - 单文件调试用：
npx babel src/index.js -o dist/index.js -s，避免整个目录干扰 - 别把转码逻辑塞进
package.json的scripts里再配 VSCode task：多一层抽象就多一层故障点，直接终端挂命令最稳
真正卡住人的从来不是某个命令记不住，而是 .babelrc 少了个点、presets 拼错、HTML 引错了路径——四步环环相扣，漏一个，控制台就报错，还查不出哪出的问题。
