Automatische Kompilierung auf Speichern Typoskript in Visual Studio Code

In diesem Beitrag werden wir zwei Probleme lösen.: 1) Befehl “TSC” in der VS integrierte terminal Code wird nicht erkannt werden., und 2) Erstellung funktioniert nicht automatisch beim Speichern der Datei “.TS” (Typ-Skript).

Einführung

Nur zur Kontextualisierung, die Typescript ermöglicht es Ihnen, Code mit einer stark typisierten Struktur zu schreiben und diesen Code für reines JavaScript kompilieren zu lassen. Bereits die Visual Studio-Code ist ein plattformübergreifender Codeeditor, der von Microsoft erstellt wurde.

// In diesem Beitrag verwendete Versionen:
- Visual Studio, Neu (Vs) Code, Neu: Version 1.14.1
- Schreibschrift, Neujahr: Version 2.4.1

Das ist ein einfacher Tipp, Aber Sie haben möglicherweise Probleme, wenn Sie nicht wissen, was Sie tun: mein Fall :(D)

Installation Node.js und TypeScript

Eine Möglichkeit, TypeScript zu installieren, ist über den Node.js-Paket-Manager (Npm – Knotenpaket-Manager), aber es zu benutzen, Sie zuerst benötigen installieren Sie die Node.js.

Nach der Installation von Node, öffnen Sie das Terminal (Befehl) und führen Sie den folgenden Befehl aus, um TypeScript installieren:

npm installieren -g-Schriftsatz

Still von Windows-Terminal (oder Linux), Nehmen Sie einen TypeScript-Betriebstest vor, indem Sie die installierte Version überprüfen. Der Befehl “TSC” ist ein Akronym für TypeScript Compiler.

TSC -v

Problem

Das Problem ist, dass der Befehl “TSC” normal auf dem Windows-Terminal funktioniert, aber nicht im integrierten Terminal, das innerhalb des Visual Studio-Codes selbst liegt (VS-Code), Anzeigen des folgenden Fehlers:

'tsc' wird nicht erkannt wie ein interner oder externer Befehl,bedienbares Programm oder Batch Datei.

Außerdem, Ich wollte den Befehl nicht ausführen “TSC” für jedes Mal, wenn Sie eine Datei kompilieren möchten “.TS” (Erweiterung für TypeScript). Dann, wie immer die automatische Kompilierung beim Speichern (STRG+S)? Das werden wir später sehen.

Outros erros

Mit dem Blick auf die Lösung dieser Probleme, gefunden e.Ts, die sagen, die kompilierenOnSave, Dies wird jedoch nur von Visual Studio unterstützt 2015 mit TypeScript >= 1.8.4 und Atom-Typescript-Plugin. IE, keine Verwendung mit kompilierenOnSave In “tsconfig.json” aus Visual Studio Code, Der untenstehende Code funktioniert nicht:

{
   "compileOnSave": wahr,
   "compilerOptions": {
       "noImplicitAny" : wahr
   }
}

Lösung

TSC in vs codeintegriertes Terminal

Lösen wir zunächst das Problem der TSC nicht im integrierten Visual Studio Code-Terminal erkannt werden (VS-Code).

Einige Beiträge empfehlen, den tsc- oder npm-Pfad in der PATH-Umgebungsvariablen zu platzieren, aber eine einfache Möglichkeit, dies zu lösen, war, indem Installation der “TypeScript für Visual Studio, die auch für VS Code kompatibel ist.

Nun ja, nach der Installation, Öffnen Sie das integrierte Visual Studio Code-Terminal, Eingabe:

// Hotkey für visuellestudio-code integriertes Terminal:
Strg+`
// Oder verwenden Sie das Menü, um das Terminal in Visual Studio Code zu öffnen:
Ansicht, Neujahr > Integriertes Terminal, Neu

Versuchen Sie, die Version von TypeScript direkt in das integrierte VS Code Terminal (Nicht in Fensterterminal), und es wird wahrscheinlich funktionieren:

TSC -v

Automatische Kompilierung beim Speichern einer Datei .TS

Positionieren Sie sich über das VS Code-Terminal in Ihrem Skriptverzeichnis (.TS), z. B.:

C cd:\wamp64-www-ts

Erstellen der Datei tsconfig.json Eingeben von Vs-Code-Terminal:

TSC --init

Beachten Sie, dass eine Datei “tsconfig.json” werden in “C:\wamp64-www-ts” (aktuelles Verzeichnis).

Öffnen Sie die tsconfig.json und aktivieren Sie die Option “sourceMap”: wahr, und speichern Sie die Änderung, Somit:

  "compilerOptions": {
    /* Grundlegende Optionen */
    "target": "es5",                          /* Angeben der ECMAScript-Zielversion: 'ES3' (Standard), 'ES5', 'ES2015', 'ES2016', 'ES2017', oder 'ESNEXT'. */
    "module": "commonjs",                     /* Angeben der Modulcodegenerierung: 'commonjs', 'amd', "System", 'umd', 'es2015', oder 'ESNext'. */
    // "lib": [],                             /* Angeben von Bibliotheksdateien, die in die Kompilierung einbezogen werden sollen:  */
    // "allowJs": wahr,                       /* Zulassen der Kompilierung von Javascript-Dateien. */
    // "checkJs": wahr,                       /* Fehler in JS-Dateien melden. */
    // "jsx": "preserve",                     /* Angeben der JSX-Codegenerierung: "bewahren", "react-native", oder "reagieren". */
    // "declaration": wahr,                   /* Generiert entsprechende '.d.ts'-Datei. */
    "sourceMap": wahr,                     /* Generiert entsprechende '.map'-Datei. */
    // "outFile": "./",                       /* Verkettung und Ausgabe an einzelne Datei ausgeben. */
    // "outDir": "./",                        /* Ausgabestruktur in das Verzeichnis umleiten. */
    // "rootDir": "./",                       /* Geben Sie das Stammverzeichnis der Eingabedateien an. Verwenden Sie diese Verwendung, um die Ausgabeverzeichnisstruktur mit --outDir zu steuern. */
    ... weiter ...

Bereit, agora é s'ir no terminal do VS Code e digitar o comando:

TSC -w

Este comando fica monitorando (ou vendo, so “w” de watch) a aplicaéo e qualquer alterao no arquivos .TS, quando salvo, fara a imediata compilaéo em .Js.

Das wars!

Total hits: 10612

Hinterlasse eine Antwort

Die e-Mailadresse wird nicht veröffentlicht. Pflichtfelder sind mit gekennzeichnet. *