Visual Studio Code ist eine integrierte Entwicklungsumgebung (IDE), die von vielen Programmiererinnen und Programmierern geschätzt wird, die ihre vielfältigen Funktionen und ihr Open-Source-Erbe zu schätzen wissen. Visual Studio Code macht das Programmieren einfacher, schneller und weniger frustrierend. Das gilt besonders für TypeScript, eine der vielen Sprachen, die von der IDE unterstützt werden.

Funktionen wie Code-Vervollständigung, Parameter-Hinweise und Syntax-Highlighting tragen wesentlich dazu bei, dass TypeScript-Entwickler/innen in Visual Studio Code produktiver arbeiten können. Außerdem gibt es einen integrierten Node.js-Debugger und die Möglichkeit, den Code im Editor in ausführbares JavaScript zu konvertieren. Allerdings müssen die meisten dieser Funktionen für eine optimale Nutzung konfiguriert werden.

So konfigurierst du Visual Studio Code für die TypeScript-Entwicklung

Dieses Tutorial zeigt Schritt für Schritt, wie du Visual Studio Code für die TypeScript-Entwicklung einrichtest. Wir initialisieren ein Node.js-Projekt in TypeScript, schreiben etwas Code und kompilieren, starten und debuggen das TypeScript – alles in Visual Studio Code.

Voraussetzungen

Bevor du loslegst, solltest du sicherstellen, dass du Folgendes bereit steht:

Du brauchst Node.js und npm (den Node-Paketmanager), um dein TypeScript-Projekt zu erstellen. Du kannst mit folgendem Terminalbefehl überprüfen, ob Node.js auf deinem Rechner installiert ist:

node -v

Das sollte die Version von Node.js auf deinem Rechner wie folgt anzeigen:

v21.6.1

Jetzt können wir mit TypeScript in Visual Studio Code loslegen!

Installiere den TypeScript-Compiler

Visual Studio Code unterstützt die TypeScript-Entwicklung, enthält aber keinen TypeScript-Compiler. Da der TypeScript-Compiler tsc TypeScript-Code in JavaScript umwandelt – oder transpiliert -, ist er eine Voraussetzung für das Testen deines TypeScript-Codes. Mit anderen Worten: tsc nimmt TypeScript-Code als Eingabe und erzeugt JavaScript-Code als Ausgabe, den du dann mit Node.js oder in einem Webbrowser ausführen kannst.

Starte den folgenden Befehl in deinem Terminal, um den TypeScript-Compiler global auf deinem Computer zu installieren:

npm install -g typescript

Überprüfe die installierte Version von tsc:

tsc --version

Wenn dieser Befehl keinen Fehler zurückgibt, ist tsc verfügbar. Du hast jetzt alles, was du brauchst, um ein TypeScript-Projekt zu erstellen!

Ein TypeScript-Projekt erstellen

Lass uns ein einfaches Node.js TypeScript-Projekt namens hello-world erstellen. Öffne dein Terminal und erstelle einen Ordner für dein Projekt:

mkdir hello-world
cd hello-world

Innerhalb von hello-world initialisierst du ein Projekt mit dem folgenden npm-Befehl:

npm init -y

Dadurch wird eine package.json Konfigurationsdatei für dein Node.js-Projekt erstellt. Es wird Zeit zu sehen, woraus das Projekt in Visual Studio Code besteht!

Starte Visual Studio Code und wähle Datei > Ordner öffnen…

In dem sich öffnenden Fenster wählst du den hello-world Projektordner aus und klickst auf Öffnen. Dein Projekt sollte ungefähr so aussehen:

Screenshot von Visual Studio Code mit einem geöffneten Projekt.
Das Node.js TypeScript Projekt, das in Visual Studio Code geöffnet ist

Zurzeit besteht das Projekt nur aus der package.json-Datei, die von npm init initialisiert wird.

Wähle im Menü von Visual Studio Code Ansicht > Terminal, um auf das integrierte Terminal des Editors zuzugreifen. Dort führst du den folgenden Befehl aus:

npx tsc --init

Dadurch wird eine TypeScript-Konfigurationsdatei namens tsconfig.json im Projektverzeichnis.

Mit der Datei tsconfig.json kannst du das Verhalten des TypeScript-Compilers anpassen. Insbesondere gibt sie dem TypeScript-Compiler Anweisungen zum Transpilieren des TypeScript-Codes. Ohne diese Datei ist tsc nicht in der Lage, dein TypeScript-Projekt wie gewünscht zu kompilieren.

