可以将 Visual Studio Code 配置为启动电子吗

Question

由于 Visual Studio Code 是使用 Electron 创建的，我猜测可能将 launch.json 配置为使用 Electron 正确启动应用程序。但我还没想好怎么做。

另外，由于 Electron 是基于 io.js，它本身基于 Node.js，我想也许……可以做到，但还没有找到魔力。

尝试了这些方面的东西...来自launch.json的sn-p：

"configurations": [
    {
        // Name of configuration; appears in the launch configuration drop down menu.
        "name": "Launch Electron",
        // Type of configuration. Possible values: "node", "mono".
        "type": "node",
        // Workspace relative or absolute path to the program.
        "program": "Y:\\dev\\electron\\electron.exe",
        // Automatically stop program after launch.
        "stopOnEntry": false,
        // Command line arguments passed to the program.
        "args": ["CrawlSpace_Electron\\"],
        // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
        "cwd": ".",
        // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
        "runtimeExecutable": null,
        // Environment variables passed to the program.
        "env": { }
    }, 

它确实启动了 Electron，但是失败了（窗口消失得太快，看不出确切的原因）。

有什么想法吗？

Answer 1

如果您将 electron.exe 指定为 runtimeExecutable（如前所述），您可以将 main.js 文件作为程序传递，它会工作。 Electron 允许您指定 main.js 文件的目录 OR，因为这几乎就是 package.json 所指向的目录。在我的 launch.json 文件中使用下面的配置，按 F5 既可以使用我的应用程序启动 Electron，也可以将调试器连接到主进程（最终）...

{
    "name": "Launch Electron",
    "type": "node",
    "program": "${workspaceRoot}/app/main.js", // ensure this is path to main.js file
    "stopOnEntry": false,
    "args": [], 
    "cwd": "${workspaceRoot}",
    // as you have noted, this is also important:
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
}, 

我的 main.js 文件位于我通常会传递给 Electron 的 app 文件夹中。

Answer 2

是的，它可以。 VSCode 不仅可以启动 Electron，还可以调试它。

使用node 可以调试Electron 的Main 进程，但使用Debugger for Chrome 也可以调试Electron 的Renderer 进程。我写了一篇关于这个主题的博文：http://code.matsu.io/1。

当前投票最高的答案有点过时了。

• 您应该使用electron 而不是electron-prebuilt。见http://electron.atom.io/blog/2016/08/16/npm-install-electron
• 你应该使用node_modules/.bin/electron来启动electron
• 在 Windows 上是 electron.cmd，而不是 electron.exe。

这里有两个预配置的项目：https://github.com/octref/vscode-electron-debug。

• 一个配置为运行electron/electron-quick-start
• 从electron/electron-quick-start 修改为使用 ES6 & Babel & Webpack。

这是第一个项目的launch.json。要运行目标“调试渲染器进程”，您需要安装Debugger for Chrome。但是“调试主进程”在原版 VSCode 上运行良好。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      // Use the following for Windows
      // "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
      "program": "${workspaceRoot}/main.js"
    },
    {
      "name": "Debug Renderer Process",
      "type": "chrome",
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      // Use the following for Windows
      // "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
      "runtimeArgs": [
        "${workspaceRoot}/main.js",
        "--remote-debugging-port=9222"
      ],
      "webRoot": "${workspaceRoot}"
    }
  ]
}

Answer 3

理论上，以下应该有效： 将 electron.exe 指定为“runtimeExecutable”（因为它替换了节点运行时）。电子程序（“CrawlSpace_Electron”）成为“程序”。 VSCode 自动将“--debug-brk”或“--debug”传递给 electron.exe。 实际上，VSCode 还不支持这种设置，因为 VSCode 的预览版会尝试验证“程序”属性是否是存在于磁盘上的文件。但是对于电子，“程序”必须是一个目录。 我在我们这边创建了一个错误，并将确保在下一个版本中修复它。

Answer 4

我知道这只是 1 个链接，但这是每个人都需要的答案...

https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributes

以下是为 launch.json 记录的属性。不确定该列表当前是否完整，但至少应该有所帮助...

Answer 5

在 OSX 上，电子的路径是

"runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/Electron.app/Contents/MacOS/Electron",