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.

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 .
   
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.
   
3. Klicken Sie auf die Suchleiste, um das Schreiben zu aktivieren.
   
4. Geben Sie „Im Browser öffnen“ ein. Wählen Sie eine Erweiterung, die Ihrem Suchbegriff entspricht.
   
5. Klicken Sie auf die Schaltfläche „Installieren“.
   
6. Laden Sie das Programm neu.
7. Wählen Sie in der linken Symbolleiste den Explorer aus.
   
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“.
   
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.
   
2. Gehen Sie zur Symbolleiste links und wählen Sie „Erweiterungen“.
   
3. Klicken Sie im Bedienfeld „Erweiterungen“ auf die Suchleiste und schreiben Sie „Im Browser öffnen“.
   
4. Wählen Sie eine Erweiterung und klicken Sie auf „Installieren“.
   
5. Laden Sie die Software neu.
6. Gehen Sie zur linken Symbolleiste und wählen Sie Explorer.
   
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“.
   
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.
   

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.
   
   
2. Erweiterung 2: „Strg + Alt + O“ unter Windows, „Befehl + Wahltaste (Alt) + O“ auf dem Mac.
   
3. Erweiterung 3: „Strg + Umschalt + F9“ unter Windows, „Befehl + Umschalt + F9“ auf dem Mac.
   
   
4. Erweiterung 4: „Strg + Umschalt + P“ unter Windows, „Befehl + Umschalt + P“ auf dem Mac.
   
   

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.
   
2. Gehen Sie zu „Datei“ und klicken Sie dann auf „Speichern“.
   
3. Aktivieren Sie mit HTML:5 die Vorlage für HTML. Öffnen Sie dann die Datei, die Sie in Schritt 2 gespeichert haben.
   
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.
   
6. Kehren Sie zum Browser zurück und klicken Sie auf Aktualisieren. Sie sollten sehen, dass sich die Seite basierend auf Ihrer Bearbeitung ändert.
   
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.
   
2. Geben Sie in der Suchleiste „Erweiterungen“ „Live-Server“ ein.
   
3. Klicken Sie neben der Live Server-Erweiterung auf die Schaltfläche „Installieren“.
   
4. Erstellen und speichern Sie eine neue HTML-Datei.
   
   
5. Klicken Sie im Visual Studio Code Explorer mit der rechten Maustaste auf Ihre neue Datei. Wählen Sie „Live-Server öffnen“.
   
6. Die HTML-Datei wird im Browser geöffnet. Versuchen Sie anschließend, den HTML-Code zu bearbeiten. Speichern Sie Ihren Fortschritt.
   
   
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.
   

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.