Wenn du die Datei tsconfig.json in Visual Studio Code öffnest, wirst du feststellen, dass sie für jede verfügbare Konfigurationsoption einen Kommentar enthält. Wir wollen, dass unsere tsconfig.json-Datei diese Optionen enthält:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "outDir": "./build"
  }
}

Die einzigen Unterschiede zwischen den obigen Optionen sind wahrscheinlich die Aktivierung des Source Mappings für das JavaScript, das du erzeugen wirst, und das Hinzufügen eines Ausgabeverzeichnisses:

    "sourceMap": true,
    "outDir": "./build"

Nimm diese Änderungen in deiner tsconfig.json-Datei vor.

Das Source Mapping wird vom Visual Studio Code Compiler benötigt.

Die outDir konfiguration legt fest, wo der Compiler die transpilierten Dateien ablegt. Standardmäßig ist das der Stammordner des Projekts. Um zu vermeiden, dass dein Projektordner bei jeder Kompilierung mit Build-Dateien gefüllt wird, setze ihn auf einen anderen Ordner, z. B. build.

Dein TypeScript-Projekt ist nun fast bereit, kompiliert zu werden. Aber zuerst brauchst du TypeScript-Code.

Klicke mit der rechten Maustaste auf den Explorer-Bereich und wähle Neue Datei… Gib index.ts ein und drücke die Eingabetaste. Dein Projekt enthält nun eine TypeScript-Datei namens index.ts:

Screenshot von Visual Studio Code, der eine leere TypeScript-Datei anzeigt.
Die leere index.ts-Datei in Visual Studio Code

Fangen wir mit dem folgenden TypeScript-Code an:

const message: string = "Hello, World!"
console.log(message)

Dieses Snippet gibt einfach die bekannte Hello, World! -Nachricht aus.

IntelliSense für die Code-Vervollständigung ausprobieren

Als du die obigen Zeilen in Visual Studio Code geschrieben hast, hast du vielleicht bemerkt, dass der Editor einige Codevorschläge gemacht hat. Dies geschieht dank IntelliSense, einer der coolen Funktionen von Visual Studio Code.

IntelliSense enthält Funktionen wie Code-Vervollständigung, Informationen aus der Dokumentation und Parameterinformationen zu Funktionen. IntelliSense schlägt dir während der Eingabe automatisch vor, wie du den Code vervollständigen kannst, was deine Produktivität und Genauigkeit erheblich verbessern kann. Du kannst es hier in Aktion sehen:

Die Animation zeigt die IntelliSense-Funktion von Visual Studio Code in Aktion.
Die IntelliSense-Codeerkennung von Visual Studio Code in Aktion

Vergiss nicht, dass Visual Studio Code IntelliSense-Unterstützung für TypeScript-Projekte von Haus aus mitbringt. Du musst sie nicht manuell konfigurieren.

Da du nun weißt, wie du TypeScript wie ein Profi in Visual Studio Code schreibst, können wir es kompilieren und sehen, ob es funktioniert.

Kompilieren von TypeScript in Visual Studio Code

Öffne das integrierte Terminal in Visual Studio Code und führe aus:

tsc -p .

Dadurch werden alle TypeScript-Dateien im Projekt in JavaScript umgewandelt. Die -p . weist den Compiler an, die Datei tsconfig.json zu verwenden, die sich im aktuellen Verzeichnis befindet. Die Ausgabe – in diesem Fall index.js und die Source Map index.js.map – werden im Verzeichnis ./build abgelegt.

Du kannst bestätigen, dass der transpilierte JavaScript-Code mit diesem Befehl im Terminal funktioniert:

node ./build/index.js

Node.js interpretiert index.js und gibt ihn im Terminal aus:

Hello, World!

Eine alternative Methode zum Starten des Transpilers ist die Auswahl von Terminal > Run Build Task... im Visual Studio Code-Menü und das Anklicken der Option tsc: build – tsconfig.json.

Screenshot des Visual Studio Code-Menüeintrags zum Starten des Build-Prozesses.
Starten des Build-Prozesses über die Menüs von Visual Studio Code

Bei diesem Vorgang wird tsc -p . im Hintergrund ausgeführt und dein Code wird direkt im Editor erstellt.

Und so kompilierst du dein TypeScript-Projekt in Visual Studio Code. Jetzt musst du nur noch herausfinden, wie du deinen Code starten und debuggen kannst.

Ausführen und Debuggen von TypeScript in Visual Studio Code

