So öffnen Sie im Browser aus VS-Code

Wenn Sie HTML-, PHP- oder JS-Dateien verwenden, möchten Sie diese möglicherweise in Ihrem Browser über Visual Studio Code öffnen. Es gibt jedoch keine integrierte Option dafür. Dies kann frustrierend sein, insbesondere wenn Sie einen kurzen Blick auf das Ergebnis Ihrer Codierung werfen möchten.

So öffnen Sie im Browser aus VS-Code

Glücklicherweise können Sie die Funktion „Im Browser öffnen“ auch auf andere Weise aktivieren. Dieser Artikel zeigt Ihnen, wie Sie genau das tun.

So öffnen Sie im Browser in VS Code auf einem Windows-PC

Der einfachste Weg, die Option „Im Browser öffnen“ für Visual Studio Code in Windows zu erhalten, ist die Verwendung einer Erweiterung. Die Installation von Erweiterungen in Visual Studio Code ist relativ einfach, ebenso wie deren Verwendung zum Öffnen von Dateien im Browser.

  1. Öffnen Sie Ihre HTML-Datei im Visual Studio Code Editor .
    So öffnen Sie im Browser aus VS-Code
  2. Klicken Sie in der vertikalen Symbolleiste ganz links auf „Erweiterungen“. Alternativ können Sie die Tastenkombination „Strg + Umschalt + X“ verwenden, um Erweiterungen zu starten.
    So öffnen Sie im Browser aus VS-Code
  3. Klicken Sie auf die Suchleiste, um das Schreiben zu aktivieren.
    So öffnen Sie im Browser aus VS-Code
  4. Geben Sie „Im Browser öffnen“ ein. Wählen Sie eine Erweiterung, die Ihrem Suchbegriff entspricht.
    So öffnen Sie im Browser aus VS-Code
  5. Klicken Sie auf die Schaltfläche „Installieren“.
    So öffnen Sie im Browser aus VS-Code
  6. Laden Sie das Programm neu.
  7. Wählen Sie in der linken Symbolleiste den Explorer aus.
    So öffnen Sie im Browser aus VS-Code
  8. Suchen Sie Ihre HTML-Datei im Explorer und klicken Sie mit der rechten Maustaste darauf. Wählen Sie „Im Standardbrowser öffnen“ oder „In anderen Browsern öffnen“.
    So öffnen Sie im Browser aus VS-Code
  9. Wenn Sie die Option „Im Standardbrowser öffnen“ auswählen, wird die HTML-Datei in dem als Standard eingestellten Browser geöffnet. Wenn Sie „In anderen Browsern öffnen“ wählen, müssen Sie angeben, welcher Browser verwendet werden soll.

Auf dem Visual Studio Marketplace finden Sie zahlreiche nützliche Erweiterungen . Oder Sie erhalten die Open in Browser-Erweiterungen mit den positivsten Benutzerbewertungen hier: Erweiterung 1 , Erweiterung 2 , Erweiterung 3 , Erweiterung 4 .

So öffnen Sie im Browser in VS Code auf einem Mac

Visual Studio Code kann mit verschiedenen Erweiterungen aktualisiert werden, die die Funktionalität des Programms erhöhen. Ein Erweiterungstyp kann das Öffnen von HTML-, PHP- oder JS-Dateien in einem Standard- oder anderen Browser ermöglichen. So aktivieren Sie diese Option auf einem Mac.

  1. Öffnen Sie mit dem Visual Studio Code Editor die gewünschte Datei.
    So öffnen Sie im Browser aus VS-Code
  2. Gehen Sie zur Symbolleiste links und wählen Sie „Erweiterungen“.
    So öffnen Sie im Browser aus VS-Code
  3. Klicken Sie im Bedienfeld „Erweiterungen“ auf die Suchleiste und schreiben Sie „Im Browser öffnen“.
    So öffnen Sie im Browser aus VS-Code
  4. Wählen Sie eine Erweiterung und klicken Sie auf „Installieren“.
    So öffnen Sie im Browser aus VS-Code
  5. Laden Sie die Software neu.
  6. Gehen Sie zur linken Symbolleiste und wählen Sie Explorer.
    So öffnen Sie im Browser aus VS-Code
  7. Suchen Sie im Explorer-Fenster nach der Datei, die Sie öffnen möchten, und klicken Sie mit der rechten Maustaste darauf. Wählen Sie entweder „Im Standardbrowser öffnen“ oder „In anderen Browsern öffnen“.
    So öffnen Sie im Browser aus VS-Code
  8. Die Option „Im Standardbrowser öffnen“ startet die Datei mit dem vorgewählten Browser. „In anderen Browsern öffnen“ öffnet eine Eingabeaufforderung, in der Sie einen der auf Ihrem Computer installierten Browser auswählen können.
    So öffnen Sie im Browser aus VS-Code

