So debuggen Sie TS in vscode
Wie debugge ich TS in vscode?
vscode-Debugging TypeScript
Umgebung
typescript:2.5.2
vscode:1.16.0
vscode debuggt TS-Dateien direkt
Quellcode: Github
（https://github.com/meteor199/my-demo/tree/master/typescript/vscode- debug )
Typescript-Abhängigkeit installieren
npm install typescript --save-dev
tsconfig.json hinzufügen
SourceMap hauptsächlich auf true setzen.
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": true,
"outDir": "./dist",
"sourceMap": true
},
"include": [
"src/**/*"
]
}Automatische Kompilierung konfigurieren
Verwenden Sie die Aufgaben von vscode, um ts automatisch in js zu kompilieren. Sie können zum Kompilieren auch andere Methoden verwenden, z. B. Gulp, Webpack usw.
Datei hinzufügen: /.vscode/tasks.json
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for thedocumentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
//-p 指定目录；-w watch,检测文件改变自动编译
"args": ["-p", ".","-w"],
"showOutput": "always",
"problemMatcher": "$tsc"
}Verwenden Sie die Tastenkombinationen Strg + Umschalt + B, um die automatische Kompilierung zu aktivieren.
Debugging konfigurieren
Beim Debuggen müssen Sie die Datei launch.json von vscode konfigurieren. Diese Datei zeichnet Startoptionen auf.
Fügen Sie die Datei /.vscode/launch.json hinzu oder bearbeiten Sie sie.
{
"version": "0.2.0",
"configurations": [
{
"name": "launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/dist/main.js",
"args": [],
"cwd": "${workspaceRoot}",
"protocol": "inspector"
}
]
}Hinweis: Das Programm muss auf die entsprechenden js eingestellt werden, die von den TS generiert werden, die Sie debuggen möchten.
Wenn Sie /src/main.ts debuggen müssen, ist dies ${workspaceRoot}/dist/main.js.
Debugging
Öffnen Sie main.ts und fügen Sie auf der linken Seite Haltepunkte zum Debuggen hinzu.
Verwenden Sie ts-node, um ts-Dateien zu debuggen
Quellcode: github (https://github.com/meteor199/my-demo/tree/ master/ typescript/vscode-debug-without-compiling）
Von: Debuggen von TypeScript in VS Code ohne Kompilierung, mit ts-node
ts-node Beim Debuggen von ts-Dateien wird js nicht verwendet explizit generiert. Wenn Sie es nicht in js kompilieren und dann debuggen möchten, können Sie diese Methode in Betracht ziehen.
Npm-Abhängigkeitspaket installieren
npm install typescript --save-dev npm install ts-node --save-dev
tsconfig.json konfigurieren
SourceMap hauptsächlich auf true setzen.
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": true,
"outDir": "./dist",
"sourceMap": true
},
"include": [
"src/**/*"
]
}Launch.json konfigurieren
Öffnen Sie die DEBUG-Schnittstelle, fügen Sie die Konfiguration hinzu
oder bearbeiten Sie /.vscode/launch.json.
{
"version": "0.2.0",
"configurations": [
{
"name": "Current TS File",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/ts-node/dist/_bin.js",
"args": [
"${relativeFile}"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector"
}
]
}Debugging
Öffnen Sie die zu debuggende TS-Datei und fügen Sie den Debugger hinzu.
Öffnen Sie die Debug-Schnittstelle.
Wählen Sie nach DEBUG die entsprechende Konfiguration in launch.json aus, hier ist die aktuelle TS-Datei.
Klicken Sie auf die Schaltfläche „Ausführen“ oder drücken Sie F5, um auszuführen.
Empfohlene verwandte Tutorials: vscode-Tutorial
Das obige ist der detaillierte Inhalt vonSo debuggen Sie TS in vscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Erfahrung in der Teilnahme an VSCODE -Offline -Technologieaustauschaktivitäten
May 29, 2025 pm 10:00 PM
Ich habe viel Erfahrung in der Teilnahme an VSCODE-Offline-Technologienaustauschaktivitäten, und meine Hauptgewinne sind die Austausch von Plug-in-Entwicklung, praktische Demonstrationen und die Kommunikation mit anderen Entwicklern. 1. Teilen der Plug-in-Entwicklung: Ich habe gelernt, wie man die Plug-in-API von VSCODE verwendet, um die Entwicklungseffizienz wie automatische Formatierung und statische Analyse-Plug-Ins zu verbessern. 2. Praktische Demonstration: Ich habe gelernt, wie man VSCODE für die Fernentwicklung verwendet und seine Flexibilität und Skalierbarkeit erkannt. 3.. Kommunizieren Sie mit Entwicklern: Ich habe Fähigkeiten erhalten, um die VSCODE-Startgeschwindigkeit zu optimieren, z. Kurz gesagt, diese Veranstaltung hat mir sehr profitiert, und ich kann diejenigen, die an VSCODE interessiert sind, sehr empfehlen.
Wie richte ich schöne und leicht zu lesende Code-Schriftarten und Schriftgrößen in VSCODE ein?
May 29, 2025 pm 09:57 PM
Die Methode zum Einstellen wunderschöner und leicht zu lesender Code-Schriftarten und Schriftgrößen in VSCODE ist wie folgt: 1. VSCODE Öffnen und die Einstellungsschnittstelle eingeben. 2. Geben Sie {"editor.fontfamily": "firacode", "editor.fontsize": 14, "editor.lineHeight": 24} In den Einstellungen. Ich empfehle die Verwendung von Firacode -Schriftarten und setzt die Schriftgröße auf 14 und die Linienhöhe auf 24, um das Programmiererlebnis zu verbessern.
Erstellen und verwalten Sie mehrere Projektarbeitsbereiche in VSCODE
May 29, 2025 pm 10:09 PM
Erstellen und verwalten Sie mehrere Projektarbeitsbereiche in VSCODE in den folgenden Schritten: 1. Klicken Sie in der unteren linken Ecke auf die Schaltfläche "Verwalten", wählen Sie "neuer Arbeitsbereich" und entscheiden Sie den Speicherort. 2. Geben Sie dem Arbeitsbereich einen aussagekräftigen Namen wie "Webdev" oder "Backend". 3. Wechseln Sie das Projekt in Explorer. 4. Verwenden Sie die .Code-Workspace-Datei, um mehrere Projekte und Einstellungen zu konfigurieren. 5. Achten Sie auf die Versionskontrolle und das Abhängigkeitsmanagement, um sicherzustellen, dass jedes Projekt. Gitignore und Package.json -Dateien enthält. 6. Reinigen Sie die nutzlosen Dateien regelmäßig und überlegen Sie, Remote -Entwicklungsfähigkeiten zu verwenden
Die Gründe und Lösungen für den Editor nach dem VSCODE-Plug-In-Update stürzen ab
May 29, 2025 pm 10:03 PM
Der Grund, warum der Editor nach dem Aktualisieren des VSCODE -Plugins abstürzt, ist, dass das Plugin mit Kompatibilitätsproblemen mit vorhandenen Versionen von VSCODE oder anderen Plugins Probleme auftritt. Zu den Lösungen gehören: 1. Deaktivieren Sie das Plug-In, um Probleme nacheinander zu beheben; 2. Die Problem-Plug-In in die vorherige Version herabstufen; 3. Finden Sie alternative Plug-Ins; 4. Halten Sie VSCODE und Plug-in aktualisiert und führen Sie ausreichende Tests durch. 5. Richten Sie die automatische Sicherungsfunktion ein, um den Datenverlust zu verhindern.
Lösen Sie die Layouteinstellungen und zeigen Probleme von VSCODE in der Umgebung mit mehreren Bildschirmen an
May 29, 2025 pm 10:12 PM
Durch die Verwendung von VSCODE in einer Umgebung mit mehreren Bildschirmen kann Layout und Anzeigeprobleme gelöst und angezeigt werden, indem die Fenstergröße und -position angepasst, Arbeitsbereiche einstellen, die Skalierung der Schnittstelle anpassen, die Windows für das Gerät rational angeben, Software und Erweiterungen aktualisieren, die Leistung optimieren und die Layoutkonfiguration sparen, wodurch die Entwicklungseffizienz verbessert wird.
Analyse der Support -Trends und verwandten Probleme von VSCODE für aufkommende Programmiersprachen
May 29, 2025 pm 10:06 PM
Der Support -Trend von VSCODE für aufstrebende Programmiersprachen spiegelt sich positiv und spiegelt sich hauptsächlich in der Syntax -Hervorhebung, intelligenten Code -Abschluss, Debugging -Unterstützung und Versionskontrollintegration wider. Trotz der Skalierung von Qualitäts- und Leistungsproblemen können sie durch die Auswahl hochwertiger Skalierung, Optimierung von Konfigurationen und aktiv an Community-Beiträgen beteiligt sein.
Wie ändere ich das Standardterminal in VSCODE -Einstellungen?
Jul 05, 2025 am 12:35 AM
Es gibt drei Möglichkeiten, das Standardterminal in VSCODE zu ändern: Einstellung über eine grafische Schnittstelle, Bearbeitungseinstellungen.JSON -Datei und temporäre Schalten. Öffnen Sie zunächst die Einstellungsschnittstelle und suchen Sie nach "TerminalInIntegratedshell" und wählen Sie den Terminalpfad des entsprechenden Systems aus. Zweitens können erweiterte Benutzer Einstellungen.json bearbeiten, um "Terminal.integrated.shell.Windows" oder "Terminal.integrated.Shell.OSX" -Felder hinzuzufügen und dem Pfad richtig zu entkommen. Schließlich können Sie "Terminal: Selectd über das Befehlsfeld eingeben
Reparieren 'zeitlich abgestimmt auf den Anhang des Debuggers' in VSCODE
Jul 08, 2025 am 01:26 AM
Wenn das Problem "TimedoutwaitingForTheDeBuggerToattach" auftritt, liegt dies normalerweise daran, dass die Verbindung im Debugging -Prozess nicht korrekt hergestellt wird. 1. Überprüfen Sie, ob die Konfiguration der Start.json korrekt ist, sicher, dass der Anforderungsart startet oder angewendet wird und kein Rechtschreibfehler vorliegt. 2. Bestätigen Sie, ob der Debugger darauf wartet, dass der Debugger eine Verbindung herstellt, und fügen Sie Debugpy hinzu.wait_for_attach () und andere Mechanismen; 3.. Überprüfen Sie, ob der Hafen besetzt oder Firewall eingeschränkt ist, und ersetzen Sie den Hafen oder schließen Sie das besetzte Verfahren gegebenenfalls. 4. Bestätigen Sie, dass die Port Mapping- und Zugriffsberechtigungen in einer Remote- oder Containerumgebung korrekt konfiguriert sind. 5. Aktualisieren Sie VSCODE-, Plug-in- und Debugg-Bibliotheksversionen, um das Potenzial zu lösen
