wake-up-neo.com

Typoscript-Unterstützung für Visual Studio 2017

Ich habe vor kurzem versucht, TypeScript zu lernen, und in einigen Videos, die ich nach der Installation der Erweiterung 'Web Essentials' angesehen habe, wenn Sie mit einem .ts-Datei-Visual Studio arbeiten, erhalten Sie ein Vorschaubild, in dem Sie JavaScript als sehen können du tippst.

Diese Videos scheinen VS 2012 zu verwenden.

Die Installation von Web Essentials auf VS 2017 scheint diese Option jedoch nicht zu haben. Weiß jemand, wie ich es schaffen kann, dass dies in VS 2017 funktioniert? Hat es die gleiche Unterstützung für TypeScript?

15
Ayo Adesina

TypeScript wird also standardmäßig mit VS2017 installiert (Update 2 enthält die neueste Version von 2.3 und lässt parallele Installationen zu). Wenn Sie es nicht haben, können Sie es über das Visual Studio-Installationsprogramm hinzufügen. Klicken Sie im Installationsprogramm auf das Menü "Burger", wählen Sie "Ändern" und klicken Sie auf "Einzelne Komponenten". Unter "SDKs", "Bibliotheken" und "Frameworks" können Sie TypeScript hinzufügen.

Nach der Installation können Sie eine Datei tsconfig.json hinzufügen, um dem TypeScript-Compiler das Verhalten zu erläutern. Beispiel:

{
    "compileOnSave": true,
    "compilerOptions":
    {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5"
    },
    "exclude":
    [
        "node_modules"
    ]
}

Die wichtige Einstellung ist compileOnSave, die VS anweist, die js-Datei zu kompilieren, wenn Sie die ts speichern.

Sie sollten jetzt sehen, dass sich in Ihrer TypeScript-Datei eine verschachtelte Javascript-Datei befindet:

 Nested TypeScript

Jetzt müssen Sie nur noch beide Dateien nebeneinander öffnen, und wenn Sie das ts speichern, wird js automatisch aktualisiert (es ist hilfreich, die Option immer zu aktivieren, wenn VS Sie auffordert, die geänderte Datei auf die Festplatte zu laden).

19
Matt

Ich sehe, Ihre Frage ist für VS 2017, und ich finde keine Dokumentation zu VS 2017, um zu bestätigen, ob sie erneut hinzugefügt wurde. Ich habe jedoch festgestellt, dass dies in VS 2015 entfernt wurde. Siehe diesen Link auf Github

Der TS-Vorschaufenster wurde aus Web Essentials 2015 entfernt, da bei der Veröffentlichung neuer Versionen ständig Konflikte mit dem TS-Compiler auftreten. Das TS-Team ist sich dessen bewusst und ich hoffe, dass das Feature in Zukunft in das TS-Tooling aufgenommen wird. Es ist möglich, dass diese Funktion in die brandneuen Web Compiler-Erweiterungen ( https://visualstudiogallery.msdn.Microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c ) aufgenommen wird, wenn Vorschaufenster implementiert wurden.

7
HappyTown

Ich habe eine Arbeit, es ist ein bisschen Arbeit, aber es hilft bei den seltenen Gelegenheiten, wenn ich die Ausgabe überprüfen möchte.

Ich verwende vs2017 Ich habe Web Essentials installiert und einen Web-Compiler, aber es scheint immer noch keine Unterstützung für ts ab 15.4 zu geben, und ich konnte die tsconfig.json nicht zum Laufen bringen.

Zeigen Sie die versteckten Dateien in Ihrem Projekt kurz an, wählen Sie die entsprechende js-Datei aus, und ziehen Sie die Registerkarte nach rechts, um einen geteilten Bildschirm zu erhalten enter image description here

Wenn Sie die TS-Datei ändern und speichern, wird möglicherweise ein Popup-Fenster mit der Meldung "Die Datei hat sich geändert" oder ähnliches angezeigt. Dort können Sie ein Kontrollkästchen auswählen, in dem "AutoRestore, falls keine Änderungen erkannt werden" angezeigt wird Ich habe versucht, die Option zu finden, damit ich sie zurücksetzen konnte, um einen Screenshot zu erhalten, aber ich kann sie nicht finden!). Überprüfen Sie das und wählen Sie "Ja für alle". Dadurch wird die js-Datei aktualisiert. Wenn Sie das nächste Mal Ihre TS-Datei ändern, wird die JS-Datei aktualisiert.

Ich weiß, dass es nicht großartig ist, aber ich fand es sehr nützlich, da ich ein Analogon von dem bekommen könnte, was Sie sehen, wenn Sie dem Kurs folgen, und sie zeigen ständig die Vorschau des Javascript an.

1
Luke Duddridge

Ich habe web essentials 2017 installiert, bin mir aber nicht sicher, ob dies obligatorisch ist. Die Frage ist, wie zwei Dateien in VS 2017 nebeneinander geöffnet werden können. speziell ein TypeScript und die zugehörige js-Datei.

Sie können zwei beliebige Dateien nebeneinander öffnen, für die die folgenden Schritte ausgeführt werden.

Öffnen Sie zunächst die beiden fraglichen Dateien, indem Sie im Projektmappen-Explorer darauf doppelklicken.

Visual Studio 2017 Split Window Step 1

Als nächstes platzieren Sie den Cursor auf dem hervorgehobenen roten Feld und ziehen Sie die Registerkarte der Datei Car.js nach unten.

Visual Studio 2017 Split Window Step 2

Jetzt sehen Sie fünf kleine Quadrate, die mit einem roten Quadrat markiert sind. Bewegen Sie den Cursor auf eines der 4 äußeren kleinen Quadrate. Ich setze meinen Cursor wie unten gezeigt auf den rechten.

Visual Studio 2017 Split Window Step 2

Es geht los.

Ich denke, dies funktioniert ohne Web-Essentials und ist eine Funktion von vs.

0
VivekDev

In Visual Studio 2017 müssen Sie den Workload "Node.js-Entwicklung" während des Installationsprozesses installieren oder Ihre vorhandene Installation im Dialogfeld "Neues Projekt" ändern, indem Sie auf den Link "Nicht finden, wonach Sie suchen? Open Visual Studio Installer" klicken . 

Dann werden unter Datei> Neu> Projekt ... JavaScript- und TypeScript-Projektvorlagen unter der Kategorie "Installiert" angezeigt. 

0
Tom