Der Visual Studio Marketplace verfügt über eine große Auswahl an Erweiterungen, die Visual Studio Code um neue Funktionen erweitern können. Es lohnt sich, die Website zu erkunden, wenn Sie das Programm weiter optimieren möchten. Und wenn Sie ausschließlich an Open in Browser-Erweiterungen interessiert sind, finden Sie hier einige Vorschläge: Erweiterung 1 , Erweiterung 2 , Erweiterung 3 , Erweiterung 4 .

In Browser-Verknüpfung öffnen

Nahezu jede Open in Browser-Erweiterung für Visual Studio Code verfügt über aktivierte Tastaturkürzel. Allerdings sind die Tastenkombinationen nicht einheitlich. Stattdessen verfügt jede Erweiterung über eine bestimmte Tastenkombination, die das Öffnen der Datei in Ihrem Browser aktiviert.

Hier sind die Tastaturkürzel für die in diesem Artikel vorgeschlagenen Erweiterungen.

  1. Erweiterung 1: „Strg + 1“ unter Windows, „Befehl + 1“ auf Mac.
    So öffnen Sie im Browser aus VS-Code
    So öffnen Sie im Browser aus VS-Code
  2. Erweiterung 2: „Strg + Alt + O“ unter Windows, „Befehl + Wahltaste (Alt) + O“ auf dem Mac.So öffnen Sie im Browser aus VS-Code
    So öffnen Sie im Browser aus VS-Code
  3. Erweiterung 3: „Strg + Umschalt + F9“ unter Windows, „Befehl + Umschalt + F9“ auf dem Mac.
    So öffnen Sie im Browser aus VS-Code
    So öffnen Sie im Browser aus VS-Code
  4. Erweiterung 4: „Strg + Umschalt + P“ unter Windows, „Befehl + Umschalt + P“ auf dem Mac.
    So öffnen Sie im Browser aus VS-Code
    So öffnen Sie im Browser aus VS-Code

Beachten Sie, dass diese Verknüpfungen nur mit den jeweiligen in diesem Artikel verlinkten Erweiterungen funktionieren. Wenn Sie sich für die Installation einer anderen Erweiterung entscheiden, werden die entsprechenden Verknüpfungen wahrscheinlich auf der Marktplatzseite aufgeführt.

Ausführen von HTML in Visual Studio Code

Wenn Sie daran interessiert sind, mit HTML in Visual Studio Code zu arbeiten, finden Sie hier einige Methoden zum Ausführen von HTML-Code innerhalb des Programms.

Die erste Methode besteht darin, die Datei, die Sie ausführen möchten, manuell zu laden.

  1. Öffnen Sie Visual Studio Code und erstellen Sie eine neue HTML-Datei.
    So öffnen Sie im Browser aus VS-Code
  2. Gehen Sie zu „Datei“ und klicken Sie dann auf „Speichern“.
    So öffnen Sie im Browser aus VS-Code
  3. Aktivieren Sie mit HTML:5 die Vorlage für HTML. Öffnen Sie dann die Datei, die Sie in Schritt 2 gespeichert haben.
    So öffnen Sie im Browser aus VS-Code
  4. Verwenden Sie die zuvor installierte Erweiterung „Im Browser öffnen“, um die Datei in Ihrem Browser zu starten.
  5. Lassen Sie den Browser geöffnet, kehren Sie zu Visual Studio Code zurück, bearbeiten Sie die HTML-Datei und speichern Sie Ihre Änderungen.
    So öffnen Sie im Browser aus VS-Code
  6. Kehren Sie zum Browser zurück und klicken Sie auf Aktualisieren. Sie sollten sehen, dass sich die Seite basierend auf Ihrer Bearbeitung ändert.
    So öffnen Sie im Browser aus VS-Code
  7. Wiederholen Sie die Schritte 5 und 6, um Ihren Fortschritt zu überprüfen, während Sie mit der Bearbeitung der HTML-Datei fortfahren.

