Getting to the root of the problem: Debugging TypeScript projects with Visual Studio Code

Thomas Becker
Thomas Becker
September 29th, 2016

Although being relatively new Visual Studio Code has already gathered much attention since its publication in November 2015. At first glance you could believe that Visual Studio Code was just another iteration inside the Visual Studio family, but that is not the case. Visual Studio Code is a completely new phenomenon and does not have much in common with its namesakes, except for its actual name.

There are many good reasons for using TypeScript in a new project instead of JavaScript. To name just one advantage TypeScript allows you to structure code in classes. In this post I would like to address how to debug a TypeScript project with Visual Studio Code.

Why use Visual Studio Code?

Visual Studio Code can be used freely (under MIT-licence), it is open source, and runs on multiple platforms. All of this is quite remarkable for a product made by Microsoft, whose products are mostly proprietary, and for the most part only run on Windows.

Visual Studio Code has strong roots in the JavaScript world. It has built-in support for JavaScript, TypeScript and Node.js. The minimalist user interface of Visual Studio Code strongly resembles those of other editors sporting minimalist user interfaces, like Sublime Text or Atom.
From a technical point of view requirements put to a JavaScript editor are rather low – it only has to be able to edit plain text files. For that one could use the good old Notepad++. But if you want to develop complex JavaScript applications every assistance is most welcome. A selection of Visual Studio Code’s features are:

  • DebuggingAuto completion
  • Multi cursor editing
  • Split-screen editing
  • Git integration

On top of that, the editor can be extended with new functions via the connected extensions marketplace, and it is possible to write your own extension.


Developing TypeScript with Visual Studio Code

In order to properly use Visual Studio Code with TypeScript a TypeScript config-file (`tsconfig.json`) is an absolute must. It enables you to define options on how TypeScript should be transpiled to JavaScript. Also, a `tsconfig.json` in the root folder of a projects signals Visual Studio Code that it is a TypeScript project.

Just like any other modern code editor, Visual Studio Code offers suggestions to auto complete your code while writing. If you have installed the typing-definitions for the libraries/frameworks you are using, Visual Studio Code will offer auto completion for those as well.


If a function call does not match the given typing definition Visual Studio Code will produce a warning.



Before you can use the debugger in Visual Studio Code to its full extent you first need to configure your project to use SourceMaps.

When transpiling TypeScript to JavaScript the structure of the JavaScript file that is generated differs immensely from the original TypeScript file. So when executing the JavaScript file line by line the debugger needs a SourceMap in order to understand how it corresponds with the original TypeScript file. To generate a SourceMap while compiling you have to add a `”sourceMap”: true` entry under the `compilerOptions` within the `tsconfig.json` file.

Finally, you have to instruct the debugger to use SourceMaps by editing the debug task of Visual Studio Code and setting the option `sourceMaps` to `true`.


Breakpoints allow to pause the execution of a program at a specific line. This way you can inspect variables without a hurry, and it allows you to comprehend the program flow much better. You might want the program to pause only when a variable takes on a certain value. For that Visual Studio Code allows you to set a condition to the breakpoint itself.



In the example above the execution will only be paused if “” takes on the value “john.doe”.


In order to establish a stable code base in a JavaScript project unit tests are essential. If you already have a test environment up and running for your project it is possible to execute your unit tests from within Visual Studio Code.


In order to do that you need to tweak the launch configuration of Visual Studio Code. For the value `program` you need to enter the path to your testing program. For a NodeJS project that is to be tested with jasmine-node, the complete entry would be ` “program”: “${workspaceRoot}/node_modules/jasmine-node/bin/jasmine-node”`.

Now, if one of your test cases would fail, you could use the debugger of Visual Studio Code to get to the root of the problem.

Bottom line

I hope this gives you an insight into why I think Visual Studio Code is a good companion for TypeScript projects. With the debugger being integrated, the seamless integration of TypeScript and the Git-connection it is possible to cover a lot of working steps with a single application.

Finally, choosing the right editor for oneself is a very personal decision. If you have had a bad experience with Visual Studio products (or Microsoft products in general) it is understandable to want to avoid them all together. But I actually think anybody could benefit from giving this interesting new editor a try.

Want to know more about our services, products or our UX process?
We are looking forward to hearing from you.

Employee Experience Manager
+49 681 959 3110

Before sending your request, please confirm that we may contact you by clicking in the checkbox above.