打字稿中的Visual Studio Code断点

Question

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

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

有没有一种方法可以使.ts文件断点正常工作（而不必首先在编译的.js文件中设置一个？

注意：我看了这个问题：使用Visual Studio Code在Typescript Jasmine测试中设置断点，这正是我的问题。但是，该问题的答案是升级到VS Code 0.10.9和Typescript 1.8.2。我正在使用VS Code 1.8.1和Typescript 2.1.4。

Answer 1

如果不了解设置的特殊性，就很难确切地知道需要更改什么。也就是说，这里有一些给您的想法和一个演示项目。这个GitHub问题中也有一个很好的对话。以下是在我的机器上运行的最小 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 使用我们安装的 TypeScript 版本，node_modules而不是使用全局安装的 TypeScript。

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

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

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

索引.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
    }
}