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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了可以将Visual Studio代码配置为启动电子相关的知识,希望对你有一定的参考价值。

由于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

当前最高评价的答案有点过时了。

以下是两个预先配置的项目:https://github.com/octref/vscode-electron-debug

这是第一个项目的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",

以上是关于可以将Visual Studio代码配置为启动电子的主要内容,如果未能解决你的问题,请参考以下文章

是否可以将 Visual Studio 配置为每次从其中一个项目打开文件时不更改启动项目?

使用 Visual Studio Code 的 Mocha 断点

Visual Studio:设置默认启动项目

是否可以在不重新启动 Visual Studio 的情况下同时编译 32 位和 64 位配置?

如何使用适用于 macOS 的 Visual Studio 代码为外部 Mac 应用商店签署和公证电子应用程序构建?

Visual Studio Code 的 launch.json 解析