Visual Studio Code unterstützt das Debugging von TypeScript dank des eingebauten Node.js-Debuggers. Aber bevor du ihn benutzen kannst, musst du ihn einrichten. Klicke auf das Symbol Ausführen und Debuggen in der Seitenleiste, klicke auf Eine launch.json-Datei erstellen und wähle Node.js.

Der Screenshot zeigt die Auswahl des Node.js-Debuggers.
Auswählen des Node.js-Debuggers für die launch.json-Konfiguration

Dadurch wird eine Standard-Node.js launch.json-Datei erstellt, die Konfigurationsdatei, die der Visual Studio Code Debugger zum Starten und Debuggen einer Anwendung verwendet. In dieser Konfigurationsdatei wird festgelegt, wie die Anwendung gestartet werden soll, welche Kommandozeilenargumente verwendet werden sollen und welche Umgebungsvariablen gesetzt werden müssen.

Wie du im Abschnitt Explorer sehen kannst, befindet sich die Datei launch.json im Ordner .vscode eines Projekts.

Öffne diese Datei und bearbeite sie wie folgt:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "node_modules/**"
            ],
            "program": "${workspaceFolder}/index.ts",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": ["${workspaceFolder}/build/**/*.js"]
        }
    ]
}

Passe die Optionen program, preLaunchTask und outFiles an und beachte dabei, dass:

  • program: Gibt den Pfad zum Einstiegspunkt der zu debuggenden Anwendung an. In TypeScript sollte er die Hauptdatei enthalten, die beim Starten der Anwendung ausgeführt wird.
  • preLaunchTask: Legt den Namen des Visual Studio Code Build-Tasks fest, der vor dem Start der Anwendung ausgeführt wird. In einem TypeScript-Projekt sollte dies der Build-Task sein.
  • outFiles: Enthält den Pfad zu den transpilierten JavaScript-Dateien, die durch den Build-Prozess erzeugt werden. Die von tsc dank der "sourceMap": true config erzeugten Source-Map-Dateien werden vom Debugger verwendet, um den TypeScript-Quellcode auf den erzeugten JavaScript-Code abzubilden. So kannst du TypeScript-Code direkt debuggen.

Speichere die Datei launch.json und öffne index.ts. Klicke auf die Leerstelle vor der Zeile console.log(), um einen Haltepunkt zu setzen. Neben der Zeile erscheint ein roter Punkt, etwa so:

Ein Screenshot zeigt das Hinzufügen eines Debugging-Haltepunkts.
Der rote Punkt markiert einen Debugging-Haltepunkt

Wenn du den Code mit dem Compiler ausführst, hält die Ausführung dort an. Dank dieses Haltepunkts kannst du überprüfen, ob der Node.js-Debugger in Visual Studio Code wie erwartet funktioniert.

Besuche erneut den Abschnitt Ausführen und Debuggen und klicke auf die grüne Schaltfläche Play, um den Debugger zu starten. Warte auf die Ausführung von preLaunchTask. Nachdem der Code kompiliert wurde, wird das Programm gestartet und die Ausführung an dem oben gesetzten Haltepunkt angehalten.

Ein Screenshot zeigt den Visual Studio Code Debugger in Aktion.
Der Visual Studio Code Debugger in Aktion

Auf der linken Seite im Bild oben siehst du die Werte der Variablen zum Zeitpunkt der Unterbrechung. Wie in der Dokumentation zum Debuggen von Visual Studio Code beschrieben, kannst du auch pausieren, einen Schritt weitergehen, ein- und aussteigen, neu starten und anhalten.

Wenn du F5 drückst, um die Ausführung fortzusetzen, solltest du auf der Registerkarte Debug-Konsole die folgende Meldung sehen:

Hello, World!

Das ist die Meldung, die du von der Anwendung erwartest, und sie bedeutet, dass das Programm korrekt ausgeführt wurde.

Du hast gerade gelernt, wie du Visual Studio Code für die TypeScript-Programmierung einrichtest. Das Tutorial könnte hier enden, aber es gibt noch eine weitere wichtige Sache zu lernen: wie du eine Erweiterung in Visual Studio Code konfigurierst, die das Schreiben von qualitativ hochwertigem Code in TypeScript noch einfacher machen kann.

Wie man ESLint in Visual Studio Code konfiguriert

Du kannst den Kern von Visual Studio Code mit Erweiterungen erweitern. Diese bieten zusätzliche Features und Funktionen für den Code-Editor.

Eine der beliebtesten Visual Studio Code-Erweiterungen für die TypeScript-Entwicklung ist die ESLint-Erweiterung.

