WebStorm对const、import报红是因为默认用ES5解析器，需将JavaScript language version设为ES6+；若存在jsconfig.json/tsconfig.json则以其中target为准；必须配置babel.config.json含@babel/preset-env，并在File Watcher中显式指定--presets等参数。
WebStorm 为什么对 const、import 报红？
不是代码错了，是 WebStorm 默认用 ES5 解析器读 JS 文件。哪怕你本地能跑通 node index.js，IDE 仍会标红——因为它的语法检查和补全不认 ES6+ 特性。
必须手动改 Settings：进入 File → Settings → Languages & Frameworks → JavaScript，把 JavaScript language version 设为 ECMAScript 6 或更高（如 ECMAScript 2021）。这步跳过，后面所有配置都白搭。
注意：jsconfig.json 或 tsconfig.json 若存在且含 "target" 字段，WebStorm 会优先读它，Settings 里的设置会被忽略。
babel.config.json 和 .babelrc 该选哪个？
选 babel.config.json。它支持更灵活的配置（比如按目录条件启用 preset），且是 Babel 官方当前推荐格式；.babelrc 已逐步被弃用，尤其在 monorepo 或有复杂路径结构时容易失效。
项目根目录下新建 babel.config.json，内容至少包含：
{"presets": ["@babel/preset-env"]}
常见错误：
- 文件名拼错（比如写成
babel.config.js或.babelrc.json） - 没装
@babel/preset-env，只装了旧版babel-preset-es2015（已废弃） - 配置里写
"presets": ["env"]—— 缺少@babel/前缀，Babel 找不到包
File Watcher 的 Arguments 怎么写才生效？
默认模板不带 --presets，也不生成 source map，结果就是：文件变了，输出文件也生成了，但内容和源码一模一样。
正确写法（一行，无换行）：
--presets @babel/preset-env --source-maps --out-file $FileNameWithoutExtension$-compiled.js $FilePath$
关键点：
-
--presets必须显式指定，不能依赖配置文件自动发现（Watcher 不读环境变量或全局配置） -
--source-maps要加，否则调试时看不到原始代码位置 -
$FileNameWithoutExtension$-compiled.js是输出文件名约定，避免覆盖原文件 -
Program字段必须指向本地路径：$ProjectFileDir$\node_modules\.bin\babel（macOS/Linux）或$ProjectFileDir$\node_modules\.bin\babel.cmd（Windows）
为什么装了 @babel/cli 还提示 “command not found”？
WebStorm 的 File Watcher 默认调用 node_modules/.bin/babel，它只认本地安装的二进制，不认全局安装的。
必须在项目根目录执行：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
验证是否装对：
- 打开
package.json，确认devDependencies里有这三项 - 运行
npx babel --version，应输出版本号（如7.26.0） - 检查
node_modules/.bin/下是否存在babel或babel.cmd
如果用了 pnpm 或 yarn，确保没有启用了 shamefully-hoist 类选项导致 bin 链接异常——这种问题不会报错，但 Watcher 就是静默失败。