Die manuelle Methode kann Ihnen dabei helfen, den Überblick über Ihre Arbeit zu behalten. Es gibt jedoch eine noch bessere Lösung: das automatische Laden. Diese Option erfordert die Installation einer weiteren Erweiterung, sollte sich jedoch lohnen.

  1. Gehen Sie in Visual Studio Code zu „Erweiterungen“ unten in der linken Symbolleiste.
    So öffnen Sie im Browser aus VS-Code
  2. Geben Sie in der Suchleiste „Erweiterungen“ „Live-Server“ ein.
    So öffnen Sie im Browser aus VS-Code
  3. Klicken Sie neben der Live Server-Erweiterung auf die Schaltfläche „Installieren“.
    So öffnen Sie im Browser aus VS-Code
  4. Erstellen und speichern Sie eine neue HTML-Datei.
    So öffnen Sie im Browser aus VS-Code
    So öffnen Sie im Browser aus VS-Code
  5. Klicken Sie im Visual Studio Code Explorer mit der rechten Maustaste auf Ihre neue Datei. Wählen Sie „Live-Server öffnen“.
    So öffnen Sie im Browser aus VS-Code
  6. Die HTML-Datei wird im Browser geöffnet. Versuchen Sie anschließend, den HTML-Code zu bearbeiten. Speichern Sie Ihren Fortschritt.
    So öffnen Sie im Browser aus VS-Code
    So öffnen Sie im Browser aus VS-Code
  7. Sobald Sie eine Änderung am Code vornehmen und diese speichern, sollte Ihr Browser aktualisiert werden und den neuen Inhalt anzeigen. Sie müssen die Seite nicht manuell aktualisieren und können stattdessen eine visuelle Bestätigung der Änderungen in Echtzeit erhalten.
    So öffnen Sie im Browser aus VS-Code

Weitere nützliche HTML-Erweiterungen für Visual Studio Code

Wie bereits erwähnt, ist der Visual Studio Marketplace voll von hervorragenden Tools, von denen viele auf HTML ausgerichtet sind. Hier sind die zehn nützlichsten und am besten bewerteten Erweiterungen für HTML.

  • lit-plugin : Ein Tool, das die Syntax hervorhebt, die Eingabe überprüft und Ihnen hilft, den Code fehlerfrei zu vervollständigen. Diese Erweiterung verfügt über anpassbare Regeln.
  • SCSS Everywhere : Eine Erweiterung zur automatischen Vervollständigung von Klassendefinitionen für HTML, SCSS, Elixir, SASS, PHP, CSS und viele andere Dateitypen.
  • Angular Snippets : Fügt Angular Snippets zur einfachen Verwendung in HTML und TypeScript hinzu. Die Erweiterung funktioniert, indem sie ein Snippet entfaltet, sobald es teilweise getippt ist.
  • ES6-String-HTML : Aktiviert die ES6-String-Code-Unterstützung für die Syntaxhervorhebung. Funktioniert mit HTML, CSS, XML, GLSL und anderen Formaten.
  • HTML-Attribute aufteilen : Diese Erweiterung teilt HTML-Attribute sowie Angular-, Vue- und React-Requisiten und -Anweisungen. Sie können es für öffnende und selbstschließende Tags sowie für Mehrfachauswahlen verwenden.
  • Djaneiro – Django Snippets : Eine umfangreiche Snippet-Sammlung für Django-HTML-Vorlagen. Durch die Verwendung dieser Erweiterung wird der Zeitaufwand für das Tippen erheblich verkürzt.
  • Live-Vorschau : Die Live-Vorschau-Erweiterung von Microsoft ermöglicht lokales Server-Hosting. Wenn Sie ein Projekt haben, das Angular, React oder andere Server-Tools nicht verwendet, ermöglicht diese Erweiterung eine regelmäßige und eingebettete HTML-Vorschau mit Seitenaktualisierungen in Echtzeit.
  • Oracle JET Core : Diese von der Oracle Corporation erstellte Erweiterung bietet vollständige Unterstützung für benutzerdefinierte Oracle JET-HTML-Daten. Die enthaltenen Snippets vervollständigen automatisch alle JET-Attribute und -Tags.
  • CSS-Navigation : Aktiviert „Zur Definition gehen“ für HTML zu CSS, HTML zu Less und HTML zu Sass. Der Befehl „Peek Definition“ ist ebenfalls aktiviert.
  • HTML-Zeichenkonverter mit Akzent : Ersetzt Sonderzeichen nahtlos durch entsprechende HTML-Entitäten. Diese Erweiterung ist situativ hilfreich, aber beim Umgang mit lokalisierbaren Zeichenfolgen unerlässlich.

