提升Electron开发效率的VSCode插件配置调试指南-VSCode-PHP中文网

electron双进程调试必须分主进程与渲染进程独立配置：主进程用node类型+runtimeexecutable指向本地electron二进制+args["."]，渲染进程依赖webcontents.opendevtools()并配合chrome://inspect手动连接，二者协议不同、不可混用。

提升electron开发效率的vscode插件配置调试指南

Electron双进程调试不能靠一个配置打天下，主进程和渲染进程必须分开配、分开调，否则断点根本不会停。

主进程调试：`launch.json` 里必须用 `node` 类型 + `runtimeExecutable`

VS Code 默认的 Node 调试器不认 Electron 主进程，得手动指定执行入口。常见错误是直接用 program 指向 main.js，结果启动失败或断点失效。

type 必须设为 "node"（不是 "electron" 或 "pwa-node"）
runtimeExecutable 要指向本地安装的 Electron 可执行文件："${workspaceFolder}/node_modules/.bin/electron"（Windows 下用 .cmd 后缀）
args 里传 "." 表示当前目录为 Electron 应用根路径，别漏掉
如果项目用 TypeScript，sourceMaps 必须设为 true，且 tsconfig.json 中 "sourceMap": true 也要开启

典型配置片段：

{
  "name": "Electron: Main",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
  "args": ["."],
  "console": "integratedTerminal",
  "sourceMaps": true,
  "outFiles": ["${workspaceFolder}/dist-electron/**/*.js"]
}

渲染进程调试：靠 `webContents.openDevTools()` + Chrome `chrome://inspect`

VS Code 本身不直接调试渲染进程 JS，得走 Chromium 的 DevTools 协议。硬配 launch.json 试图“调试 renderer”基本会失败。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

在主进程创建 BrowserWindow 后，立刻调用 mainWindow.webContents.openDevTools({ mode: 'right' })
启动时加 --inspect=9229 参数（如 npm start -- --inspect=9229），然后访问 chrome://inspect 连接目标
不要依赖 Debugger for Chrome 插件自动发现——Electron 渲染进程常不在默认扫描列表里，得手动 Configure 添加 localhost:9229
若用 Vite 开发服务器（如 electron-vite-react），确保 vite.config.ts 中 server.hmr.overlay 未禁用，否则热更新报错不显示

ESLint + Prettier 冲突必须关掉重复规则

ESLint 报 prettier/prettier 错误，或者保存后格式乱套，八成是规则打架了。Prettier 不是 ESLint 插件，它只管格式；ESLint 的 rules 里若还留着缩进、引号、分号等检查，必然冲突。

装 eslint-config-prettier，并在 .eslintrc.js 的 extends 末尾加上它
删掉所有和格式相关的 ESLint 规则，比如 indent、quotes、semi
.prettierrc 里明确写 "semi": false，对应 ESLint 就不能留 "semi": ["error", "always"]
VS Code 设置里打开 editor.formatOnSave，但关掉 editor.codeActionsOnSave 里的 source.fixAll.eslint，避免保存时两次格式化

`jsconfig.json` 别漏配 `paths` 别名，否则 Path Intellisense 不工作

写了 @/components/Button 却没有路径提示？不是插件坏了，是 VS Code 根本不知道 @ 指哪。TypeScript 项目用 tsconfig.json，JS 项目就得靠 jsconfig.json 告诉编辑器别名映射。

必须放在项目根目录，不能放在 src 或 electron 子目录下
baseUrl 设为 "."，paths 用数组（不是单个字符串）： "@/*": ["src/*"]
改完要重启 VS Code 窗口，仅重载窗口不够，IntelliSense 缓存不会自动刷新
如果用了 Vite，还要在 vite.config.ts 的 resolve.alias 里同步配一遍，否则运行时报 Cannot find module