Das Ausführen von HTML-Code in Visual Studio Code (VSCode) ist sehr einfach, da HTML im Wesentlichen eine statische Auszeichnungssprache ist, die direkt im Browser analysiert und angezeigt werden kann. In diesem Artikel werden die Schritte zum Ausführen und Vorschau von HTML-Code in VSCode beschrieben, einschließlich der Installation von VSCode, der Erstellung von HTML-Dateien, dem Schreiben oder Bearbeiten von HTML-Code, der Vorschau von HTML-Seiten und dem Debuggen von JavaScript-Code.
Das Ausführen von HTML-Code in Visual Studio Code (VSCode) ist relativ einfach, da HTML im Wesentlichen eine statische Auszeichnungssprache ist, die direkt im Browser analysiert und angezeigt werden kann. Wenn Sie jedoch „Code ausführen“ erwähnen, gehe ich davon aus, dass Sie sich auf die Vorschau oder das Debuggen der HTML-Seite und möglicherweise des damit verbundenen JavaScript und CSS beziehen. Hier sind detaillierte Schritte zum Ausführen und Anzeigen von HTML-Code in VSCode:
Schritt 1: Visual Studio-Code installieren
Stellen Sie zunächst sicher, dass Sie die neueste Version von VSCode installiert haben. Sie können es von der offiziellen VSCode-Website (https://code.visualstudio.com/download) herunterladen und installieren.
Schritt 2: HTML-Datei erstellen oder öffnen
Sie können eine neue HTML-Datei erstellen oder eine vorhandene HTML-Datei in VSCode öffnen. Sie können eine neue Datei erstellen, indem Sie in der Seitenleiste auf das Symbol „Neue Datei“ klicken oder die Tastenkombination Strg + N (Windows/Linux) bzw. Befehl + N (Mac) verwenden. Stellen Sie dann beim Speichern der Datei sicher, dass sie die Erweiterung .html hat, z. B. index.html.
Schritt 3: HTML-Code schreiben oder bearbeiten
In der geöffneten HTML-Datei können Sie mit dem Schreiben oder Bearbeiten von HTML-Code beginnen. Eine einfache HTML-Seite könnte so aussehen:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个 HTML 页面</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个简单的 HTML 页面示例。</p>
</body>
</html>Stellen Sie sicher, dass Ihr Code vollständig ist und keine Syntaxfehler aufweist. Die integrierte Syntaxhervorhebungsfunktion von VSCode kann Ihnen dabei helfen, Fehler in Ihrem Code zu identifizieren.
Schritt 4: Vorschau der HTML-Seite anzeigen
VSCode bietet mehrere Methoden zur Vorschau der HTML-Seite:
Methode 1: Verwenden Sie die integrierte Browser-Vorschau.
VSCode verfügt über eine integrierte Browser-Vorschaufunktion, die Sie Klicken Sie auf die Schaltfläche „Go Live“ in der oberen rechten Ecke des Editors oder verwenden Sie die Tastenkombination Alt + B (Windows/Linux) oder Umschalt + Befehlstaste + P und geben Sie Live Server ein: Mit Live Server öffnen (Mac), um a zu starten lokalen Server und zeigen Sie eine Vorschau Ihrer Seite an. Dazu ist ein Plugin namens „Live Server“ erforderlich. Wenn Sie es noch nicht installiert haben, befolgen Sie bitte diese Schritte:
Öffnen Sie den Erweiterungsspeicher von VSCode (indem Sie auf das quadratische Symbol in der Seitenleiste klicken oder Strg + Umschalt + X / Befehlstaste + Umschalt drücken). +X).
Geben Sie „Live Server“ in das Suchfeld ein.
Suchen Sie in den Suchergebnissen nach dem Plugin „Live Server“ und klicken Sie auf die Schaltfläche „Installieren“.
Nachdem die Installation abgeschlossen ist, können Sie Live Server starten und mit der oben beschriebenen Methode eine Vorschau Ihrer HTML-Seite anzeigen. Live Server aktualisiert Ihren Browser automatisch, wenn Sie eine Datei speichern, sodass Sie die Auswirkungen Ihrer Codeänderungen in Echtzeit sehen können.
Methode 2: In einem externen Browser öffnen
Eine andere Möglichkeit, eine HTML-Seite in der Vorschau anzuzeigen, besteht darin, die Datei direkt in einem externen Browser zu öffnen. Sie können die Datei öffnen, indem Sie im Editor mit der rechten Maustaste auf die HTML-Datei klicken und „Im Browser öffnen“ auswählen oder die Tastenkombination Strg + Klick (Windows/Linux) bzw. Befehl + Klick (Mac) verwenden. VSCode versucht, die Datei mit Ihrem Standardbrowser zu öffnen. Bitte beachten Sie jedoch, dass dieser Ansatz möglicherweise keine zugehörigen CSS- oder JavaScript-Dateien lädt, insbesondere wenn sie über relative Pfade referenziert werden.
Schritt 5: Debuggen von JavaScript-Code (optional)
Wenn Ihre HTML-Seite JavaScript-Code enthält und Sie den Code debuggen möchten, können Sie den integrierten Debugger von VSCode verwenden. Zunächst müssen Sie in Ihrem Projekt eine launch.json-Konfigurationsdatei einrichten, um die Debugging-Umgebung zu definieren. VSCode stellt einen Assistenten zum Erstellen dieser Datei bereit. Normalerweise starten Sie diesen Vorgang, indem Sie in der Seitenleiste auf das Symbol „Ausführen und Debuggen“ klicken (oder die Tastenkombination Strg + Umschalt + D bzw. Befehl + Umschalt + D verwenden) und dann auf „Eine launch.json-Datei erstellen“ klicken. Wählen Sie „Chrome“ oder einen anderen Browser, den Sie als Debug-Ziel verwenden, und konfigurieren Sie die entsprechenden Optionen. Anschließend können Sie Haltepunkte in Ihrem JavaScript-Code festlegen und eine Debugging-Sitzung starten, um den Code schrittweise durchzugehen.
Zusammenfassung
Das Ausführen von HTML-Code in VSCode umfasst hauptsächlich das Schreiben und Anzeigen einer Vorschau von HTML-Seiten. Obwohl der HTML-Code selbst nicht kompiliert oder ausgeführt werden muss, lässt sich die Darstellung der Seite mithilfe von Live Server oder beim direkten Öffnen der Datei im Browser leicht verfolgen. Bei komplexen Seiten, die JavaScript enthalten, kann Ihnen die Debugging-Funktion von VSCode beim Debuggen des Codes helfen. Durch die ordnungsgemäße Nutzung der Funktionen und Plug-Ins von VSCode können Sie HTML-Projekte effizienter entwickeln.
Das obige ist der detaillierte Inhalt vonSo führen Sie Code-HTML in vscode aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
