Blog

Fehler bis zur Wurzel verfolgen: Debugging von TypeScript-Projekten mit Visual Studio Code

Thomas Becker
Thomas Becker
29. September 2016

Visual Studio Code ist eine recht neue Erscheinung, hat aber seit seiner Veröffentlichung im November 2015 bereits viel Beachtung gefunden. Auf den ersten Blick könnte man meinen, Visual Studio Code sei nur eine weitere Iteration der Visual Studio-Familie, dem ist aber nicht so. Visual Studio Code ist eine komplette Neuentwicklung und hat abgesehen vom Namen „Visual Studio“ nur wenige Gemeinsamkeiten mit seinen Namensvettern vorzuweisen.

Es gibt viele gute Gründe die dafür sprechen bei einem neuen Projekt auf TypeScript zu setzen, anstatt auf JavaScript. So bietet einem TypeScript unter anderem die Möglichkeit seinen Code in Klassen zu strukturieren, um nur mal einen Vorteil zu nennen. In diesem Beitrag möchte ich darauf eingehen wie man ein TypeScript-Projekt mit Visual Studio Code debuggen kann.

Warum überhaupt Visual Studio Code

Visual Studio Code ist frei erhältlich (unter MIT-Lizenz), quelloffen und kann plattformübergreifend eingesetzt werden. All das ist recht bemerkenswert für ein Produkt aus dem Hause Microsoft, deren Produkte ja meist proprietär sind und überwiegend nur unter Windows laufen.

Visual Studio Code ist stark in der JavaScript-Welt angesiedelt. Es besitzt von Haus aus Support für JavaScript, TypeScript und Node.js. Das minimalistische Interface von Visual Studio Code erinnert stark an andere Editoren mit schlankem Erscheinungsbild, z.B. Sublime Text oder Atom.

Aus technischer Sicht sind die Anforderungen an einen JavaScript-Editor erst einmal gering – er muss lediglich Textdateien im Klartext bearbeiten können. Dafür reicht bereits Notepad++ aus. Wenn man allerdings komplexe JavaScript-Anwendungen entwickeln möchte, ist man für jedes zusätzliche Hilfsmittel dankbar. Eine Auswahl der Features von Visual Studio Code sind:

  • DebuggerAutovervollständigung
  • Multi-Cursor Editing
  • Split-Screen Editor
  • Git-Integration

Darüber hinaus kann der Editor über ein Erweiterungs-System um neue Funktionen ergänzt werden. Man kann über den angeschlossenen Marketplace Erweiterungen herunterladen, oder selbst eine eigene Erweiterung schreiben.

Extensions

TypeScript entwickeln mit Visual Studio Code

Für den effektiven Einsatz von Visual Studio Code mit TypeScript ist eine TypeScript-Config-Datei (`tsconfig.json`) unabdingbar. In ihr werden Optionen gesetzt die das Transpilieren von TypeScript zu JavaScript betreffen. Außerdem signalisiert eine `tsconfig.json` im Basis-Verzeichnis eines Projekts Visual Studio Code dass es sich um ein TypeScript-Projekt handelt.

Genau wie jeder anderer moderner Code-Editor bietet einem Visual Studio Code Vorschläge zur Autovervollständigung an. Wenn man die Typing-Definitionen für seine verwendeten Libraries/Frameworks in sein Projekt eingebunden hat (z.B. mit dem TypeScript Definition Manager) bietet einem Visual Studio Code Autovervollständigung beim Schreiben an.

Typings

Falls ein Funktionsaufruf nicht mit der vorgegebenen Typing-Definition übereinstimmt, dann wird Visual Studio Code eine Warnung ausgeben.

Typings

SourceMaps

Bevor man den Debugger von Visual Studio Code in vollem Umfang benutzen kann, muss man zuerst sein Projekt für die Verwendung von sogenannten SourceMaps konfigurieren.

Durch das Transpilieren von TypeScript nach JavaScript weicht die Struktur der generierten JavaScript-Datei mitunter stark von der TypeScript-Vorlage ab. Damit der Debugger beim zeilenweisen Ausführen der JavaScript-Datei nachvollziehen kann, wie diese mit der TypeScript-Vorlage korrespondiert, benötigt er eine SourceMap. Damit beim Kompilieren eine SourceMap erstellt wird fügt man der Datei `tsconfig.json` unter `compilerOptions` den Eintrag `“sourceMap“: true` hinzu.

Letztlich muss man dem Debugger noch anweisen die SourceMaps auch zu verwenden, in dem man in dem Debug-Task von Visual Studio Code die Option `sourceMaps` auf `true` setzt.

Breakpoints

Breakpoints erlauben es, die Ausführung des Programms an einer bestimmten Zeile anzuhalten, damit man in Ruhe Variablen inspizieren und den Programmfluss besser nachvollziehen kann. Unter Umständen möchte man, dass die Ausführung nur dann pausiert wird, wenn eine Variable einen bestimmten Wert annimmt. In Visual Studio Code hat man die Möglichkeit den Breakpoint selbst mit einer Bedingung zu versehen.

Breakpoint

Breakpoint

Im oben genannten Beispiel wird die Ausführung nur dann pausiert wenn „user.name“ den Wert „max.mustermann“ annimmt.

Unit-Tests

Um in einem JavaScript-Projekt eine stabile Code-Basis aufzubauen, sind Unit-Tests unerlässlich. Wenn man bereits eine funktionierende Testumgebung für sein Projekt aufgebaut hat, ist es möglich die Unit-Tests direkt aus Visual Studio Code zu starten.

Testing

Dazu muss man die Standard-Launch-Konfiguration von VSC etwas anpassen. Für den Wert `program` trägt man den passenden Aufruf für seine Testumgebung ein. Bei einem NodeJS-Projekt, das mit jasmine-node getestet werden soll, würde der vollständige Aufruf ` „program“: „${workspaceRoot}/node_modules/jasmine-node/bin/jasmine-node“` lauten.

Sollte nun ein Testfall fehlschlagen, kann man den Debugger von Visual Studio Code dazu verwenden, dem Problem bis zu seiner Ursache nachzuspüren.

Abschließendes

Ich hoffe, ich konnte mit diesem Beitrag vermitteln, warum Visual Studio Code ein guter Begleiter für TypeScript-Projekte ist. Durch den eingebauten Debugger, die nahtlose Integration von TypeScript, und die Git-Anbindung kann man sehr viele Arbeitsschritte mit einer einzigen Anwendung abdecken.

Letztlich ist die Wahl des passenden Editors eine sehr persönliche Entscheidung. Falls man nun in der Vergangenheit schlechte Erfahrungen mit Visual Studio-Produkten (oder Microsoft-Produkten generell) gemacht hatte, ist es nur verständlich wenn man in Zukunft darauf verzichten möchte. Aber ich finde, das sollte einen nicht davon abhalten diesem interessanten neuen Editor eine Chance zu geben.

Möchten Sie mehr zu unseren Leistungen, Produkten oder zu unserem UX-Prozess erfahren?
Wir sind gespannt auf Ihre Anfrage.

Senior UX Manager
+49 681 959 3110

Bitte bestätigen Sie vor dem Versand Ihrer Anfrage über die obige Checkbox, dass wir Sie kontaktieren dürfen.