Sie können Visual Studio-Code über Ihren Browser ausführen

Neben der Ausführung von HTML-Dateien in einem Browser ist es auch möglich, den gesamten Visual Studio-Code online zu verwenden. Dazu müssen Sie eine bestimmte Version des Programms starten, die für die Verwendung im Browser entwickelt wurde.

Es ist erwähnenswert, dass diese Version im Vergleich zum Desktop-Visual Studio Code viel schlanker ist. Es kann jedoch eine unkomplizierte Lösung für eine einfache Repository- und Dateinavigation sowie für kleinere Codeänderungen sein.

Wenn Sie die Browservariante Visual Studio Code ausprobieren möchten, können Sie sofort loslegen, indem Sie hier klicken .

Bringen Sie Ihre HTML-Dateien zum Laufen

Das Öffnen von HTML-Dateien in Ihrem Browser wird mit der speziellen Erweiterung für Visual Studio Code vereinfacht. Wenn Sie sich entscheiden, das umfangreiche Angebot an Erweiterungen für dieses Codierungstool zu erkunden, ist die Funktion „Im Browser öffnen“ nur der Anfang Ihrer Reise.

Haben Sie es geschafft, Ihre HTML-Datei im Browser Ihrer Wahl zu öffnen? Welche Erweiterung hast du verwendet? Lassen Sie es uns im Kommentarbereich unten wissen.

Sign up and earn $1000 a day ⋙

Leave a Comment

So beheben Sie den Fehler „Wir benötigen Ihr aktuelles Windows-Passwort“ unter Windows 10/11

So beheben Sie den Fehler „Wir benötigen Ihr aktuelles Windows-Passwort“ unter Windows 10/11

Erhalten Sie die Fehlermeldung „Wir benötigen Ihr aktuelles Windows-Passwort noch einmal“? Dieses lästige Popup kann Sie daran hindern, Ihre Aufgaben zu erledigen.

Beheben Sie schnell den Fehler „Unmountable Boot Volume“ unter Windows 10/11

Beheben Sie schnell den Fehler „Unmountable Boot Volume“ unter Windows 10/11

Der Fehler „Unmountable Boot Volume“ tritt auf, weil installierte Software Konflikte mit dem Betriebssystem verursacht oder weil der Computer plötzlich herunterfährt. Im folgenden Artikel zeigt Ihnen WebTech360 einige Möglichkeiten zur Behebung dieses Fehlers.

So beheben Sie den Zwischenablageverlaufsfehler im neuesten Windows 11-Update

So beheben Sie den Zwischenablageverlaufsfehler im neuesten Windows 11-Update

Wenn Sie den Zwischenablageverlauf zum Speichern von Daten für die spätere Verwendung verwenden, besteht eine geringe Wahrscheinlichkeit, dass die Daten leer bleiben, egal was Sie versuchen.

So entfernen Sie Copilot und andere KI-Funktionen in Windows

So entfernen Sie Copilot und andere KI-Funktionen in Windows

Wenn Sie keine Lust haben, zusätzliche Bloatware auf Ihrem System zu haben, gibt es Möglichkeiten, Windows Copilot unter Windows 11 zu entfernen oder zu deaktivieren.

Warum ist die Schätzung des Laptop-Akkuprozentsatzes nie genau?

