可以将Visual Studio代码配置为启动电子

Posted 2021-05-03

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

此外，由于Electron基于io.js，它本身基于Node.js，我想也许......它可以完成，但还没有找到魔法。

沿着这些方向试了一下...来自launch.json的片段：

"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，但失败了（窗口消失得太快，无法确切地看到原因）。

有什么想法吗？

答案

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

{
    "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文件夹中。

另一答案

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

使用node可以调试Electron的Main过程，但是使用Debugger for Chrome你也可以调试Electron的渲染过程。我写了一篇关于这个主题的博客文章：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。要运行目标“Debug Renderer Process”，您需要安装Debugger for Chrome。但是“Debug Main Process”在vanilla 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}"
    }
  ]
}

另一答案

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

另一答案

在OSX上，电子的路径是

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