打字稿中的 Visual Studio Code 断点

Question

使用 Visual Studio Code，当我在 .ts 文件中设置断点时，它没有被命中。 （并且在我调试时不是红色的）。

但是，如果我在编译后的 JS 中设置断点，那么它会在我逐步执行代码时将我切换到 ts 文件。然后我的 .ts 文件中的所有断点开始工作。

有没有办法让 .ts 文件断点正常工作（无需先在我编译的 .js 文件中设置一个？

注意：我查看了这个问题：Setting breakpoints in Typescript Jasmine tests with Visual Studio Code，这正是我的问题。然而，这个问题的答案是升级到 VS Code 0.10.9 和 Typescript 1.8.2。我正在使用 VS Code 1.8.1 和 Typescript 2.1.4。

Answer 1

如果不了解设置的特殊性，就很难确切知道需要更改什么。也就是说，这里有一些想法给你and a demo project. 还有一个很好的对话in this GitHub issue. 以下是在我的机器上工作的最小 TypeScript 项目设置。

.vscode/launch.json 设置program、prelaunchTask、outFiles 和sourceMaps 属性。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/index.ts",
            "cwd": "${workspaceRoot}",
            "preLaunchTask": "tsc",
            "outFiles": [
                "${workspaceRoot}/**/*.js"
            ],
            "sourceMaps": true
        }
    ]
}

.vscode/settings.json 告诉 Visual Studio Code 使用我们在 node_modules 中安装的 TypeScript 版本，而不是使用全局安装的 TypeScript。

{
    "typescript.tsdk": "./node_modules/typescript/lib"
}

.vscode/tasks.json 定义tsc -p . shell 命令，也就是我们在launch.json中定义的prelaunchTask。

{
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."]
}

index.ts

console.log('foo');
console.log('bar'); // a breakpoint here gets hit.

package.json 在本地安装 TypeScript，让我们更好地控制我们使用的版本。

{
  "devDependencies": {
    "typescript": "^2.1.4"
  }
}

tsconfig.json告诉编译器生成源映射。

{
    "compilerOptions": {
        "target": "es5",
        "sourceMap": true
    }
}