使用 Visual Studio Code 和单独的输出文件夹调试 Typescript答案

【问题标题】：Debugging Typescript with Visual Studio Code and separate output folder使用 Visual Studio Code 和单独的输出文件夹调试 Typescript
【发布时间】：2017-02-24 06:28:14
【问题描述】：

如何在仍然能够调试代码的同时将 typescript 代码编译到不同的文件夹？

假设我想在文件myapp.ts 中的第一个console.log 上设置断点：

class HelloTS {
    public static main(): number {
        console.log('Hello TS');

        console.log("about to exit now")
        return 0;
    }
}

HelloTS.main();

还有以下tsconfig.json：

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

只要myapp.ts、myapp.js 和myapp.js.map 在同一个文件夹中，断点就可以正常工作。

但是，当我为源 (src/) 和输出 (dist/) 创建单独的文件夹时，断点不起作用并且也不会引发任何错误。

我有以下配置，编译成功，但无法提供调试。

.vscode/tasks.json:

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": [
        "-p", ".", 
        "--rootDir", "src/", 
        "--outDir", "dist/"    
    ],
    "showOutput": "silent",
    "echoCommand": true,
    "problemMatcher": "$tsc"
}

.vscode/launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/myapp.ts",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "console": "internalConsole",
            "sourceMaps": true,
            "outFiles": [
                "**/*.js",
                "**/*.js.map"
            ]
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": true,
            "outFiles": [],
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        },
        {
            "name": "Attach to Process",
            "type": "node",
            "request": "attach",
            "processId": "${command.PickProcess}",
            "port": 5858,
            "sourceMaps": true,
            "outFiles": []
        }
    ]
}

【问题讨论】：

标签： debugging typescript visual-studio-code breakpoints

【解决方案1】：

我认为launch.json 中的outFiles 属性应该是：

{
  ...

  "outFiles": [ "${workspaceRoot}/dist/**/*" ]

  ...
},

【讨论】：