So öffnen Sie im Browser von VS Code

Wenn Sie HTML-, PHP- oder JS-Dateien verwenden, können Sie diese in einem Browser in Visual Studio Code öffnen. Allerdings gibt es dafür keine integrierte Option. Dies kann ärgerlich sein, besonders wenn Sie schnell das Ergebnis Ihrer Codierung sehen möchten.

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

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

Die einfachste Möglichkeit, die Option „Im Browser öffnen“ für Visual Studio Code unter Windows zu erhalten, ist die Verwendung der Erweiterung. Das Installieren von Erweiterungen in Visual Studio Code ist relativ einfach, ebenso wie die Verwendung zum Öffnen von Dateien in einem Browser.

• Öffnen Sie die HTML-Datei im Code-Editor von Visual Studio .

• Klicken Sie in der vertikalen Symbolleiste ganz links auf Erweiterungen. Alternativ können Sie die Tastenkombination „Strg + Umschalt + X“ verwenden, um Erweiterungen zu starten.

• Klicken Sie auf die Suchleiste, um den Eintrag zu aktivieren.

• Geben Sie „Im Browser öffnen“ ein. Wählen Sie die Erweiterung aus, die Ihrer Suchanfrage entspricht.

• Klicken Sie auf die Schaltfläche „Installieren“.

• Laden Sie das Programm neu.
• Wählen Sie in der linken Symbolleiste Datei-Explorer aus.

• Suchen Sie Ihre HTML-Datei im Datei-Explorer und klicken Sie mit der rechten Maustaste darauf. Wählen Sie „In Standardbrowser öffnen“ oder „In anderen Browsern öffnen“.

• Wenn Sie die Option „Im Standardbrowser öffnen“ auswählen, wird die HTML-Datei in jedem Standardbrowser ausgeführt. Wenn Sie „In anderen Browsern öffnen“ auswählen, müssen Sie angeben, welcher Browser verwendet werden soll.

Im Visual Studio Marketplace finden Sie viele nützliche Erweiterungen . Oder Sie erhalten hier die „Im Browser öffnen“-Erweiterungen mit den positivsten Benutzerbewertungen: Erweiterung 1 , Erweiterung 2 , Erweiterung 3 , Erweiterung 4 .

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

Visual Studio Code kann mit verschiedenen Erweiterungen aktualisiert werden, die die Funktionalität des Programms erhöhen. Eine Art von Erweiterung ermöglicht es Ihnen, HTML-, PHP- oder JS-Dateien in Ihrem Standardbrowser oder in einem anderen Browser zu öffnen. So aktivieren Sie diese Option auf einem Mac.

• Öffnen Sie mit dem Code-Editor von Visual Studio die gewünschte Datei.

• Gehen Sie zur Symbolleiste links und wählen Sie „Erweiterungen“.

• Klicken Sie auf die Suchleiste in der Erweiterungsleiste und schreiben Sie „im Browser öffnen“.

• Wählen Sie eine Erweiterung aus und klicken Sie auf Installieren.

• Laden Sie die Software neu.
• Gehen Sie zur linken Symbolleiste und wählen Sie Datei-Explorer.

• Suchen Sie die Datei, die Sie öffnen möchten, in der Explorerleiste und klicken Sie mit der rechten Maustaste darauf. Wählen Sie „In Standardbrowser öffnen“ oder „In anderen Browsern öffnen“.

• Die Option „Im Standardbrowser öffnen“ öffnet 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 bietet eine Vielzahl von Erweiterungen, die Visual Studio Code neue Funktionen hinzufügen können. Es lohnt sich, die Website zu erkunden, wenn Sie das Programm weiter anpassen möchten. Und wenn Sie nur an Open in Browser-Erweiterungen interessiert sind, hier ein paar Vorschläge: Erweiterung 1 , Erweiterung 2 , Erweiterung 3 , Erweiterung 4 .

In Browser-Verknüpfung öffnen

Fast jede Open in Browser-Erweiterung für Visual Studio Code enthält Tastaturkürzel. Allerdings sind die Etiketten nicht einheitlich. Stattdessen hat jede Erweiterung eine bestimmte Tastenkombination, die das Öffnen der Datei in Ihrem Browser aktiviert.

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

• Erweiterung 1: „Strg + 1“ auf Windows, „Befehl + 1“ auf Mac.

• Erweiterung 2: „Strg + Alt + O“ unter Windows, „Command + Option (Alt) + O“ auf Mac.

• Erweiterung 3: „Strg + Umschalt + F9“ auf Windows, „Befehl + Umschalt + F9“ auf Mac.

• Erweiterung 4: „Strg + Umschalt + P“ unter Windows, „Befehl + Umschalt + P“ auf Mac.

Bitte beachten Sie, dass diese Verknüpfungen nur mit den entsprechenden in diesem Artikel verlinkten Erweiterungen funktionieren. Wenn Sie sich für die Installation einer anderen Erweiterung entscheiden, werden die entsprechenden Verknüpfungen höchstwahrscheinlich auf der Marketplace-Seite 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 Möglichkeiten, HTML-Code in Ihrem Programm auszuführen.

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

• Öffnen Sie Visual Studio Code und erstellen Sie eine neue HTML-Datei.

• Gehen Sie zu Datei und klicken Sie dann auf Speichern.

• Aktivieren Sie mit HTML:5 die Vorlage für HTML. Öffnen Sie dann die Datei, die Sie in Schritt 2 gespeichert haben.

