如何在WebStorm 2020.2及以上版本配置Electron类型提示与代码补全

Electron 官方已内置完整的类型定义，无需安装已废弃的@types/electron包，你本地已有的electron.d.ts可直接使用，按以下步骤操作即可：

• 第一步：确认依赖安装正常
  确保 Electron 已通过项目本地的包管理器安装到node_modules目录，不要使用全局安装的 Electron 包。
• 第二步：配置 JavaScript 库识别
  1. 打开设置路径：File > Settings > Languages & Frameworks > JavaScript > Libraries
  2. 点击「Add」按钮新增自定义库：
     • Name 字段填写Electron Built-in Types
     • Framework type 保持默认Custom即可
     • Visibility 选择Project，仅对当前项目生效
     • 点击「+」号选择「Attach Files...」，找到项目下的node_modules/electron/electron.d.ts文件添加
     • Type 保持Debug即可，无需切换为Release
  3. 勾选刚创建的 Electron 库，点击「Apply」保存设置
• 第三步：清除缓存重启IDE
  执行File > Invalidate Caches...，勾选「Clear file system cache and local history」，点击「Invalidate and Restart」，等待IDE重启并完成索引后即可正常识别Electron的类型、函数和代码补全。
• 问题排查：如果配置后仍不生效，检查两项配置：
  • 确认 JavaScript 语言版本设置：路径File > Settings > Languages & Frameworks > JavaScript，将 JavaScript language version 调整为ES6+及以上版本
  • 确认内置 TypeScript 插件处于启用状态：路径File > Settings > Plugins，检查 TypeScript 插件未被禁用，WebStorm 识别.d.ts 类型定义依赖该插件。

内容的提问来源于stack exchange，提问作者Andrew