WebStorm配Babel转ES6需三者对齐：IDE设JavaScript版本为ES6+、项目根目录配置babel.config.json含@babel/preset-env、File Watcher中Program指向本地babel路径且Arguments带--presets。
WebStorm 里配 Babel 转 ES6，核心不是“装完就能用”，而是三件事必须对齐：IDE 的语法识别版本、Babel 的转译规则、File Watcher 的执行路径。缺一不可，否则要么满屏报红，要么生成空文件或不生效。
JavaScript language version 必须设为 ES6+（否则直接报红）
WebStorm 默认按 ES5 解析 JS 文件，const、=>、解构这些语法会标红，但实际不是错误——只是 IDE 没启用对应解析器。
- 打开
Settings → Languages & Frameworks → JavaScript，把JavaScript language version改成ES6或更高（如ES2021） - 改完后已打开的文件不会自动刷新，需手动按
Ctrl + Shift + O（Windows/Linux）或Cmd + Shift + O（macOS）重载 - 如果项目根目录有
jsconfig.json或tsconfig.json，WebStorm 会优先读其中的"target"和"lib"，此时 Settings 里的设置会被忽略——得去改 JSON 文件
.babelrc 或 babel.config.json 必须存在且 presets 正确
Babel 不会凭空知道你要转什么。没有配置文件，babel 命令默认只做极简处理（比如只换箭头函数），大部分 ES6 特性（如 class、async/await）根本不会动。
- 推荐用
babel.config.json（项目级，支持 monorepo），内容示例：{"presets": ["@babel/preset-env"]} - 若用
.babelrc，确保它在项目根目录（和package.json同级），内容不能是空对象或只写{} -
babel-preset-es2015已废弃，必须用@babel/preset-env；安装命令是：npm install --save-dev @babel/core @babel/preset-env - 如果只转给现代浏览器用，
"targets"可显式指定（避免过度降级）：{"presets": ["@babel/preset-env", { "targets": { "browsers": ["> 1%"] }}]}
File Watcher 的 Arguments 和 Program 容易配错
WebStorm 的 File Watcher 是触发转译的关键，但默认配置几乎总是错的：路径不对、参数漏 --presets、输出路径没刷新，结果就是“改了没反应”或“生成空文件”。
-
Program：不要选全局的babel（容易版本冲突）。应指向项目内：$ProjectFileDir$/node_modules/.bin/babel（macOS/Linux）或$ProjectFileDir$/node_modules/.bin/babel.cmd（Windows） -
Arguments：必须带--presets，且路径要匹配你装的 preset。常见写法：--source-maps --out-file $FileNameWithoutExtension$.es5.js --presets @babel/preset-env $FilePath$
-
Output paths to refresh：填生成文件路径，例如：$FileNameWithoutExtension$.es5.js和$FileNameWithoutExtension$.es5.js.map，否则 WebStorm 不会感知到新文件 - 别用
--out-dir配相对路径（如dist），容易因 Working directory 不一致导致输出错位；单文件输出更可控
为什么 .js 文件没报错但生成的 .es5.js 仍是 ES6？
最常被忽略的一点：Babel 是否真正在运行，取决于它能否加载到配置和 preset。即使 File Watcher 显示“Executed”，也可能静默失败。
- 检查终端执行
npx babel index.js --presets @babel/preset-env是否能正常输出——这是验证 Babel 环境是否就绪的黄金标准 - 如果报错
Cannot find module '@babel/preset-env'，说明node_modules里没装对，或用了 pnpm/yarn 2+ 但没启用node-linker - WebStorm 的 File Watcher 日志藏在
Event Log（底部栏）里，点开能看到真实 stderr 输出，比看“成功”提示靠谱得多 - Vue/Svelte 等框架的
.vue文件需额外配 Language Injection 或插件，Babel 默认只处理.js，这点极易漏掉
