
1. Öffnen Sie VScode, klicken Sie auf [Erweiterung], geben Sie Live Server
in das Suchfeld ein, suchen Sie das folgende Plug-in in den Suchergebnissen und wählen Sie zur Installation

2. Nachdem die Installation abgeschlossen ist, starten Sie die Software neu, damit das Plug-in wirksam wird
3. Erstellen Sie nach dem Neustart einen neuen Arbeitsbereich (Sie können auch einen Ordner direkt in vscode) und erstellen Sie eine HTML-Datei zum Testen. Beachten Sie, dass Sie Live Server nicht verwenden können, indem Sie eine neue HTML-Datei in den erstellten Arbeitsbereich (Ordner) ziehen Wenn Sie fertig sind, können Sie es in der Statusleiste sehen. Klicken Sie darauf und der Browser wird automatisch geöffnet.
Tipp: Wenn bereits ein HTML-Projekt vorhanden ist, ziehen Sie es einfach Projektstammordner in VScode und es wird automatisch zum Arbeitsbereich hinzugefügt


4 In der Statusleiste können Sie auch mit der rechten Maustaste auf die Datei klicken und „Mit Live Server öffnen“ auswählen.

5 Als nächstes ändern Sie einfach den Code, um die Änderung zu speichern Code, und der Browser wird automatisch aktualisiert

Empfohlene verwandte Artikel und Tutorials:
Vscode-Tutorial
Das obige ist der detaillierte Inhalt vonWie vscode einen Echtzeit-Vorschaueffekt erzielt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!