Visual Studio Code breakpoints in typescript

Question

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.

Beadle

Did you enable sourceMap on tsconfig.json? – Hagan

@Hagan - Yes. And they seem to be working to some degree. Or else the breakpoint I put the JavaScript file would not be able to swap me back to the Typescript file. – Beadle

I think I'm having the same issue. I suggest creating a simple project and try to replicate your issue. FYI There's a ' trace: "all" ' option you can add to your launch config (it's in the docs but doesn't show up in the intellisense), which helped me a little. My issue appears to be a bug in vsc regarding TS files in sub-directories. I've raised an issue here for it. – Malley

And after further investigations the issue for me was in the gulp generated source maps. Lots of people having similar issues as mentioned here. – Malley

Answer 1

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
    }
}

Horselaugh

isShellCommand is deprecated. Didn't help me. Breakpoints in the same function are hit, but breakpoints deeper in don't get hit. – Silviasilviculture

Also, make sure the model you are trying to use is ran and/or compiled by typescript. – Goofy