how to debug typescript files in visual studio code
For the more later version of VSCode as of Feb/2017, this is what worked for me (it's a combination of what both @manu and @tommy Falgout have provide):
It assumes that your json out files are in a dest folder and your source in a src folder, respectively
/.vscode/launch.json
{
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "Launch",
"sourceMaps": true,
"stopOnEntry": true,
"console": "internalConsole",
"cwd": "${workspaceRoot}",
"program": "${workspaceRoot}/src/main.ts",
"outFiles": ["${workspaceRoot}/dest/*.js"]
},
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"port": 5858,
"outFiles": []
}
]
}
tsconfig.json
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"module": "commonjs",
"outDir": "dest",
"rootDir": "src"
},
"exclude": [
"node_modules"
]
}
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
- Compile your
ts
(typing in a terminalrm -r bin/ ; tsc
or executing your compiling task) - In visual Code play
Launch type
(our configuration name) - Enjoy!
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.
This is what has been working for me with latest TS and VsCode as of November,2017
Following configuration will help you start the server and debug TS inside VS Code
This is what my tsconfig.json looks like:
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2017", "dom"],
"module": "commonjs",
"moduleResolution": "node",
"outDir": "../build",
"sourceMap": true,
"target": "es2016",
"typeRoots": [
"../node_modules/@types"
]
},
"include": [
"**/*.ts"
],
"exclude": [
"../node_modules",
"../*.js"
]
}
And this is what my directory structure looks like:
If you pay attention you would see my src folder and build folder(containing resultant transpiled JS and map files) lives side by side which really helps me maintain a logical directory structure.
Ok, now comes the launch config:
{
"type": "node",
"request": "launch",
"name": "Start and Debug",
"preLaunchTask": "nb-tsc-watch",
"timeout": 10000,
"program": "${workspaceFolder}/backend/src/app.ts",
"restart": true,
"cwd": "${workspaceRoot}",
"outFiles": [
"${workspaceFolder}/backend//build/**/*.js"
],
"sourceMaps": true
}
You can use whatever preLaunchTask you want to use, or even skip it. If you skip it, you would have to transpile TS to JS manually.
This is what I do in my task nb-tsc-watch
{
"label": "nb-tsc-watch",
"type": "typescript",
"tsconfig": "backend/src/tsconfig.json",
"option": "watch",
"problemMatcher": [
"$tsc-watch"
]
}