Visual Studio Code 无法正确执行 TypeScript 代码

Question

我正在尝试将 Visual Studio Code 配置为使用 TypeScript（在 Node 包中），我也在使用ts-jest/Jest来创建测试，此外，我还安装了 Jest 扩展。

我已经能够弄清楚如何使断点工作，但现在我注意到我无法正确地介入我的代码，我什至不能 100% 确定断点工作完美。

单击 step 按钮时，将恢复执行，并且不会在下一行再次停止，唯一让它停止的方法是在我想要的位置放置其他断点。代码会在断点设置为 AFAICT 的正确位置停止。

编辑：实际上，步进有时会再次停止，但似乎是来自实现的 js 代码（例如，console.log 步骤到与日志相关的代码，但永远不会再次踩到我的代码）

编辑#2：通过尝试使用更简单的项目重现问题，我意识到不再导入我正在使用的库（Phaser）修复了问题，我希望这可以帮助隔离问题的原因。

编辑 #3：这是一个链接，可以重现我正在谈论的问题：https : //github.com/adtrevor/VSCodeDebugIssue 如果要测试它，只需克隆它，npm install然后启动“调试玩笑测试”运行/调试面板中的任务。设置断点line 23的hey.ts（第一指令barFunction()），调试器将停在那里，但如果你在执行代码，你应该注意到，在某些时候你离开当前范围（执行后console.log("B")，再也不会回到它在我的情况）。

编辑 #4：这是一个更完整的示例，显示了https://github.com/adtrevor/TSVSCodeSOQuestion/问题。如果您克隆它，安装依赖项，并在 ChunkManager.ts 的第 156 行设置断点，您会注意到即使我应用了@GiacomoDeLiberali 的更改，步进也无法正常运行。不过，也许这个错误是相关的。

我完全不知道配置有什么问题，也不知道首先要看哪里，因为我没有关于调试的其他错误消息。这是我的配置文件的内容：

启动文件

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Jest Tests",
      "cwd": "${workspaceFolder}",
      "args": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/.bin/jest",
        "--runInBand",
        "--config",
        "${workspaceRoot}/jest.config.js"
      ],
      "windows": {
        "args": [
          "--inspect-brk",
          "${workspaceRoot}/node_modules/jest/bin/jest.js",
          "--runInBand",
          "--config",
          "${workspaceRoot}/jest.config.json"          
        ],
      },
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
    },
  ]
}

设置.json

{
    "editor.fontSize": 14,
    "workbench.colorTheme": "Default Light+",
    "window.autoDetectColorScheme": true,
    "debug.node.autoAttach": "off",
    "jest.pathToConfig": "./jest.config.js",
}

jest.config.json

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
  rootDir: './src/'
};

配置文件

{
    "compilerOptions": {
        "target": "es6",
        "module": "CommonJS",
        "strict": true,
        "noImplicitAny": true,
        "allowJs": true,
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": "./src",
        "noEmit": false,
        "outDir": "./build/",

        "paths": {
          "~/*": ["./*"]
        },
        "typeRoots": [
            "node_modules/@types",
            "node_module/phaser/types"
        ],
        "types": [
            "phaser",
            "jest"
        ]
    },
    "include": [
        "src/**/*"
    ]
}

最后是我的 Package.json：

{
    "name": "mypackagename",
    "description": "Client for the game",
    "version": "0.1.0",
    "dependencies": {
        "phaser": "^3.22.0",
        "tslib": "^1.11.1"
    },
    "devDependencies": {
        "@types/jest": "^25.2.1",
        "bufferutil": "^4.0.1",
        "canvas": "^2.6.1",
        "jest": "^25.2.7",
        "ts-jest": "^25.3.1",
        "typescript": "^3.8.3",
        "utf-8-validate": "^5.0.2"
    }
}

你看到这个配置有什么不寻常的地方吗？一般来说，这种行为的原因是什么？

Answer 1

我已经克隆了您发布的 repo，这是 VS Code的一个已知问题。

尝试在您的launch.json:

      "smartStep": true, 
      "skipFiles": [
        "<node_internals>/**",
        "node_modules/**"
      ]

smartStep：自动单步执行无法映射回原始源的生成代码。

skipFiles：调试时要跳过的文件的全局模式数组。

我创建了一个pull-request。