ESLint ist ein beliebtes statisches Code-Analyse-Tool für JavaScript und TypeScript, das Entwicklern hilft, häufige Programmierfehler zu erkennen und zu beheben und Programmierstandards durchzusetzen. Die Erweiterung führt ESLint direkt im Editor aus.

Lass uns ESLint in Visual Studio Code in dein TypeScript-Projekt integrieren.

Zunächst initialisierst du ESLint in deinem Projekt mit diesem Terminalbefehl:

npm init @eslint/config

Während des Konfigurationsprozesses werden dir einige Fragen gestellt, die dir helfen, die ESLint-Konfigurationsdatei zu erstellen. Du kannst sie wie folgt beantworten:

√ How would you like to use ESLint? · style
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard-with-typescript
√ What format do you want your config file to be in? · JSON

Das Installationsprogramm prüft, ob Abhängigkeiten bestehen und fragt dich, ob du fehlende Pakete installieren möchtest. Du kannst wie folgt antworten:

√ Would you like to install them now? · Yes
√ Which package manager do you want to use? · npm

Am Ende des Prozesses findest du eine neue Datei .eslintrc.json, die den folgenden Anfangscode enthält:

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": "standard-with-typescript",
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "rules": {
    }
}

Die Datei .eslintrc.json enthält die Einstellungen, die ESLint verwendet, um bestimmte Code-, Stil- und Qualitätsstandards durchzusetzen. So könnte eine einfache .eslintrc.json für ein Node.js TypeScript-Projekt aussehen:

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true,
        // enable node support
        "node": true
    },
    "extends": "standard-with-typescript",
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "project": "tsconfig.json"
    },
    "rules": {
        // force the code to be indented with 2 spaces
        "indent": ["error", 2],
        // mark extra spaces as errors
        "no-multi-spaces": ["error"]
    }
}

Nun ist es an der Zeit, die ESLint-Erweiterung in Visual Studio Code zu installieren. Klicke auf das Symbol Erweiterungen im linken Menü und gib ESLint ein. Finde die ESLint-Erweiterung und klicke auf Installieren.

Screenshot von ESLint auf dem Marktplatz für Visual Studio Code-Erweiterungen.
Installation der ESLint-Erweiterung in Visual Studio Code

Damit die ESLint-Erweiterung deine TypeScript-Dateien bei jedem Speichern automatisch überprüft, erstellst du eine settings.json-Datei in .vscode mit dem folgenden Inhalt:

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "eslint.validate": [
        "typescript"
      ],
      "eslint.codeActionsOnSave.rules": null
}

Die Datei settings.json enthält die Konfiguration, die von Visual Studio Code verwendet wird, um das Verhalten des Editors und seiner Erweiterungen anzupassen.

Starte Visual Studio Code neu, damit der Editor die neuen Erweiterungen und Konfigurationen lädt.

Wenn du index.ts öffnest und den Code bearbeitest, siehst du neue Fehler, die von der IDE gemeldet werden. Bei Code-Stil-Fehlern speicherst du die Datei und ESLint formatiert den Code automatisch neu, wie in .eslintrc.json definiert.

Eine Animation, die zeigt, wie ESLint in Visual Studio Code läuft.
ESLint in Aktion in Visual Studio Code

Jetzt kann dich nichts mehr davon abhalten, hochwertigen Code zu schreiben! Jetzt musst du nur noch deine Node.js-Anwendung in einem modernen Cloud-Hosting-Dienst wie dem von Kinsta bereitstellen.

Zusammenfassung

Die Konfiguration von Visual Studio Code für die Entwicklung in TypeScript ist also ziemlich einfach – du hast gerade gelernt, wie du ein Node.js-Projekt in TypeScript erstellst, es in Visual Studio Code lädst und die IDE nutzt, um mit Hilfe von IntelliSense Code zu schreiben. Außerdem hast du den TypeScript-Compiler konfiguriert, den Node.js-Compiler so eingerichtet, dass er TypeScript-Code debuggen kann, und ESLint in das Projekt integriert.

Wenn du deine Web-App-Entwicklung auf die nächste Stufe heben willst, solltest du dich über das Web Anwendungs-Hosting und Managed Datenbank-Hosting von Kinsta informieren. Kinsta bietet eine Reihe von Hosting-Lösungen, die für Geschwindigkeit, Sicherheit und Skalierbarkeit optimiert sind und eine hervorragende Umgebung für die Entwicklung und den Einsatz von Hochleistungsanwendungen bieten.

Antonello Zanini

Antonello is a software engineer, but prefers to call himself a Technology Bishop. Spreading knowledge through writing is his mission.