how to debug typescript files in visual studio code

Question

using version 0.3 of visual studio code and I'm not sure how to enable sourcemaps and debug the ts file

I get the following error can't launch program '/Projects/app-server/server.ts'; enabling source maps might help

how do I enable sourcemaps and typescript debugging. Sourcemap is set to true in my

tsconfig.json

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

launch.json

{     "version": "0.1.0",     // List of configurations. Add new configurations or edit existing ones.       // ONLY "node" and "mono" are supported, change "type" to switch.     "configurations": [         {             // Name of configuration; appears in the launch configuration drop down menu.             "name": "Launch server.ts",             // Type of configuration. Possible values: "node", "mono".             "type": "node",             // Workspace relative or absolute path to the program.             "program": "server.ts",             // Automatically stop program after launch.             "stopOnEntry": true,             // Command line arguments passed to the program.             "args": [],             // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.             "cwd": ".",             // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.             "runtimeExecutable": null,             // Environment variables passed to the program.             "env": { }         },          {             "name": "Attach",             "type": "node",             // TCP/IP address. Default is "localhost".             "address": "localhost",             // Port to attach to.             "port": 5858         }     ] } 

Answer 1

This configuration is working fine for me:

Project distribution

|-- .vscode     |----- launch.json |-- bin     |----- app.js     |----- app.js.map |-- src     |----- app.ts |-- node_modules     |-- [..] |-- tsconfig.json |-- [...] 

The idea is compile the typescript under src folder and place it under bin folder.

tsconfig.json

It's important to active sourceMap option.

{     "compilerOptions": {         "emitDecoratorMetadata": true,         "module": "commonjs",         "target": "ES5",         "outDir": "bin",         "rootDir": "src",         "sourceMap": true     } } 

launch.json

==== EDIT ====

This is the configuration I'm currently using at Visual Studio Code v1:

{     "version": "0.2.0",     "configurations": [         {             "args": [],             "cwd": "${workspaceRoot}",             "env": {                 "NODE_ENV": "development"             },             "externalConsole": false,             "name": "DEBUG",             "outDir": "${workspaceRoot}/bin",             "preLaunchTask": "compile",             "program": "${workspaceRoot}/src/app.ts",             "request": "launch",             "runtimeArgs": [                 "--nolazy"             ],             "runtimeExecutable": null,             "sourceMaps": true,             "stopOnEntry": false,             "type": "node"         },         {             "name": "Attach",             "type": "node",             "request": "attach",             "port": 5858         }     ] } 

Note the key preLaunchTask is extremely helpful if you're using any task runner as gulp because the IDE is able to detect its tasks by name.

Running

1. Compile your ts (typing in a terminal rm -r bin/ ; tsc or executing your compiling task)
2. In visual Code play Launch type (our configuration name)
3. Enjoy!

Answer 2

I think it got simpler and simpler over the releases...

I have installed ts-node (https://github.com/TypeStrong/ts-node), so my config files end up very simple.

Install ts-node with npm install ts-node --save-dev in the project folder - thanks to Hrafnkell in the comments

launch.json

{         "name": "Launch index.ts",         "type": "node",         "request": "launch",         "runtimeArgs": [             "-r",             "ts-node/register"         ],         "args": [             "${workspaceFolder}/src/index.ts"         ] } 

There are two things worth noting:

• runtimeArgs - passed to node to register the ts-node to handle the TypeScript files.
• there is no program property. The name of TS file to start is given as first argument instead.

That way you do not need to compile the TS to JS, you can even have modules written in TS not compiled to JS yet.