{"id":69514,"date":"2024-03-18T10:24:58","date_gmt":"2024-03-18T09:24:58","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=69514&#038;preview=true&#038;preview_id=69514"},"modified":"2024-03-27T09:44:50","modified_gmt":"2024-03-27T08:44:50","slug":"typescript-visual-studio","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/","title":{"rendered":"Beherrsche die TypeScript-Entwicklung in Visual Studio Code"},"content":{"rendered":"<p>Visual Studio Code ist eine integrierte Entwicklungsumgebung (IDE), die von vielen Programmiererinnen und Programmierern gesch\u00e4tzt wird, die ihre vielf\u00e4ltigen Funktionen und ihr Open-Source-Erbe zu sch\u00e4tzen wissen. Visual Studio Code macht das Programmieren einfacher, schneller und weniger frustrierend. Das gilt besonders f\u00fcr <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-typescript\/\">TypeScript<\/a>, eine der vielen Sprachen, die von der IDE unterst\u00fctzt werden.<\/p>\n<p>Funktionen wie Code-Vervollst\u00e4ndigung, Parameter-Hinweise und Syntax-Highlighting tragen wesentlich dazu bei, dass TypeScript-Entwickler\/innen in Visual Studio Code produktiver arbeiten k\u00f6nnen. Au\u00dferdem gibt es einen integrierten <a href=\"https:\/\/kinsta.com\/de\/thema\/node-js\/\">Node.js-Debugger<\/a> und die M\u00f6glichkeit, den Code im Editor in ausf\u00fchrbares <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> zu konvertieren. Allerdings m\u00fcssen die meisten dieser Funktionen f\u00fcr eine optimale Nutzung konfiguriert werden.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>So konfigurierst du Visual Studio Code f\u00fcr die TypeScript-Entwicklung<\/h2>\n<p>Dieses Tutorial zeigt Schritt f\u00fcr Schritt, wie du Visual Studio Code f\u00fcr die TypeScript-Entwicklung einrichtest. Wir initialisieren ein Node.js-Projekt in TypeScript, schreiben etwas Code und kompilieren, starten und debuggen das TypeScript &#8211; alles in Visual Studio Code.<\/p>\n<h3>Voraussetzungen<\/h3>\n<p>Bevor du loslegst, solltest du sicherstellen, dass du Folgendes bereit steht:<\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js<\/a> lokal installiert und konfiguriert ist<\/li>\n<li><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a> heruntergeladen und installiert ist.<\/li>\n<\/ul>\n<p>Du brauchst Node.js und <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-npm\/\">npm<\/a> (den Node-Paketmanager), um dein TypeScript-Projekt zu erstellen. Du kannst mit folgendem Terminalbefehl \u00fcberpr\u00fcfen, ob <a href=\"https:\/\/kinsta.com\/de\/blog\/so-installierst-du-node-js\/\">Node.js auf deinem Rechner installiert ist<\/a>:<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Das sollte die Version von Node.js auf deinem Rechner wie folgt anzeigen:<\/p>\n<pre><code class=\"language-bash\">v21.6.1<\/code><\/pre>\n<p>Jetzt k\u00f6nnen wir mit TypeScript in Visual Studio Code loslegen!<\/p>\n<h3>Installiere den TypeScript-Compiler<\/h3>\n<p>Visual Studio Code unterst\u00fctzt die TypeScript-Entwicklung, enth\u00e4lt aber keinen TypeScript-Compiler. Da der <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/compiler-options.html\" target=\"_blank\" rel=\"noopener noreferrer\">TypeScript-Compiler<\/a> tsc TypeScript-Code in JavaScript umwandelt &#8211; oder transpiliert -, ist er eine Voraussetzung f\u00fcr 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\u00fchren kannst.<\/p>\n<p>Starte den folgenden Befehl in deinem Terminal, um den TypeScript-Compiler global auf deinem Computer zu installieren:<\/p>\n<pre><code class=\"language-bash\">npm install -g typescript<\/code><\/pre>\n<p>\u00dcberpr\u00fcfe die installierte Version von tsc:<\/p>\n<pre><code class=\"language-bash\">tsc --version<\/code><\/pre>\n<p>Wenn dieser Befehl keinen Fehler zur\u00fcckgibt, ist tsc verf\u00fcgbar. Du hast jetzt alles, was du brauchst, um ein TypeScript-Projekt zu erstellen!<\/p>\n<h2>Ein TypeScript-Projekt erstellen<\/h2>\n<p>Lass uns ein einfaches Node.js TypeScript-Projekt namens <strong>hello-world<\/strong> erstellen. \u00d6ffne dein Terminal und erstelle einen Ordner f\u00fcr dein Projekt:<\/p>\n<pre><code class=\"language-bash\">mkdir hello-world\ncd hello-world<\/code><\/pre>\n<p>Innerhalb von <strong>hello-world<\/strong> initialisierst du ein Projekt mit dem folgenden npm-Befehl:<\/p>\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<p>Dadurch wird eine <strong>package.json<\/strong> Konfigurationsdatei f\u00fcr dein Node.js-Projekt erstellt. Es wird Zeit zu sehen, woraus das Projekt in Visual Studio Code besteht!<\/p>\n<p>Starte Visual Studio Code und w\u00e4hle <strong>Datei<\/strong> &gt; <strong>Ordner \u00f6ffnen<\/strong>&#8230;<\/p>\n<p>In dem sich \u00f6ffnenden Fenster w\u00e4hlst du den <strong>hello-world<\/strong> Projektordner aus und klickst auf <strong>\u00d6ffnen<\/strong>. Dein Projekt sollte ungef\u00e4hr so aussehen:<\/p>\n<figure style=\"width: 1919px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/open-typescript-project-visual-studio-code.png\" alt=\"Screenshot von Visual Studio Code mit einem ge\u00f6ffneten Projekt.\" width=\"1919\" height=\"1035\"><figcaption class=\"wp-caption-text\">Das Node.js TypeScript Projekt, das in Visual Studio Code ge\u00f6ffnet ist<\/figcaption><\/figure>\n<p>Zurzeit besteht das Projekt nur aus der <strong>package.json-Datei<\/strong>, die von <code>npm init<\/code> initialisiert wird.<\/p>\n<p>W\u00e4hle im Men\u00fc von Visual Studio Code <strong>Ansicht<\/strong> &gt; <strong>Terminal<\/strong>, um auf das <a href=\"https:\/\/code.visualstudio.com\/docs\/terminal\/basics\" target=\"_blank\" rel=\"noopener noreferrer\">integrierte Terminal<\/a> des Editors zuzugreifen. Dort f\u00fchrst du den folgenden Befehl aus:<\/p>\n<pre><code class=\"language-bash\">npx tsc --init<\/code><\/pre>\n<p>Dadurch wird eine TypeScript-Konfigurationsdatei namens <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/tsconfig-json.html\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>tsconfig.json<\/strong><\/a> im Projektverzeichnis.<\/p>\n<p>Mit der Datei <strong>tsconfig.json<\/strong> 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\u00fcnscht zu kompilieren.<\/p>\n<p>Wenn du die Datei <strong>tsconfig.json<\/strong> in Visual Studio Code \u00f6ffnest, wirst du feststellen, dass sie f\u00fcr jede verf\u00fcgbare Konfigurationsoption einen Kommentar enth\u00e4lt. Wir wollen, dass unsere <strong>tsconfig.json-Datei<\/strong> diese Optionen enth\u00e4lt:<\/p>\n<pre><code class=\"language-json\">{\n  \"compilerOptions\": {\n    \"target\": \"es2016\",\n    \"module\": \"commonjs\",\n    \"esModuleInterop\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"strict\": true,\n    \"skipLibCheck\": true,\n    \"sourceMap\": true,\n    \"outDir\": \".\/build\"\n  }\n}<\/code><\/pre>\n<p>Die einzigen Unterschiede zwischen den obigen Optionen sind wahrscheinlich die Aktivierung des Source Mappings f\u00fcr das JavaScript, das du erzeugen wirst, und das Hinzuf\u00fcgen eines Ausgabeverzeichnisses:<\/p>\n<pre><code class=\"language-json\">    \"sourceMap\": true,\n    \"outDir\": \".\/build\"<\/code><\/pre>\n<p>Nimm diese \u00c4nderungen in deiner <strong>tsconfig.json-Datei<\/strong> vor.<\/p>\n<p>Das <a href=\"https:\/\/www.typescriptlang.org\/tsconfig#sourceMap\" target=\"_blank\" rel=\"noopener noreferrer\">Source Mapping<\/a> wird vom Visual Studio Code Compiler ben\u00f6tigt.<\/p>\n<p>Die <a href=\"https:\/\/www.typescriptlang.org\/tsconfig#outDir\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>outDir<\/strong><\/a> konfiguration legt fest, wo der Compiler die transpilierten Dateien ablegt. Standardm\u00e4\u00dfig ist das der Stammordner des Projekts. Um zu vermeiden, dass dein Projektordner bei jeder Kompilierung mit Build-Dateien gef\u00fcllt wird, setze ihn auf einen anderen Ordner, z. B. <strong>build<\/strong>.<\/p>\n<p>Dein TypeScript-Projekt ist nun fast bereit, kompiliert zu werden. Aber zuerst brauchst du TypeScript-Code.<\/p>\n<p>Klicke mit der rechten Maustaste auf den <strong>Explorer-Bereich<\/strong> und w\u00e4hle <strong>Neue Datei<\/strong>&#8230; Gib <code>index.ts<\/code> ein und dr\u00fccke die <strong>Eingabetaste<\/strong>. Dein Projekt enth\u00e4lt nun eine TypeScript-Datei namens <strong>index.ts<\/strong>:<\/p>\n<figure style=\"width: 1919px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/typescript-file-visual-studio-code.png\" alt=\"Screenshot von Visual Studio Code, der eine leere TypeScript-Datei anzeigt.\" width=\"1919\" height=\"1035\"><figcaption class=\"wp-caption-text\">Die leere <strong>index.ts-Datei<\/strong> in Visual Studio Code<\/figcaption><\/figure>\n<p>Fangen wir mit dem folgenden TypeScript-Code an:<\/p>\n<pre><code class=\"language-typescript\">const message: string = \"Hello, World!\"\nconsole.log(message)\n<\/code><\/pre>\n<p>Dieses Snippet gibt einfach die bekannte <em>Hello, World!<\/em> -Nachricht aus.<\/p>\n<h2>IntelliSense f\u00fcr die Code-Vervollst\u00e4ndigung ausprobieren<\/h2>\n<p>Als du die obigen Zeilen in Visual Studio Code geschrieben hast, hast du vielleicht bemerkt, dass der Editor einige Codevorschl\u00e4ge gemacht hat. Dies geschieht dank <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/intellisense\" target=\"_blank\" rel=\"noopener noreferrer\">IntelliSense<\/a>, einer der coolen Funktionen von Visual Studio Code.<\/p>\n<p>IntelliSense enth\u00e4lt Funktionen wie Code-Vervollst\u00e4ndigung, Informationen aus der Dokumentation und Parameterinformationen zu Funktionen. IntelliSense schl\u00e4gt dir w\u00e4hrend der Eingabe automatisch vor, wie du den Code vervollst\u00e4ndigen kannst, was deine Produktivit\u00e4t und Genauigkeit erheblich verbessern kann. Du kannst es hier in Aktion sehen:<\/p>\n<figure style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/intellisense-visual-studio-code.gif\" alt=\"Die Animation zeigt die IntelliSense-Funktion von Visual Studio Code in Aktion.\" width=\"800\" height=\"503\"><figcaption class=\"wp-caption-text\">Die IntelliSense-Codeerkennung von Visual Studio Code in Aktion<\/figcaption><\/figure>\n<p>Vergiss nicht, dass Visual Studio Code IntelliSense-Unterst\u00fctzung f\u00fcr TypeScript-Projekte von Haus aus mitbringt. Du musst sie nicht manuell konfigurieren.<\/p>\n<p>Da du nun wei\u00dft, wie du TypeScript wie ein Profi in Visual Studio Code schreibst, k\u00f6nnen wir es kompilieren und sehen, ob es funktioniert.<\/p>\n<h2>Kompilieren von TypeScript in Visual Studio Code<\/h2>\n<p>\u00d6ffne das integrierte Terminal in Visual Studio Code und f\u00fchre aus:<\/p>\n<pre><code class=\"language-bash\">tsc -p .<\/code><\/pre>\n<p>Dadurch werden alle TypeScript-Dateien im Projekt in JavaScript umgewandelt. Die <code>-p .<\/code> weist den Compiler an, die Datei <strong>tsconfig.json<\/strong> zu verwenden, die sich im aktuellen Verzeichnis befindet. Die Ausgabe &#8211; in diesem Fall <strong>index.js<\/strong> und die Source Map <strong>index.js.map<\/strong> &#8211; werden im Verzeichnis <strong>.\/build<\/strong> abgelegt.<\/p>\n<p>Du kannst best\u00e4tigen, dass der transpilierte JavaScript-Code mit diesem Befehl im Terminal funktioniert:<\/p>\n<pre><code class=\"language-bash\">node .\/build\/index.js<\/code><\/pre>\n<p>Node.js interpretiert <strong>index.js<\/strong> und gibt ihn im Terminal aus:<\/p>\n<pre><code class=\"language-bash\">Hello, World!<\/code><\/pre>\n<p>Eine alternative Methode zum Starten des Transpilers ist die Auswahl von <strong>Terminal<\/strong> &gt; <strong>Run Build Task.<\/strong>.. im Visual Studio Code-Men\u00fc und das Anklicken der Option <strong>tsc: build &#8211; tsconfig.json<\/strong>.<\/p>\n<figure style=\"width: 909px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/transpiling-visual-studio-code.png\" alt=\"Screenshot des Visual Studio Code-Men\u00fceintrags zum Starten des Build-Prozesses.\" width=\"909\" height=\"136\"><figcaption class=\"wp-caption-text\">Starten des Build-Prozesses \u00fcber die Men\u00fcs von Visual Studio Code<\/figcaption><\/figure>\n<p>Bei diesem Vorgang wird <code>tsc -p .<\/code> im Hintergrund ausgef\u00fchrt und dein Code wird direkt im Editor erstellt.<\/p>\n<p>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.<\/p>\n<h2>Ausf\u00fchren und Debuggen von TypeScript in Visual Studio Code<\/h2>\n<p>Visual Studio Code unterst\u00fctzt das Debugging von TypeScript dank des eingebauten <a href=\"https:\/\/code.visualstudio.com\/docs\/nodejs\/nodejs-debugging\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js-Debuggers<\/a>. Aber bevor du ihn benutzen kannst, musst du ihn einrichten. Klicke auf das Symbol <strong>Ausf\u00fchren und Debuggen<\/strong> in der Seitenleiste, klicke auf <strong>Eine launch.json-Datei erstellen<\/strong> und w\u00e4hle <strong>Node.js<\/strong>.<\/p>\n<figure style=\"width: 1367px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/node-debugger-visual-studio-code.png\" alt=\"Der Screenshot zeigt die Auswahl des Node.js-Debuggers.\" width=\"1367\" height=\"471\"><figcaption class=\"wp-caption-text\">Ausw\u00e4hlen des Node.js-Debuggers f\u00fcr die <strong>launch.json-Konfiguration<\/strong><\/figcaption><\/figure>\n<p>Dadurch wird eine Standard-Node.js <strong>launch.json-Datei<\/strong> 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\u00fcssen.<\/p>\n<p>Wie du im Abschnitt <strong>Explorer<\/strong> sehen kannst, befindet sich die Datei <strong>launch.json im Ordner <strong>.vscode<\/strong> eines Projekts.<\/strong><\/p>\n<p>\u00d6ffne diese Datei und bearbeite sie wie folgt:<\/p>\n<pre><code class=\"language-json\">{\n    \/\/ Use IntelliSense to learn about possible attributes.\n    \/\/ Hover to view descriptions of existing attributes.\n    \/\/ For more information, visit: https:\/\/go.microsoft.com\/fwlink\/?linkid=830387\n    \"version\": \"0.2.0\",\n    \"configurations\": [\n        {\n            \"type\": \"node\",\n            \"request\": \"launch\",\n            \"name\": \"Launch Program\",\n            \"skipFiles\": [\n                \"node_modules\/**\"\n            ],\n            \"program\": \"${workspaceFolder}\/index.ts\",\n            \"preLaunchTask\": \"tsc: build - tsconfig.json\",\n            \"outFiles\": [\"${workspaceFolder}\/build\/**\/*.js\"]\n        }\n    ]\n}<\/code><\/pre>\n<p>Passe die Optionen <code>program<\/code>, <code>preLaunchTask<\/code> und <code>outFiles<\/code> an und beachte dabei, dass:<\/p>\n<ul>\n<li><code>program<\/code>: Gibt den Pfad zum Einstiegspunkt der zu debuggenden Anwendung an. In TypeScript sollte er die Hauptdatei enthalten, die beim Starten der Anwendung ausgef\u00fchrt wird.<\/li>\n<li><code>preLaunchTask<\/code>: Legt den Namen des Visual Studio Code Build-Tasks fest, der vor dem Start der Anwendung ausgef\u00fchrt wird. In einem TypeScript-Projekt sollte dies der Build-Task sein.<\/li>\n<li><code>outFiles<\/code>: Enth\u00e4lt den Pfad zu den transpilierten JavaScript-Dateien, die durch den Build-Prozess erzeugt werden. Die von tsc dank der <code>\"sourceMap\": true<\/code> 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.<\/li>\n<\/ul>\n<p>Speichere die Datei <strong>launch.json<\/strong> und \u00f6ffne <strong>index.ts<\/strong>. Klicke auf die Leerstelle vor der Zeile <code>console.log()<\/code>, um einen Haltepunkt zu setzen. Neben der Zeile erscheint ein roter Punkt, etwa so:<\/p>\n<figure style=\"width: 1366px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/debug-breakpoint-visual-studio-code.png\" alt=\"Ein Screenshot zeigt das Hinzuf\u00fcgen eines Debugging-Haltepunkts.\" width=\"1366\" height=\"261\"><figcaption class=\"wp-caption-text\">Der rote Punkt markiert einen Debugging-Haltepunkt<\/figcaption><\/figure>\n<p>Wenn du den Code mit dem Compiler ausf\u00fchrst, h\u00e4lt die Ausf\u00fchrung dort an. Dank dieses Haltepunkts kannst du \u00fcberpr\u00fcfen, ob der Node.js-Debugger in Visual Studio Code wie erwartet funktioniert.<\/p>\n<p>Besuche erneut den Abschnitt <strong>Ausf\u00fchren und Debuggen<\/strong> und klicke auf die gr\u00fcne Schaltfl\u00e4che Play, um den Debugger zu starten. Warte auf die Ausf\u00fchrung von <code>preLaunchTask<\/code>. Nachdem der Code kompiliert wurde, wird das Programm gestartet und die Ausf\u00fchrung an dem oben gesetzten Haltepunkt angehalten.<\/p>\n<figure style=\"width: 1919px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/debug-running-visual-studio-code.png\" alt=\"Ein Screenshot zeigt den Visual Studio Code Debugger in Aktion.\" width=\"1919\" height=\"1035\"><figcaption class=\"wp-caption-text\">Der Visual Studio Code Debugger in Aktion<\/figcaption><\/figure>\n<p>Auf der linken Seite im Bild oben siehst du die Werte der Variablen zum Zeitpunkt der Unterbrechung. Wie in der <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/debugging\" target=\"_blank\" rel=\"noopener noreferrer\">Dokumentation zum Debuggen von<\/a> Visual Studio Code beschrieben, kannst du auch pausieren, einen Schritt weitergehen, ein- und aussteigen, neu starten und anhalten.<\/p>\n<p>Wenn du <strong>F5<\/strong> dr\u00fcckst, um die Ausf\u00fchrung fortzusetzen, solltest du auf der Registerkarte <strong>Debug-Konsole<\/strong> die folgende Meldung sehen:<\/p>\n<pre><code class=\"language-bash\">Hello, World!<\/code><\/pre>\n<p>Das ist die Meldung, die du von der Anwendung erwartest, und sie bedeutet, dass das Programm korrekt ausgef\u00fchrt wurde.<\/p>\n<p>Du hast gerade gelernt, wie du Visual Studio Code f\u00fcr die TypeScript-Programmierung einrichtest. Das Tutorial k\u00f6nnte 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.<\/p>\n<h2>Wie man ESLint in Visual Studio Code konfiguriert<\/h2>\n<p>Du kannst den Kern von Visual Studio Code mit <a href=\"https:\/\/kinsta.com\/de\/blog\/vscode-erweiterungen\/\">Erweiterungen<\/a> erweitern. Diese bieten zus\u00e4tzliche Features und Funktionen f\u00fcr den Code-Editor.<\/p>\n<p>Eine der beliebtesten Visual Studio Code-Erweiterungen f\u00fcr die TypeScript-Entwicklung ist die <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dbaeumer.vscode-eslint\" target=\"_blank\" rel=\"noopener noreferrer\">ESLint-Erweiterung<\/a>.<\/p>\n<p><a href=\"https:\/\/eslint.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESLint<\/a> ist ein beliebtes statisches Code-Analyse-Tool f\u00fcr JavaScript und TypeScript, das Entwicklern hilft, h\u00e4ufige Programmierfehler zu erkennen und zu beheben und Programmierstandards durchzusetzen. Die Erweiterung f\u00fchrt ESLint direkt im Editor aus.<\/p>\n<p>Lass uns ESLint in Visual Studio Code in dein TypeScript-Projekt integrieren.<\/p>\n<p>Zun\u00e4chst initialisierst du ESLint in deinem Projekt mit diesem Terminalbefehl:<\/p>\n<pre><code class=\"language-bash\">npm init @eslint\/config<\/code><\/pre>\n<p>W\u00e4hrend des Konfigurationsprozesses werden dir einige Fragen gestellt, die dir helfen, die ESLint-Konfigurationsdatei zu erstellen. Du kannst sie wie folgt beantworten:<\/p>\n<pre><code class=\"language-bash\">\u221a How would you like to use ESLint? \u00b7 style\n\u221a What type of modules does your project use? \u00b7 commonjs\n\u221a Which framework does your project use? \u00b7 none\n\u221a Does your project use TypeScript? \u00b7 Yes\n\u221a Where does your code run? \u00b7 browser\n\u221a How would you like to define a style for your project? \u00b7 guide\n\u221a Which style guide do you want to follow? \u00b7 standard-with-typescript\n\u221a What format do you want your config file to be in? \u00b7 JSON<\/code><\/pre>\n<p>Das Installationsprogramm pr\u00fcft, ob Abh\u00e4ngigkeiten bestehen und fragt dich, ob du fehlende Pakete installieren m\u00f6chtest. Du kannst wie folgt antworten:<\/p>\n<pre><code class=\"language-bash\">\u221a Would you like to install them now? \u00b7 Yes\n\u221a Which package manager do you want to use? \u00b7 npm<\/code><\/pre>\n<p>Am Ende des Prozesses findest du eine neue Datei <strong>.eslintrc.json<\/strong>, die den folgenden Anfangscode enth\u00e4lt:<\/p>\n<pre><code class=\"language-json\">{\n    \"env\": {\n        \"browser\": true,\n        \"commonjs\": true,\n        \"es2021\": true\n    },\n    \"extends\": \"standard-with-typescript\",\n    \"overrides\": [\n    ],\n    \"parserOptions\": {\n        \"ecmaVersion\": \"latest\"\n    },\n    \"rules\": {\n    }\n}<\/code><\/pre>\n<p>Die Datei <strong>.eslintrc.json<\/strong> enth\u00e4lt die Einstellungen, die ESLint verwendet, um bestimmte Code-, Stil- und Qualit\u00e4tsstandards durchzusetzen. So k\u00f6nnte eine einfache <strong>.eslintrc.json<\/strong> f\u00fcr ein Node.js TypeScript-Projekt aussehen:<\/p>\n<pre><code class=\"language-json\">{\n    \"env\": {\n        \"browser\": true,\n        \"commonjs\": true,\n        \"es2021\": true,\n        \/\/ enable node support\n        \"node\": true\n    },\n    \"extends\": \"standard-with-typescript\",\n    \"overrides\": [\n    ],\n    \"parserOptions\": {\n        \"ecmaVersion\": \"latest\",\n        \"project\": \"tsconfig.json\"\n    },\n    \"rules\": {\n        \/\/ force the code to be indented with 2 spaces\n        \"indent\": [\"error\", 2],\n        \/\/ mark extra spaces as errors\n        \"no-multi-spaces\": [\"error\"]\n    }\n}<\/code><\/pre>\n<p>Nun ist es an der Zeit, die ESLint-Erweiterung in Visual Studio Code zu installieren. Klicke auf das Symbol <strong>Erweiterungen<\/strong> im linken Men\u00fc und gib <code>ESLint<\/code> ein. Finde die ESLint-Erweiterung und klicke auf <strong>Installieren<\/strong>.<\/p>\n<figure style=\"width: 1642px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/eslint-installation-visual-studio-code.png\" alt=\"Screenshot von ESLint auf dem Marktplatz f\u00fcr Visual Studio Code-Erweiterungen.\" width=\"1642\" height=\"724\"><figcaption class=\"wp-caption-text\">Installation der ESLint-Erweiterung in Visual Studio Code<\/figcaption><\/figure>\n<p>Damit die ESLint-Erweiterung deine TypeScript-Dateien bei jedem Speichern automatisch \u00fcberpr\u00fcft, erstellst du eine <strong>settings.json-Datei<\/strong> in <strong>.vscode<\/strong> mit dem folgenden Inhalt:<\/p>\n<pre><code class=\"language-json\">{\n    \"editor.codeActionsOnSave\": {\n        \"source.fixAll.eslint\": true\n      },\n      \"eslint.validate\": [\n        \"typescript\"\n      ],\n      \"eslint.codeActionsOnSave.rules\": null\n}<\/code><\/pre>\n<p>Die Datei <strong>settings.json<\/strong> enth\u00e4lt die Konfiguration, die von Visual Studio Code verwendet wird, um das Verhalten des Editors und seiner Erweiterungen anzupassen.<\/p>\n<p>Starte Visual Studio Code neu, damit der Editor die neuen Erweiterungen und Konfigurationen l\u00e4dt.<\/p>\n<p>Wenn du <strong>index.ts<\/strong> \u00f6ffnest 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 <strong>.eslintrc.json<\/strong> definiert.<\/p>\n<figure style=\"width: 600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/eslint-running-visual-studio-code.gif\" alt=\"Eine Animation, die zeigt, wie ESLint in Visual Studio Code l\u00e4uft.\" width=\"600\" height=\"301\"><figcaption class=\"wp-caption-text\">ESLint in Aktion in Visual Studio Code<\/figcaption><\/figure>\n<p>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.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Die Konfiguration von Visual Studio Code f\u00fcr die Entwicklung in TypeScript ist also ziemlich einfach &#8211; du hast gerade gelernt, wie du ein Node.js-Projekt in TypeScript erstellst, es in Visual Studio Code l\u00e4dst und die IDE nutzt, um mit Hilfe von IntelliSense Code zu schreiben. Au\u00dferdem hast du den TypeScript-Compiler konfiguriert, den Node.js-Compiler so eingerichtet, dass er TypeScript-Code debuggen kann, und ESLint in das Projekt integriert.<\/p>\n<p>Wenn du deine Web-App-Entwicklung auf die n\u00e4chste Stufe heben willst, solltest du dich \u00fcber das <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Web Anwendungs-Hosting<\/a> und <a href=\"https:\/\/sevalla.com\/database-hosting\/\">Managed Datenbank-Hosting<\/a> von Kinsta informieren. Kinsta bietet eine Reihe von Hosting-L\u00f6sungen, die f\u00fcr Geschwindigkeit, Sicherheit und Skalierbarkeit optimiert sind und eine hervorragende Umgebung f\u00fcr die Entwicklung und den Einsatz von Hochleistungsanwendungen bieten.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Visual Studio Code ist eine integrierte Entwicklungsumgebung (IDE), die von vielen Programmiererinnen und Programmierern gesch\u00e4tzt wird, die ihre vielf\u00e4ltigen Funktionen und ihr Open-Source-Erbe zu sch\u00e4tzen wissen. &#8230;<\/p>\n","protected":false},"author":305,"featured_media":69515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[990,991],"class_list":["post-69514","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-webentwicklung-sprachen","topic-web-entwicklungs-tools"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Beherrsche die TypeScript-Entwicklung in Visual Studio Code - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Hier erf\u00e4hrst du, wie du deine TypeScript-Projekte mit der integrierten Entwicklungsumgebung Visual Studio Code von Microsoft zum Laufen bringst.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Beherrsche die TypeScript-Entwicklung in Visual Studio Code\" \/>\n<meta property=\"og:description\" content=\"Hier erf\u00e4hrst du, wie du deine TypeScript-Projekte mit der integrierten Entwicklungsumgebung Visual Studio Code von Microsoft zum Laufen bringst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-18T09:24:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-27T08:44:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/typescript-visual-studio.png\" \/>\n\t<meta property=\"og:image:width\" content=\"6084\" \/>\n\t<meta property=\"og:image:height\" content=\"3042\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Antonello Zanini\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Hier erf\u00e4hrst du, wie du deine TypeScript-Projekte mit der integrierten Entwicklungsumgebung Visual Studio Code von Microsoft zum Laufen bringst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/typescript-visual-studio.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Antonello Zanini\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"12\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/\"},\"author\":{\"name\":\"Antonello Zanini\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b\"},\"headline\":\"Beherrsche die TypeScript-Entwicklung in Visual Studio Code\",\"datePublished\":\"2024-03-18T09:24:58+00:00\",\"dateModified\":\"2024-03-27T08:44:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/\"},\"wordCount\":2110,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/typescript-visual-studio.png\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/\",\"name\":\"Beherrsche die TypeScript-Entwicklung in Visual Studio Code - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/typescript-visual-studio.png\",\"datePublished\":\"2024-03-18T09:24:58+00:00\",\"dateModified\":\"2024-03-27T08:44:50+00:00\",\"description\":\"Hier erf\u00e4hrst du, wie du deine TypeScript-Projekte mit der integrierten Entwicklungsumgebung Visual Studio Code von Microsoft zum Laufen bringst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/typescript-visual-studio.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/typescript-visual-studio.png\",\"width\":6084,\"height\":3042},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webentwicklungs-Tools\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/web-entwicklungs-tools\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Beherrsche die TypeScript-Entwicklung in Visual Studio Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b\",\"name\":\"Antonello Zanini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ddf1b67f03071c679a5c8ae17ca733ea?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ddf1b67f03071c679a5c8ae17ca733ea?s=96&d=mm&r=g\",\"caption\":\"Antonello Zanini\"},\"description\":\"Antonello is a software engineer, but prefers to call himself a Technology Bishop. Spreading knowledge through writing is his mission.\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/antonellozanini\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Beherrsche die TypeScript-Entwicklung in Visual Studio Code - Kinsta\u00ae","description":"Hier erf\u00e4hrst du, wie du deine TypeScript-Projekte mit der integrierten Entwicklungsumgebung Visual Studio Code von Microsoft zum Laufen bringst.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/","og_locale":"de_DE","og_type":"article","og_title":"Beherrsche die TypeScript-Entwicklung in Visual Studio Code","og_description":"Hier erf\u00e4hrst du, wie du deine TypeScript-Projekte mit der integrierten Entwicklungsumgebung Visual Studio Code von Microsoft zum Laufen bringst.","og_url":"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2024-03-18T09:24:58+00:00","article_modified_time":"2024-03-27T08:44:50+00:00","og_image":[{"width":6084,"height":3042,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/typescript-visual-studio.png","type":"image\/png"}],"author":"Antonello Zanini","twitter_card":"summary_large_image","twitter_description":"Hier erf\u00e4hrst du, wie du deine TypeScript-Projekte mit der integrierten Entwicklungsumgebung Visual Studio Code von Microsoft zum Laufen bringst.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/typescript-visual-studio.png","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Antonello Zanini","Gesch\u00e4tzte Lesezeit":"12\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/"},"author":{"name":"Antonello Zanini","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b"},"headline":"Beherrsche die TypeScript-Entwicklung in Visual Studio Code","datePublished":"2024-03-18T09:24:58+00:00","dateModified":"2024-03-27T08:44:50+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/"},"wordCount":2110,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/typescript-visual-studio.png","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/","url":"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/","name":"Beherrsche die TypeScript-Entwicklung in Visual Studio Code - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/typescript-visual-studio.png","datePublished":"2024-03-18T09:24:58+00:00","dateModified":"2024-03-27T08:44:50+00:00","description":"Hier erf\u00e4hrst du, wie du deine TypeScript-Projekte mit der integrierten Entwicklungsumgebung Visual Studio Code von Microsoft zum Laufen bringst.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/typescript-visual-studio.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/typescript-visual-studio.png","width":6084,"height":3042},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/typescript-visual-studio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Webentwicklungs-Tools","item":"https:\/\/kinsta.com\/de\/thema\/web-entwicklungs-tools\/"},{"@type":"ListItem","position":3,"name":"Beherrsche die TypeScript-Entwicklung in Visual Studio Code"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/784c3771e679199c12c5840dac0c970b","name":"Antonello Zanini","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ddf1b67f03071c679a5c8ae17ca733ea?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ddf1b67f03071c679a5c8ae17ca733ea?s=96&d=mm&r=g","caption":"Antonello Zanini"},"description":"Antonello is a software engineer, but prefers to call himself a Technology Bishop. Spreading knowledge through writing is his mission.","url":"https:\/\/kinsta.com\/de\/blog\/author\/antonellozanini\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/69514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/305"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=69514"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/69514\/revisions"}],"predecessor-version":[{"id":69602,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/69514\/revisions\/69602"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69514\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69514\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69514\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69514\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69514\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69514\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69514\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69514\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/69515"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=69514"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=69514"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=69514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}