Warum ist die Schätzung des Laptop-Akkuprozentsatzes nie genau?

Die meisten Laptop-Nutzer kennen die Situation: Windows zeigt eine verbleibende Akkulaufzeit von zwei Stunden an, fünf Minuten später springt die Anzeige auf fünf Stunden oder sogar nur eine Stunde. Warum springt diese Zeit so hin und her?

10 Windows 11-Einstellungen zur Maximierung der Akkulaufzeit Ihres Laptops

10 Windows 11-Einstellungen zur Maximierung der Akkulaufzeit Ihres Laptops

Laptop-Akkus lassen mit der Zeit nach und verlieren an Kapazität, was zu einer kürzeren Akkulaufzeit führt. Nach einigen detaillierten Anpassungen der Windows 11-Einstellungen sollte sich die Akkulaufzeit jedoch deutlich verbessern.

Microsoft spammt Copilot-QR-Codes auf dem Sperrbildschirm von Windows 11, um Benutzer anzulocken

Microsoft spammt Copilot-QR-Codes auf dem Sperrbildschirm von Windows 11, um Benutzer anzulocken

Im Jahr 2023 setzte Microsoft stark auf künstliche Intelligenz und seine Partnerschaft mit OpenAI, um Copilot Wirklichkeit werden zu lassen.

So deaktivieren Sie Benutzerkonten unter Windows 11

So deaktivieren Sie Benutzerkonten unter Windows 11

Sie können Benutzerkonten deaktivieren, sodass andere nicht mehr auf Ihren Computer zugreifen können.

So schalten Sie den Batteriesparmodus auf einem Windows 11-Laptop ein und aus

So schalten Sie den Batteriesparmodus auf einem Windows 11-Laptop ein und aus

Der Batteriesparmodus von Windows 11 ist eine Funktion zur Verlängerung der Akkulaufzeit von Laptops.

Microsoft bringt neue Haftnotiz-App für Windows 11 auf den Markt

Microsoft bringt neue Haftnotiz-App für Windows 11 auf den Markt

Nachdem die Dinge jahrelang gleich geblieben waren, änderte das Sticky Note-Update Mitte 2024 alles.

So beheben Sie den IRQL NOT LESS OR EQUAL-Fehler unter Windows

So beheben Sie den IRQL NOT LESS OR EQUAL-Fehler unter Windows

Der IRQL NOT LESS OR EQUAL-Fehler ist ein speicherbezogener Fehler, der normalerweise auftritt, wenn ein Systemprozess oder Treiber versucht, ohne entsprechende Zugriffsberechtigungen auf eine Speicheradresse zuzugreifen.

6 Möglichkeiten zum Kopieren von Datei- und Ordnerpfaden in Windows 11

6 Möglichkeiten zum Kopieren von Datei- und Ordnerpfaden in Windows 11

Pfade sind die Speicherorte von Dateien oder Ordnern in Windows 11. Alle Pfade enthalten die Ordner, die Sie öffnen müssen, um zu einem bestimmten Speicherort zu gelangen.

Vergleichen Sie Windows 10 und Windows 11

Vergleichen Sie Windows 10 und Windows 11

Windows 11 ist offiziell gestartet. Im Vergleich zu Windows 10 weist Windows 11 viele Änderungen auf, von der Benutzeroberfläche bis hin zu neuen Funktionen. Weitere Informationen finden Sie im folgenden Artikel.

So laden Sie Windows 11 herunter: Laden Sie die offizielle Win 11 ISO von Microsoft herunter

So laden Sie Windows 11 herunter: Laden Sie die offizielle Win 11 ISO von Microsoft herunter

Derzeit ist Windows 11 offiziell gestartet und wir können die offizielle Windows 11-ISO-Datei oder die Insider Preview-Version zur Installation herunterladen.

Herunterladen, Aktualisieren und Beheben von Problemen mit USB-Treibern unter Windows 10

Herunterladen, Aktualisieren und Beheben von Problemen mit USB-Treibern unter Windows 10

USB-Geräte sind aus unserem Alltag nicht mehr wegzudenken und ermöglichen uns den Anschluss einer großen Bandbreite wichtiger Hardware an unseren PC.