Typescript – Visual Studio Code breakpoints in typescript

breakpointsdebuggingsource-mapstypescriptvisual-studio-code

Using Visual Studio Code, when I set a breakpoint in my .ts file, it is not hit. (And is not red when I debug).

However, if I set a breakpoint in the compiled JS, then it swaps me to the ts file as I step through the code. And then any breakpoints in my .ts file start working.

Is there a way to get .ts file breakpoints to just work (without having to first set one in my compiled .js file?

NOTE: I looked at this question: Setting breakpoints in Typescript Jasmine tests with Visual Studio Code and it is exactly my issue. However the answer for that question was to upgrade to VS Code 0.10.9 and Typescript 1.8.2. I am on VS Code 1.8.1 and Typescript 2.1.4.

Best Answer

It's hard to know exactly what you need to change without seeing the particularities of your setup. That said, here are some ideas for you and a demo project. There is also a good conversation in this GitHub issue. The following is a minimal TypeScript project setup that works on my machine.

.vscode/launch.json Set the program, prelaunchTask, outFiles, and sourceMaps properties. 

{
    "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 Tell Visual Studio Code to use the TypeScript version that we've installed in our node_modules instead of using the global installation of TypeScript. 

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

.vscode/tasks.json Define the tsc -p . shell command, which is the prelaunchTask that we defined in launch.json.

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

index.ts

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

package.json Install TypeScript locally, to give us more control over the version that we use.

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

tsconfig.json Tell the compiler to generate source maps.

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