在 Visual Studio Code 中调试 Typescript 应用程序时的空电子窗口答案

【问题标题】：Empty Electron window when debugging Typescript app in Visual Studio Code在 Visual Studio Code 中调试 Typescript 应用程序时的空电子窗口
【发布时间】：2016-06-19 01:33:28
【问题描述】：

我正在尝试在 Visual Studio Code（vs code）中调试一个打字稿应用程序，它使用 Electron - 一个终端模拟器 Black-Screen。

我试图通过在 vs 代码中启动我的应用程序来做到这一点。我在主 Typescript 应用程序文件 src/main/Main.ts 中设置的断点按预期中断 & 我可以检查变量值。

Electron 也正在启动，但是黑屏应用程序没有在 Electron 中加载（我只看到一个空的 Electron 窗口）。请参阅空电子窗口的屏幕截图。

我可以使用 typescript-compiler (tsc) 转译应用程序并且不会产生错误，并且可以在我期望的文件夹 (src/bin/) 中看到已编译的 javascript。我也可以使用 npm ("npm start") 成功启动应用程序。

以下是相关的项目配置文件：

src/tsconfig.json

{
    "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noEmitOnError": true,
    "pretty": true,
    "jsx": "react",
    "sourceMap": true,
    "outDir": "bin"
  }
}

.vscode/tasks.json 文件笔记。在终端“tsc --project src”中执行等效命令会生成没有错误或警告的转译 js 代码。

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "showOutput": "silent",
    "args": ["--project", "src"],
    "problemMatcher": "$tsc"
}

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Black-Screen",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/src/main/Main.ts",
      "stopOnEntry": false,
      "cwd": "${workspaceRoot}",
      "sourceMaps": true,
      "externalConsole": false,
      "outDir": "${workspaceRoot}/src/bin",
      "runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/electron",
      // Optional arguments passed to the runtime executable.
      "runtimeArgs": ["--nolazy"],
      // Environment variables passed to the program.
      "env": {
         "NODE_ENV": "development"
      }
    }
  ]
}

注意。 launch.json 配置在调试控制台中生成命令行语句： /home/michael/development/black-screen/node_modules/electron-prebuilt/dist/electron --debug-brk=3323 --nolazy src/bin/main/Main.js.

查看调试控制台的屏幕截图。

希望有人遇到过类似的 vs code 和 Electron 问题并可以提供帮助：)

【问题讨论】：

标签： typescript visual-studio-code electron

【解决方案1】：

首先最好使用

"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron"

如果你在 Windows 或 OS X 上开发，你会遇到麻烦，因为你必须使用每个 env 的可执行文件。

也就是说，Electron 要求您的应用程序的 outDir 相对于 resources/app。 http://electron.atom.io/docs/tutorial/application-distribution/

【讨论】：