Visual Studio Code für absolute Beginner – TypeScript debuggen


Normalerweise entwickle ich Webanwendungen mit Visual Studio und habe viel Spaß dabei. Aber man muss auch mal über den Tellerrand hinausschauen, habe ich gedacht und einmal etwas anderes ausprobieren.

Die Aufgabenstellung bestand daraus, einfach nur eine TypeScript “Hallo Welt” Anwendung zu erstellen und zu debuggen. Hier muss ich bereits sagen, dies ist leider leichter gesagt als getan, denn Visual Studio Code reicht hier allein nicht aus und bisher habe ich von nodeJs oder npm nur hier und da etwas gelesen aber bisher noch nicht selbst damit gearbeitet.

Daher mussten zuerst die Entwicklungsumgebung und die passenden Tools installiert werden. Dazu gehört zum einen Visual Studio Code und nodeJs welches auch den npm (node package manager) enthält.

Bei nodeJs handelt es sich um eine Laufzeitumgebung in der JavaScript Programme serverseitig (über die Kommandozeile) ausgeführt werden können, wie z.B. einfache Webserver die in JavaScript geschrieben sind. Und npm ist quasi so etwas ähnliches wie ein NuGet auf Steroiden. Zu npm und nodeJs findet man aber auch diverse Einführungen auf YouTube. Auch zum UI von Visual Studio Code gibt es auf YouTube einiges an Videos.

Nachdem wir alle Tools installiert haben, installieren wir noch die neueste TypeScript Version mit npm. Dies ist zwar nicht zwingend notwendig da VS Code bereits eine aktuelle Version von TypeScript installiert, aber um auch einmal zu sehen wie npm “funktioniert” kann es nicht schaden. Dafür müssen wir die “Node.js Konsole” öffnen.

image

und hier einfach den folgenden Befehl eingeben:

npm install -g typescript

Damit wird TypeScript für nodeJs installiert und kann von VS Code bzw. über die npm Konsole verwendet werden.

Normalerweise gibt es eine gute Anleitung wie man TypeScript in VS Code verwendet in der Dokumentation. Leider hat diese bei mir nur teilweise funktioniert. Es wurde zwar die JavaScript Datei erstellt, aber die Mapping Dateien haben gefehlt, damit man auch Haltepunkte in der TypeScript Datei setzen kann. Daher im Folgenden die Anleitung wie ich es geschafft habe das ich TypeScript in VS Code debuggen konnte.

Dafür einfach ein lokales leeres Verzeichnis auswählen und dieses mit VS Code öffnen. Dann einfach eine neue Datei “app.ts” hinzufügen mit z.B. dem folgenden Inhalt:

module App {
        export class Person {
            constructor(public name: string) {  }

            public log(showLog: boolean): void {
                if (showLog) { 
                    console.log("Der Name des Nutzers ist: " + this.name)
                }
            }
        }
    }

    var person = new App.Person("Hallo Welt");
    person.log(true);

dann eine “tsconfig.json” Datei im gleichen Verzeichnis (root) anlegen mit dem folgenden Inhalt:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true 
    },
    "files": [
        "app.ts"
    ]
}

Das Files Property kann auch entfernt werden, dann werden alle TypeScript Dateien im Verzeichnis kompiliert, wichtig ist das die “sourceMap” erstellt wird, damit wir später auch debuggen können.

Wenn wir jetzt versuchen das ganze zu bauen mit der Tastenkombination “Strg+Shift+B” bekommen wir eine Meldung “No taks runner configured”, jetzt einfach auf “Configure Task Runner” klicken.

image

Jetzt legt VS Code einen neuen Ordner “.vscode” mit der Datei “tasks.json” im Rootverzeichnis unserer Anwendung an.

image

In der “tasks.json” den aktuellen Eintrag auskommentieren und den nächsten Eintrag in der Datei verwenden:

{
	"version": "0.1.0",

	// The command is tsc. Assumes that tsc has been installed using npm install -g typescript
	"command": "tsc",

	// The command is a shell script
	"isShellCommand": true,

	// Show the output window only if unrecognized errors occur.
	"showOutput": "silent",

	// Tell the tsc compiler to use the tsconfig.json from the open folder.
	"args": ["-p", "."],

	// use the standard tsc problem matcher to find compile problems
	// in the output.
	"problemMatcher": "$tsc"
}

Wenn Ihr “Glück” habt, dann könnt Ihr jetzt bereits wieder mit “Strg+Shift+B” eure “app.ts” Datei übersetzen lassen, diese verwendet jetzt die Einstellungen in eurer “tsconfig.json”.

Euer Verzeichnis sollte jetzt folgendermaßen aussehen und noch die “app.js” und “app.js.map” Datei enthalten.

image

Bei mir kam es hier aber zu folgender Fehlermeldung:

error TS5007: Cannot resolve referenced file: '.'.
error TS5023: Unknown option 'p'
Use the '--help' flag to see options.

Hier hat sich herausgestellt, das in der PATH Variable von Windows noch ein Verweis auf TypeScript 1.0 enthalten war, diesen habe ich einfach entfernt VS Code neu gestartet und schon verwendet VS Code die TypeScript Version die ich mit npm installiert habe.

image

Wenn wir jetzt “F5” drücken kommt ein kleines Popup, welches uns nach der Umgebung fragt in der die Anwendung ausgeführt werden soll. Hier wählen wir “Node.js” aus und VS Code legt für uns wieder eine Datei “launch.json” im Verzeichnis “.vscode” an.

image

Hier müssen wir jetzt nur noch “app.js” in “app.ts” ändern und einstellen das sourceMaps verwendet werden sollen, dann können wir einen Haltepunkt in unserer “app.ts” Datei mit “F9” setzen und mit “F5” führen wir unsere Anwendung aus.

{
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Launch",
			"type": "node",
			"request": "launch",
			"program": "${workspaceRoot}/app.ts",
			"stopOnEntry": false,
			"args": [],
			"cwd": "${workspaceRoot}",
			"preLaunchTask": null,
			"runtimeExecutable": null,
			"runtimeArgs": [
				"--nolazy"
			],
			"env": {
				"NODE_ENV": "development"
			},
			"externalConsole": false,
			"sourceMaps": true,
			"outDir": null
		},
		{
			"name": "Attach",
			"type": "node",
			"request": "attach",
			"port": 5858,
			"address": "localhost",
			"restart": false,
			"sourceMaps": false,
			"outDir": null,
			"localRoot": "${workspaceRoot}",
			"remoteRoot": null
		}
	]
}

Und siehe da wenn alles klappt, dann hält der Debugger am Haltepunkt

image

An die vielen Json Dateien muss man sich als .NET Entwickler erst einmal gewöhnen, wenn man in .NET auch noch auf ältere MVC Versionen setzt. Diese sind im Prinzip ganz gut beschrieben und VS Code bietet hier eine gute IntelliSense der einzelnen Einstellungen an.

Aber einen Vorteil muss ich gestehen sehe ich im Moment noch nicht zu meinem komfortablen Visual Studio 2015. Ich werde mich aber noch etwas damit beschäftigen und evtl. noch den einen oder anderen Blogpost über meine Probleme bzw. Fortschritte mit VS Code schreiben.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s