Cookies help us in providing our services. By using our services, you agree that we save Cookies. Learn more.

Close

Thinking Out of the Box

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.

Extensions

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.

Typings

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

Typings

SourceMaps

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

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.

Breakpoint

Breakpoint

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

Unit-Tests

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.

Testing

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.

Corporate Experience Manager
+49 681 959 3110
Contact form

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

    Science Park Saar, Saarbrücken

    South West Location

    Headquarter Saarbrücken
    Centigrade GmbH
    Science Park 2
    66123 Saarbrücken
    Germany
    Saarland
    On the map

    +49 681 959 3110

    +49 681 959 3119

  • Mülheim an der Ruhr

    Games Factory Mülheim an der Ruhr

    North West Location

    Office Mülheim
    Centigrade GmbH
    Kreuzstraße 1-3
    45468 Mülheim an der Ruhr
    Germany
    North Rhine-Westphalia
    On the map

    +49 208 883 672 89

    +49 681 959 3119

  • Haar · Munich

    Haar / München

    South Location

    Office Munich
    Centigrade GmbH
    Bahnhofstraße 18
    85540 Haar · Munich
    Germany
    Bavaria
    On the map

    +49 89 20 96 95 94

    +49 681 959 3119

  • Frankfurt am Main

    Frankfurt am Main

    Central Location

    Office Frankfurt
    Centigrade GmbH
    Kaiserstraße 61
    60329 Frankfurt am Main
    Germany
    Hesse
    On the map

    +49 69 241 827 91

    +49 681 959 3119