{"id":7207,"date":"2016-09-29T17:03:45","date_gmt":"2016-09-29T15:03:45","guid":{"rendered":"http:\/\/www.centigrade.de\/blog\/en\/?p=7207"},"modified":"2020-01-25T19:35:18","modified_gmt":"2020-01-25T18:35:18","slug":"getting-to-the-root-of-the-problem-debugging-typescript-projects-with-visual-studio-code","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/en\/blog\/getting-to-the-root-of-the-problem-debugging-typescript-projects-with-visual-studio-code\/","title":{"rendered":"Getting to the root of the problem: Debugging TypeScript projects with Visual Studio Code"},"content":{"rendered":"<p>Although being relatively new Visual Studio Code has already gathered much attention since its publication in <a href=\"http:\/\/www.golem.de\/news\/microsoft-visual-studio-code-wird-open-source-1511-117511.html\" target=\"_blank\" rel=\"noopener noreferrer\">November 2015.<\/a> 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.<\/p>\n<p>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\u00a0Visual Studio Code.<\/p>\n<p><!--more--><\/p>\n<h3>Why use Visual Studio Code?<\/h3>\n<p>Visual Studio Code can be <a href=\"https:\/\/code.visualstudio.com\/Download\" target=\"_blank\" rel=\"noopener noreferrer\">used freely<\/a> (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.<\/p>\n<p>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 <a href=\"https:\/\/www.sublimetext.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sublime Text<\/a> or <a href=\"https:\/\/atom.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Atom.<\/a><br \/>\nFrom a technical point of view requirements put to a JavaScript editor are rather low \u2013 it only has to be able to edit plain text files. For that one could use the good old <a href=\"https:\/\/notepad-plus-plus.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Notepad++<\/a>. But if you want to develop complex JavaScript applications every assistance is most welcome. A selection of Visual Studio Code\u2019s features are:<\/p>\n<ul>\n<li>DebuggingAuto completion<\/li>\n<li>Multi cursor editing<\/li>\n<li>Split-screen editing<\/li>\n<li>Git integration<\/li>\n<\/ul>\n<p>On top of that, the editor can be extended with new functions via the connected <a href=\"https:\/\/marketplace.visualstudio.com\/vscode\" target=\"_blank\" rel=\"noopener noreferrer\">extensions marketplace<\/a>, and it is possible to <a href=\"https:\/\/code.visualstudio.com\/docs\/extensions\/example-hello-world\" target=\"_blank\" rel=\"noopener noreferrer\">write your own extension.<\/a><\/p>\n<p><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/extensions-2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7239\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/extensions-2.jpg\" alt=\"Extensions\" width=\"607\" height=\"475\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/extensions-2.jpg 607w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/extensions-2-300x235.jpg 300w\" sizes=\"auto, (max-width: 607px) 100vw, 607px\" \/><\/a><\/p>\n<h3>Developing TypeScript with Visual Studio Code<\/h3>\n<p>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.<\/p>\n<p>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.<\/p>\n<p><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/typings_1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7204 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/typings_1.png\" alt=\"Typings\" width=\"524\" height=\"327\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/typings_1.png 524w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/typings_1-300x187.png 300w\" sizes=\"auto, (max-width: 524px) 100vw, 524px\" \/><\/a><\/p>\n<p>If a function call does not match the given typing definition Visual Studio Code will produce a warning.<\/p>\n<p><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/typings_2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7205 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/typings_2.png\" alt=\"Typings\" width=\"510\" height=\"238\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/typings_2.png 510w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/typings_2-300x140.png 300w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/a><\/p>\n<h3>SourceMaps<\/h3>\n<p>Before you can use the debugger in Visual Studio Code to its full extent you first need to configure your project to use SourceMaps.<\/p>\n<p>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 `&#8221;sourceMap&#8221;: true` entry under the `compilerOptions` within the `tsconfig.json` file.<\/p>\n<p>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`.<\/p>\n<h3>Breakpoints<\/h3>\n<p>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.<\/p>\n<p><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/breakpoint_1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7199 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/breakpoint_1.png\" alt=\"Breakpoint\" width=\"380\" height=\"181\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/breakpoint_1.png 380w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/breakpoint_1-300x143.png 300w\" sizes=\"auto, (max-width: 380px) 100vw, 380px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/breakpoint_2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7200 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/breakpoint_2.png\" alt=\"Breakpoint\" width=\"381\" height=\"181\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/breakpoint_2.png 381w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/breakpoint_2-300x143.png 300w\" sizes=\"auto, (max-width: 381px) 100vw, 381px\" \/><\/a><\/p>\n<p>In the example above the execution will only be paused if \u201cuser.name\u201d takes on the value \u201cjohn.doe\u201d.<\/p>\n<h3>Unit-Tests<\/h3>\n<p>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.<\/p>\n<p><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/testing.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7203 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/testing.png\" alt=\"Testing\" width=\"898\" height=\"465\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/testing.png 898w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/testing-300x155.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/testing-768x398.png 768w\" sizes=\"auto, (max-width: 898px) 100vw, 898px\" \/><\/a><\/p>\n<p>In order to do that you need to tweak the <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/debugging#_launch-configurations\" target=\"_blank\" rel=\"noopener noreferrer\">launch configuration<\/a> 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 <a href=\"https:\/\/github.com\/mhevery\/jasmine-node\" target=\"_blank\" rel=\"noopener noreferrer\">jasmine-node<\/a>, the complete entry would be ` &#8220;program&#8221;: &#8220;${workspaceRoot}\/node_modules\/jasmine-node\/bin\/jasmine-node&#8221;`.<\/p>\n<p>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.<\/p>\n<h3>Bottom line<\/h3>\n<p>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.<\/p>\n<p>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.<\/p>\n","protected":false},"author":48,"featured_media":0,"template":"","tags":[155,678,677],"class_list":["post-7207","blog","type-blog","status-publish","hentry","tag-design-engineering","tag-typescript-en-2","tag-visual-studio-code-en-2"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/7207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/users\/48"}],"version-history":[{"count":0,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/7207\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/media?parent=7207"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/tags?post=7207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}