• Verwenden Sie die Erweiterung „Im Browser öffnen“, die Sie zuvor installiert haben, um die Datei im Browser zu starten.
• Kehren Sie bei geöffnetem Browser zu Visual Studio Code zurück, bearbeiten Sie die HTML-Datei und speichern Sie Ihre Änderungen.

• Kehren Sie zum Browser zurück und klicken Sie auf Aktualisieren. Sie sollten sehen, dass sich die Seite abhängig von Ihrer Bearbeitung ändert.

• Wiederholen Sie die Schritte 5 und 6, um Ihren Fortschritt zu überprüfen, während Sie die HTML-Datei weiter bearbeiten.

Die manuelle Methode kann Ihnen dabei helfen, den Überblick über Ihre Arbeit zu behalten. Es gibt jedoch eine noch bessere Lösung: Autoloading. Für diese Option müssen Sie eine andere Erweiterung installieren, aber es lohnt sich.

• Wechseln Sie in Visual Studio Code zum Abschnitt „Erweiterungen“, der sich unten in der linken Symbolleiste befindet.

• Geben Sie in der Suchleiste für Erweiterungen „Live Server“ ein.

• Klicken Sie neben der Live Server-Erweiterung auf die Schaltfläche „Installieren“.

• Erstellen und speichern Sie eine neue HTML-Datei.

• Klicken Sie im Visual Studio Code Explorer mit der rechten Maustaste auf die neue Datei. Wählen Sie „Live-Server öffnen“.

• Die HTML-Datei wird im Browser geöffnet. Versuchen Sie in diesem Fall, den HTML-Code zu bearbeiten. Speichern Sie Ihren Fortschritt.

• Sobald Sie eine Änderung am Code vornehmen und speichern, sollte Ihr Browser den neuen Inhalt anzeigen. Sie müssen die Seite nicht manuell aktualisieren, sondern können Änderungen in Echtzeit visuell bestätigen.

Weitere nützliche Visual Studio Code-HTML-Erweiterungen

Wie bereits erwähnt, ist der Visual Studio Marketplace voll von großartigen Tools, von denen viele HTML-orientiert sind. Hier sind zehn der nützlichsten und am besten bewerteten HTML-Erweiterungen.

• lit-plugin : Ein Tool, das Syntaxhervorhebung bietet, Eingaben validiert und dabei hilft, Code fehlerfrei zu vervollständigen. Diese Erweiterung hat benutzerdefinierte Regeln.
• SCSS Everywhere : Eine Autocomplete-Erweiterung für Klassendefinitionen für HTML, SCSS, Elixir, SASS, PHP, CSS und viele andere Dateitypen.
• Angular Snippets : Fügt eckige Snippets zur einfachen Verwendung in HTML und TypeScript hinzu. Die Erweiterung funktioniert, indem das Fragment erweitert wird, nachdem es teilweise gedruckt wurde.
• ES6-String-HTML : Aktiviert die Unterstützung für ES6-String-Code zur Syntaxhervorhebung. Funktioniert mit HTML, CSS, XML, GLSL und mehr.
• HTML-Attribute entfernen : Diese Erweiterung entfernt HTML-Attribute sowie Angular-, Vue- und React-Requisiten und -Anweisungen. Sie können es für öffnende und selbstschließende Tags sowie für Mehrfachselektionen verwenden.
• Djaneiro – Django Snippets : Eine umfangreiche Sammlung von Snippets für Django-HTML-Vorlagen. Durch die Verwendung dieser Erweiterung wird der Zeitaufwand für das Tippen erheblich reduziert.
• Live-Vorschau : Mit der Live-Vorschau-Erweiterung von Microsoft können Sie einen lokalen Server hosten. Wenn Sie ein Projekt haben, das Angular, React oder andere serverseitige Tools nicht verwendet, können Sie mit dieser Erweiterung regelmäßige und Inline-HTML-Vorschauen mit Seitenaktualisierung in Echtzeit durchführen.
• 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 füllen automatisch alle JET-Attribute und -Tags aus.
• CSS-Navigation : Ermöglicht die Navigation zu Definitionen für HTML in CSS, HTML in Less und HTML in Sass. Der Peek-Definition-Befehl ist ebenfalls enthalten.
• Accented HTML Character Converter : Ersetzt Sonderzeichen reibungslos durch entsprechende HTML-Elemente. Diese Erweiterung ist in bestimmten Situationen nützlich, aber notwendig, wenn es um lokalisierbare Zeichenfolgen geht.

Sie können Visual Studio Code in Ihrem Browser ausführen

Neben der Ausführung von HTML-Dateien in einem Browser können Sie auch den gesamten Visual Studio-Code online verwenden. Dazu müssen Sie eine bestimmte Version eines Programms ausführen, das für die Verwendung in einem Browser entwickelt wurde.

Es ist erwähnenswert, dass diese Version viel leichter ist als Visual Studio Code für Desktop. Es kann jedoch eine einfache Lösung für die einfache Navigation durch das Repository und die Dateien und für geringfügige Änderungen am Code sein.

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

Bereiten Sie Ihre HTML-Dateien vor und führen Sie sie aus

Das Öffnen von HTML-Dateien im Browser wird durch eine benutzerdefinierte Erweiterung für Visual Studio Code erleichtert. Wenn Sie sich dafür entscheiden, die umfangreichen Erweiterungsangebote für dieses Codierungstool zu erkunden, ist die Funktion „Im Browser öffnen“ nur der Anfang Ihrer Reise.

Konnten Sie die HTML-Datei in Ihrem bevorzugten Browser öffnen? Welche Erweiterung hast du verwendet? Lassen Sie es uns in den Kommentaren unten wissen.