WebStorm需手动配置ES6+支持并接入Babel：先在Settings中将JavaScript版本设为ES6或更高，再本地安装@babel/core/cli/preset-env，配置.babelrc或babel.config.json，最后正确设置File Watcher的Arguments和输出路径。
WebStorm 默认不自动启用 ES6+ 语法支持，也不自带 Babel 转码能力；必须手动配置 JavaScript 语言版本 + 安装并接入 Babel 工具链，否则 const、arrow function、class、import 等语法会标红报错，且修改后不会自动生成 ES5 兼容代码。
JavaScript 语言版本必须设为 ECMAScript 6 或更高
这是最基础但最容易被跳过的一步：仅装了 Babel，不改这个设置，WebStorm 仍按 ES5 解析代码，语法高亮、错误检查、自动补全全都不对。
- 路径：
File → Settings → Languages & Frameworks → JavaScript -
JavaScript language version下拉菜单选ECMAScript 6（或ECMAScript 2021等更高版本，取决于你实际用的特性） - 勾选
Prefer strict mode（推荐，避免隐式全局等老问题） - 改完点
Apply，无需重启，但已打开的 JS 文件可能需要手动重新加载
Babel CLI 和 preset 必须本地安装，不能只装全局
WebStorm 的 File Watcher 默认调用本地 node_modules/.bin/babel，如果只执行 npm install -g babel-cli，Watcher 很大概率找不到可执行文件，或版本错配导致转码失败（比如输出仍是 ES6）。
- 在项目根目录运行：
npm install --save-dev @babel/core @babel/cli @babel/preset-env - 不要用已废弃的
babel-preset-es2015，@babel/preset-env是当前标准，能按目标环境自动决定转哪些语法 - 确保
package.json中出现"@babel/core"、"@babel/cli"、"@babel/preset-env"三项（devDependencies）
.babelrc 或 babel.config.json 必须存在且内容正确
没有配置文件，Babel 就不知道该转什么——哪怕 CLI 跑通了，File Watcher 也会静默输出原样代码（比如 const a = () => {} 直接照抄进输出文件）。
- 在项目根目录新建
.babelrc（纯文本文件，无扩展名），内容为：
{"presets": ["@babel/preset-env"]}
- 或者用
babel.config.json（更推荐，支持更多配置项）：
{"presets": ["@babel/preset-env"]}
- 如果项目有特定目标浏览器（如只兼容 Chrome 80+），可在 preset 里加
targets，避免冗余转译
File Watcher 的 Arguments 必须显式指定 preset 和 source map
WebStorm 自带的 Babel Watcher 模板默认不带 --presets 参数，也不生成 source map，结果就是：文件变了，输出文件也生成了，但内容一模一样，调试时完全找不到对应关系。
- 路径：
Settings → Tools → File Watchers → + → Babel -
Program填：$ProjectFileDir$/node_modules/.bin/babel（Windows 下填$ProjectFileDir$/node_modules/.bin/babel.cmd） -
Arguments填：--source-maps --out-file $FileNameWithoutExtension$.es5.js --presets @babel/preset-env $FilePath$ -
Output paths to refresh填：$FileNameWithoutExtension$.es5.js:$FileNameWithoutExtension$.es5.js.map - 勾选
Auto-save edited files to trigger watcher和Trigger the watcher on external changes
真正容易被忽略的是：Babel 配置和 WebStorm 的 JavaScript 版本设置是两套独立系统。前者管「输出什么」，后者管「编辑时怎么理解」。哪怕 Babel 转码成功，如果 WebStorm 还卡在 ES5 模式，??=、?. 这类新语法依然会标红——不是代码错了，是你没告诉 IDE 它该认识这些符号。
