How to debug typescript files in Visual Studio code

Question

using version 0.3 of the studio's visual 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 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 works fine for me:

Project distribution

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

The idea is to compile typescript in the src folder and put it in the bin folder.

tsconfig.json

This is important for the active sourceMap parameter.

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

launch.json

==== EDIT ====

This is the configuration I'm using in 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 that the preLaunchTask key preLaunchTask extremely useful if you use any task runner like gulp , since the IDE can detect its tasks by name.

Launch

• Compile ts (type rm -r bin/ ; tsc into the terminal or by compiling)
• In visual code playback, Launch type (our configuration name)
• Enjoy it!

Answer 2

I think it has become simpler and easier compared to releases ...

I installed ts-node , so my configuration files are ultimately very simple ...

launch.json

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

Two things worth noting:

• runtimeArgs - passed to the node to register the ts node for processing TypeScript files.
• no program property. The TS file name to run is set as the first argument.

Thus, you do not need to compile TS in JS, you can even have modules written in TS that are not compiled in JS yet.

Answer 3

This is what works for me with the latest TS and VsCode as of November 2017.

The following configuration will help you start the server and debug TS inside VS Code

Here 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 here is what my directory structure looks like:

If you pay attention, you will see that my src folder and assembly (containing the resulting transferred JS and map files) live side by side, which really helps me maintain the logical directory structure.

Ok, now the launch version appears:

 { "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 any preLaunchTask you want to use, or even skip it. If you miss it, you will have to translate TS to JS manually.

This is what I do in my nb-tsc-watch task

 { "label": "nb-tsc-watch", "type": "typescript", "tsconfig": "backend/src/tsconfig.json", "option": "watch", "problemMatcher": [ "$tsc-watch" ] } 

Answer 4

For a later version of VSCode from February / 2017, this is what worked for me (this is a combination of what @manu and @tommy Falgout provide):

It is assumed that your json out files are in the dest folder and the source in the 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" ] } 

Answer 5

The following are Mocha tests with breakpoints. It works by sending src to the lib directory, and then runs the tests in lib using sourceMapping back to src.

.vscode / launch.json

 { "type": "node", "request": "launch", "preLaunchTask": "tsc", "name": "Run Mocha", "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha", "args": ["lib/**/*.js"], "cwd": "${workspaceRoot}", "sourceMaps": true, "outFiles": ["${workspaceRoot}/lib/**/*.js"] } 

tsconfig.json

 { "compilerOptions": { "module": "commonjs", "sourceMap": true, "outDir": "lib", "target": "es6" }, "include": [ "src/**/*.ts" ], "exclude": [ "node_modules" ] } 

.vscode / tasks.json

 { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0", "command": "tsc", "isShellCommand": true, "args": ["-p", "."], "showOutput": "silent", "problemMatcher": "$tsc" } 

package.json to show installed modules. Scripts are not related to debugging.

 "scripts": { "test": "mocha --compilers ts:ts-node/register src/**/*.spec.ts", "test:coverage": "nyc -e '.ts' npm test" }, "dependencies": { "@types/chai": "^3.4.35", "@types/mocha": "^2.2.39", "@types/node": "^7.0.5", "@types/sinon": "^1.16.35", "chai": "^3.5.0", "mocha": "^3.2.0", "nyc": "^10.1.2", "sinon": "^1.17.7", "ts-node": "^2.1.0", "typescript": "^2.2.1" } 

• Mac OSX 10.12.3 Sierra
• Visual Studio Code 1.10.1
• NodeJS v7.7.1

Answer 6

@Manu's answer pointed me in the right direction; however, with the latest version of VSCode, I still had the same problem. This is the fix that worked for me:

https://github.com/Microsoft/vscode/issues/13499

 "outFiles": [ "${workspaceRoot}/js/*.js" ] 

Answer 7

2017/12/17
.vscode / launch.json `` `` JSON

 { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "program": "${workspaceRoot}/src/index.ts", "outFiles": [ "${workspaceRoot}/dist/index.js" ], "sourceMaps": true, "stopOnEntry": false, "args": [], "cwd": "${workspaceRoot}", "env": { "NODE_ENV": "development" }, "console": "internalConsole", "preLaunchTask": "compile", "name": "DEBUG" }, { "type": "node", "request": "attach", "name": "Attach to Process", "port": 5858 } ] } 

.vscode / tasks.json

 { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "compile", "type": "typescript", "tsconfig": "tsconfig.json", "problemMatcher": [ "$tsc" ], "group": { "kind": "build", "isDefault": true } } ] } 

tsconfig.json

 { "compilerOptions": { "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "moduleResolution": "node", "target": "es5", "module": "commonjs", "sourceMap": true, "outDir": "dist", "rootDir": "src" }, "include": [ "**/*.ts" ], "exclude": [ "node_modules" ] } 

Answer 8

I just wrote my own PowerShell function as preLaunchTask. This may be a worse solution than the previous ones, but it can add additional flexibility to enter an additional task in the preLaunchTask field. Since it currently does not support an array and allows you to run only one task before starting.

launch.json

 { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Node.js", "program": "${file}", "preLaunchTask": "RebuildTypeScript", "outFiles": [ "${workspaceRoot}/js/**/*.js" ] } ] } 

tasks.json

 { "version": "2.0.0", "tasks": [ { "type": "typescript", "tsconfig": "tsconfig.json", "group": { "kind": "build", "isDefault": true } }, { "taskName": "RebuildTypeScript", "type": "shell", "command": "Powershell ./RebuildTypeScript.ps1", "group": "none", "presentation": { "reveal": "never" } } ] } 

RebuildTypeScript.ps1

 $currentDir = Split-Path -Path $MyInvocation.MyCommand.Definition -Parent function CompileTypeScriptFiles($folder) { $tsFiles = Get-ChildItem $folder -Filter "*.ts" -Recurse $tsFiles | ForEach-Object { $tsFile = $_.FullName; $options = $tsFile + " --outDir js --sourceMap" Start-Process "tsc" $options } } CompileTypeScriptFiles $currentDir