VisualStudio Code-Template für TypeScript und React

Hallo,
wenn man nach VSCode-Templates sucht findet man eine große Anzahl an Beispielen, ich hab jetzt auch bereits sehr viele davon ausprobiert, leider lieferte keines der Beispiele eine Verhalten, wie ich es mir gewünscht hätte.

Ziel wäre eine VSCode-Projeksturktur für Typescript, im dem auch React enhalten ist, in dem durch Drücken auf den Debug-Button:

• der TypeScript-Code neu kompiliert wird (also die Map- und JS-Dateien erzeugt werden)
• ein WebDienst gestartet wird
• ein Browser geöffnet wird, der die Seite anzeigt
• es möglich ist im VSCode zu debuggen
  Also im Prinzip so, wie man es aus VisualStudio gewohnt ist.

Schön wäre es auch, wenn die kompilierten Dateien nicht im selben Ordner wären, wie die TypeScript-Dateien (wegen der Übersichtlichkeit) und das Ergebnis in einer einzelnen Datei landet.
Ich weiß aber aktuell nicht, ob sich die letzten Anforderungen mit dem Debuggen widersprechen.

Aktuell habe ich bereits ein Template, das die Dateien kompiliert, Chrome startet und die Seite anzeigt, aber leider lassen sich die Dateien in VSCode nicht mehr debuggen.

Welche Templates verwendet ihr für eure TypeScript-Entwicklung?

cu
Kleinrechner

Naja, man verwendet ja TypeScript i.d.R. nicht solo, sondern zB. mit Angular oder React oder ...; daher nimmt man Beispiele anhand der Frameworks und weniger anhand der Umsetzungssprache.

Für das Packing, also am Ende ein Bundle daraus wird, ist zB. Webpack verantwortlich.
Du hast hier also Anforderungen, die viele verschiedene Technologien vorraussetzen.

Ich denke Du wirst nur mit sehr viel Glück etwas finden, das alle Deine Wünshe abdeckt.
Besonders die Debugging-Sache; das wird eigentlich immer vom lokalen Editor eingerichtet (beim ersten Startversuch des Debuggings).

Als Lernhilfe sind solche Templates okay, aber für eine wirklich produktive Entwicklungsumgebung eines Produkts muss man schon viel Glück haben, dass das alles so zu den Anforderungen passt.
Wir verwenden i.d.R. auch Templates für die Angular Entwicklung; da wir dann i.d.R. eine aktuelle Basis haben und es nicht selbst pflegen müssen.
Aber wir müssen auch sehr viel anpassen, sodass vom originalen Template oft wenig übrig bleibt.

Ok,
es wäre ja schonmal für den Anfang interessant, zu wissen, ob sich die Anforderungen, die TypeScript-Dateien direkt in VSCode debuggen zu können und die Anforderung die Dateien zu Bundeln und die kompilierten Dateien in einem separaten Ordner abzulegen gegenseitig widersprechen.

Hat hier evtl jemand Erfahrung sammeln können?

cu
Christian

Nein wiederspricht sich nicht, das siehst Du auch in sehr vielen Bespielprojekten etc.
Kann man auch einfach mal ausprobieren 😉

Was spricht gegen die Projekt-Generierung durch die React CLI (create-react-app)?
Dort gibt es ebenfalls Templates für Typescript-Projekte -> https://github.com/wmonk/create-react-app-typescript

Die F5-Konfigurationen findest du unter .vscode/launch.json.