Electron 开发工具

Electron 开发工具（2025 年最新推荐）

在 Electron 开发中，使用合适的工具可以大幅提升开发效率、调试便利性和打包体验。下面按类别推荐当前最流行、最实用的工具。

1. 代码编辑器 / IDE（强烈推荐）

• Visual Studio Code（VS Code）
  官方推荐，几乎所有 Electron 开发者都在用。
  推荐插件：
• ESLint / Prettier（代码格式化）
• Electron（官方扩展，提供调试配置模板）
• Debugger for Chrome（虽已过时，但仍可用）
• WebStorm（JetBrains）
  对 TypeScript 和大型项目支持更好，但付费。

2. 调试工具

• Chrome DevTools（内置）
  Electron 的渲染进程本质是 Chromium，直接在窗口右键 → “检查” 或 win.webContents.openDevTools() 打开。
  支持 Elements、Console、Network、Performance 等所有 Web 调试功能。
• 主进程调试
• 使用 VS Code 调试：
  在 .vscode/launch.json 添加配置：
  json { "name": "Debug Main Process", "type": "node", "request": "launch", "cwd": "${workspaceFolder}", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron", "windows": { "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd" }, "args": ["."], "outputCapture": "std" }
• 或命令行：electron --inspect=5858 . 然后 Chrome 访问 chrome://inspect
• Spectron（已弃用）→ 推荐替换为 Playwright 或 Electron-Vitest

3. 项目脚手架 / 构建工具（最重要）

工具	特点	推荐场景	安装命令
Electron Forge	官方推荐，全功能（打包、签名、自动更新、Squirrel/ASAR）	新项目首选	npm init electron-app@latest my-app
electron-builder	配置灵活，支持最多平台和格式（dmg、nsis、appx、snap）	需要自定义打包	npm install --save-dev electron-builder
Vite + electron-vite	现代前端（Vue/React/Svelte）热重载极快	集成 Vite 项目	npm create vite@latest 后加插件
electron-react-boilerplate	React + TypeScript + Webpack 完整模板	React 项目	GitHub 克隆
electron-vue	Vue 3 + Vite 模板	Vue 项目	GitHub 搜索最新版

4. 打包与发布工具

• electron-builder：支持自动更新（GitHub、S3）、代码签名、一键生成安装包。
• Electron Forge makers：内置 @electron-forge/maker-squirrel、maker-dmg 等。
• auto-updater：内置模块，配合 electron-builder 或 Forge 实现自动更新。

5. 测试工具

• Playwright：官方推荐，用于 E2E 测试（支持 Chromium 头等模式模拟 Electron）。
• Vitest + @vitest/ui：单元测试 + UI 测试。
• Electron-Monorepo-Tools：大型项目管理多个包。

6. 辅助工具

• Electron Fiddle：https://www.electronjs.org/fiddle
  在线快速实验 Electron 代码，无需本地环境。
• devtron（已弃用）→ 替代：直接用 DevTools。
• electron-log：简单日志管理。
• electron-store：轻量级配置存储（基于 JSON）。

推荐新手开发流程（2025 年最佳实践）

1. 用 Electron Forge 创建项目：

   npm create electron-app@latest my-app -- --template=vite-typescript
   cd my-app
   npm start

2. 用 VS Code 打开，安装推荐插件。
3. 开发时打开 DevTools 调试渲染进程。
4. 打包发布：

   npm run make   # Forge
   # 或
   npm run dist   # electron-builder

这些工具组合能让你从开发到发布全流程顺畅高效！如果你有特定需求（如 React 集成、自动更新配置、macOS 签名），告诉我，我可以给出详细配置示例～