Wie kann ich meinen HTML-Code in einem Browser mit dem neuen Microsoft Visual Studio-Code anzeigen?
Mit Notepad ++ haben Sie die Möglichkeit, in einem Browser auszuführen. Wie kann ich dasselbe mit Visual Studio Code tun?
html
visual-studio-code
preview
Ninjakannon
quelle
quelle
Antworten:
Für Windows - Öffnen Sie Ihren Standardbrowser - Getestet mit VS Code v 1.1.0
Beantworten Sie das Öffnen einer bestimmten Datei (der Name ist fest codiert) oder das Öffnen einer anderen Datei.
Schritte:
Verwenden Sie ctrl+ shift+ p(oder F1), um die Befehlspalette zu öffnen.
Geben Sie
Tasks: Configure Task
ältere Versionen ein oder einConfigure Task Runner
. Wenn Sie es auswählen, wird die Datei task.json geöffnet . Löschen Sie das angezeigte Skript und ersetzen Sie es durch Folgendes:Denken Sie daran, den Abschnitt "args" der Datei task.json in den Namen Ihrer Datei zu ändern. Dadurch wird diese bestimmte Datei immer geöffnet, wenn Sie F5 drücken.
Sie können dies auch so einstellen, dass die Datei geöffnet wird, die Sie gerade geöffnet haben, indem Sie
["${file}"]
als Wert für "args" verwenden. Beachten Sie, dass das$
außerhalb der geht{...}
, also["{$file}"]
falsch ist.Speicher die Datei.
Wechseln Sie zurück zu Ihrer HTML-Datei (in diesem Beispiel "text.html") und drücken Sie ctrl+ shift+ b, um Ihre Seite in Ihrem Webbrowser anzuzeigen.
quelle
VS Code verfügt über eine Live Server-Erweiterung , die das Starten mit einem Klick über die Statusleiste unterstützt.
Einige der Funktionen:
quelle
@InvisibleDev - damit dies auf einem Mac funktioniert, der dies versucht:
Wenn Sie Chrome bereits geöffnet haben, wird Ihre HTML-Datei in einem neuen Tab gestartet.
quelle
Wenn Sie ein Live-Reload wünschen, können Sie den gulp-webserver verwenden, der auf Ihre Dateiänderungen achtet und die Seite neu lädt. Auf diese Weise müssen Sie nicht jedes Mal auf Ihrer Seite F5 drücken:
So geht's:
Öffnen Sie die Eingabeaufforderung (cmd) und geben Sie ein
npm install --save-dev gulp-webserver
Geben Sie im VS-Code Strg + Umschalt + P ein und geben Sie Configure Task Runner ein . Wählen Sie es aus und drücken Sie die Eingabetaste. Daraufhin wird die Datei task.json für Sie geöffnet. Entfernen Sie alles davon und geben Sie den folgenden Code ein
task.json
gulpfile.js
Ihr Webserver öffnet jetzt Ihre Seite in Ihrem Standardbrowser. Jetzt werden alle Änderungen, die Sie an Ihren HTML- oder CSS-Seiten vornehmen, automatisch neu geladen.
Hier finden Sie Informationen zum Konfigurieren von 'gulp-webserver' zum Beispiel Port und welche Seite geladen werden soll, ...
Sie können Ihre Aufgabe auch einfach ausführen, indem Sie Strg + P eingeben und den Task-Webserver eingeben
quelle
npm install -g gulp
,npm install -g gulp-webserver
und eine NODE_PATH Umgebungsvariable hinzufügen , dass Punkte auf meine AppData \ NPM \ node_modules. Dann konnte ich die Webserver-Task ausführen, aber ich bekomme eine 404, wenn der Browser startet. Irgendeine Idee, was mir fehlt?gulp.src('app')
so zu konfigurieren , dass sie tatsächlich auf meine Quelle verweist (was nicht/app
nur '.' War ). Funktioniert perfekt. Vielen Dank!Sie können jetzt eine Erweiterung View In Browser installieren . Ich habe es unter Windows mit Chrom getestet und es funktioniert.
vscode version: 1.10.2
quelle
Unter Linux können Sie den
xdg-open
Befehl verwenden, um die Datei mit dem Standardbrowser zu öffnen:quelle
Ctrl + Shift + b
, um es im Browser zu starten. Für mich war die Mnemonik "b = Browser". :-)Hier ist eine 2.0.0-Version für das aktuelle Dokument in Chrome mit Tastenkombination:
tasks.json
keybindings.json
::Zum Ausführen auf einem Webserver:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
quelle
Schritt 1:
Suchen Sie nach "Im Browser öffnen".
3.Installieren Sie es.
4.Klicken Sie mit der rechten Maustaste auf Ihre HTML-Datei. Dort finden Sie die Option "Im Browser öffnen".
Das ist alles................................................ ......
quelle
Ich poste nur die Schritte, die ich im
msdn
Blog verwendet habe. Es kann der Gemeinschaft helfen.Dadurch werden Sie auf Setup einen lokalen Webserver bekannt als Hilfe lite-Server mit
VS Code
, und auch führt Sie Ihre statischen Host -html
Dateien inlocalhost
unddebug
IhrenJavascript
Code.1. Installieren Sie Node.js.
Wenn nicht bereits installiert, erhalten Sie es hier
Es wird mit npm geliefert (dem Paketmanager zum Erwerb und zur Verwaltung Ihrer Entwicklungsbibliotheken).
2. Erstellen Sie einen neuen Ordner für Ihr Projekt
Erstellen Sie irgendwo auf Ihrem Laufwerk einen neuen Ordner für Ihre Web-App.
3. Fügen Sie dem Projektordner eine Datei package.json hinzu
Kopieren Sie dann den folgenden Text / fügen Sie ihn ein:
4. Installieren Sie den Webserver
Führen Sie in einem Terminalfenster (Eingabeaufforderung in Windows), das in Ihrem Projektordner geöffnet ist, den folgenden Befehl aus:
Dadurch wird lite-server (definiert in package.json) installiert, ein statischer Server, der index.html in Ihren Standardbrowser lädt und automatisch aktualisiert, wenn sich Anwendungsdateien ändern.
5. Starten Sie den lokalen Webserver!
(Angenommen, Sie haben eine index.html-Datei in Ihrem Projektordner).
Führen Sie diesen Befehl im selben Terminalfenster (Eingabeaufforderung in Windows) aus:
Warten Sie eine Sekunde und index.html wird geladen und in Ihrem Standardbrowser angezeigt, der von Ihrem lokalen Webserver bereitgestellt wird!
lite-server überwacht Ihre Dateien und aktualisiert die Seite, sobald Sie Änderungen an HTML-, JS- oder CSS-Dateien vornehmen.
Und wenn Sie VS Code so konfiguriert haben, dass er automatisch gespeichert wird (Menü Datei / Automatisch speichern), werden während der Eingabe Änderungen im Browser angezeigt!
Anmerkungen:
Das ist es. Geben Sie jetzt vor jeder Codierungssitzung einfach npm start ein und los geht's!
Ursprünglich hier im
msdn
Blog gepostet . Credits gehen an Autor:@Laurent Duveau
quelle
Wenn Sie nur auf einem Mac sind, diese
tasks.json
Datei:... ist alles, was Sie zum Öffnen der aktuellen Datei in Safari benötigen, vorausgesetzt, die Erweiterung lautet ".html".
Erstellen Sie
tasks.json
wie oben beschrieben und rufen Sie es mit ⌘+ shift+ auf b.Wenn Sie möchten, dass es in Chrome geöffnet wird, gehen Sie wie folgt vor:
Dies macht, was Sie wollen, wie beim Öffnen in einem neuen Tab, wenn die App bereits geöffnet ist.
quelle
One-Click-Lösung Installieren Sie einfach Open-in-Browser- Erweiterungen vom Visual Studio-Marktplatz.
quelle
Aktualisierte Antwort am 18. April 2020
Klicken Sie auf dieses Symbol zum Verwalten von links unten . Klicken Sie auf Erweiterungen oder Verknüpfung
Ctrl+Shift+X
Dann in Erweiterung mit diesem Schlüsselsatz suchen Im Standardbrowser öffnen . Sie finden diese Erweiterung. Es ist besser für mich.
Klicken
html
Sie nun mit der rechten Maustaste auf die Datei und Sie sehen Öffnen im Standardbrowser oder VerknüpfungCtrl+1
, um diehtml
Datei im Browser anzuzeigen.quelle
Für Mac - Wird in Chrome geöffnet - Getestet mit VS Code v 1.9.0
Geben Sie Configure Task Runner ein. Wenn Sie dies zum ersten Mal tun, zeigt VS Code das Bildlaufmenü an, wenn "Andere" ausgewählt ist. Wenn Sie dies bereits getan haben, sendet VS Code Sie direkt an task.json.
Einmal in der Datei task.json. Löschen Sie das angezeigte Skript und ersetzen Sie es durch Folgendes:
quelle
CTRL+SHIFT+P
wird die Befehlspalette aufrufen.Je nachdem, was Sie natürlich laufen. Beispiel in einer ASP.net-App, die Sie eingeben können:
>kestrel
Öffnen Sie dann Ihren Webbrowser und geben Sie einlocalhost:(your port here)
.Wenn Sie
>
es eingeben, werden Ihnen die Befehle show and run angezeigtOder in Ihrem Fall mit HTML denke ich, dass
F5
nach dem Öffnen der Befehlspalette der Debugger geöffnet werden sollte.Quelle: Link
quelle
Öffnen von Dateien im Opera-Browser (unter Windows 64 Bit). Fügen Sie einfach diese Zeilen hinzu:
Achten Sie auf das Pfadformat in der Zeile "Befehl":. Verwenden Sie nicht das Format "C: \ path_to_exe \ runme.exe".
Um diese Aufgabe auszuführen, öffnen Sie die HTML-Datei, die Sie anzeigen möchten, drücken Sie F1, geben Sie task opera ein und drücken Sie die Eingabetaste
quelle
Mein Runner-Skript sieht so aus:
und es öffnet einfach meinen Explorer, wenn ich in meiner index.html-Datei die Strg-Umschalttaste b drücke
quelle
Hier erfahren Sie, wie Sie es in mehreren Browsern für Windows ausführen können
Beachten Sie, dass ich in args für edge nichts eingegeben habe, da Edge mein Standardbrowser ist und ihm nur den Namen der Datei gegeben hat.
EDIT: auch du brauchst weder -incognito noch -private-window ... ich bin es nur, ich sehe es gerne in einem privaten Fenster
quelle
tasks
Teil kopiert . das"args":["/C"]
ist es, was diese Arbeit macht. Was macht das aus Neugier?Diese Funktion wurde kürzlich in einem der Visual Studio-Code-Tutorials auf www.lynda.com gefunden
Drücken Sie Strg + K gefolgt von M, um den "Sprachmodus auswählen" zu öffnen (oder klicken Sie auf die rechte untere Ecke, in der HTML vor diesem Smiley steht), geben Sie Markdown ein und drücken Sie die Eingabetaste
Drücken Sie nun Strg + K gefolgt von V, um Ihr HTML in einer nahe gelegenen Registerkarte zu öffnen.
Tadaaa !!!
Jetzt funktionierten Emmet-Befehle in meinem Modus in meiner HTML-Datei nicht mehr, sodass ich zum ursprünglichen Zustand zurückkehrte (Hinweis - Das HTML-Tag tellisense funktionierte einwandfrei).
So wechseln Sie in den ursprünglichen Zustand: Drücken Sie Strg + K, gefolgt von M, und wählen Sie automatische Erkennung. emmet-Befehle begannen zu funktionieren. Wenn Sie mit dem reinen HTML-Viewer zufrieden sind, müssen Sie nicht zum ursprünglichen Zustand zurückkehren.
Ich frage mich, warum vscode standardmäßig nicht über die HTML-Viewer-Option verfügt, wenn die HTML-Datei im Markdown-Modus angezeigt werden kann.
Jedenfalls ist es cool. Viel Spaß beim vscoding :)
quelle
Hier ist die Version 2.0.0 für Mac OSx:
quelle
Strg + F1 öffnet den Standardbrowser. Alternativ können Sie Strg + Umschalt + P drücken, um das Befehlsfenster zu öffnen und "Im Browser anzeigen" auswählen. Der HTML-Code muss in einer Datei gespeichert werden (nicht gespeicherter Code im Editor - ohne Erweiterung funktioniert nicht)
quelle
Wahrscheinlich werden die meisten in der Lage sein, eine Lösung aus den obigen Antworten zu finden, aber da keine für mich funktioniert hat (
vscode v1.34
), dachte ich, ich würde meine Erfahrungen teilen. Wenn mindestens eine Person es dann hilfreich findet, cool, kein verschwendeter Beitrag, amiirte ?Wie auch immer, meine Lösung (
windows
) basiert auf @ noontz. Seine Konfiguration war möglicherweise ausreichend für ältere Versionen von,vscode
aber nicht mit1.34
(zumindest konnte ich es nicht zum Laufen bringen ..).Unsere Konfigurationen sind bis auf eine einzelne Eigenschaft nahezu identisch - diese Eigenschaft ist die
group
Eigenschaft. Ich bin mir nicht sicher warum, aber ohne dies würde meine Aufgabe nicht einmal in der Befehlspalette erscheinen.so. a Arbeiten
tasks.json
fürwindows
Benutzer, die Folgendes ausführenvscode 1.34
:Beachten Sie, dass die
problemMatcher
Eigenschaft nicht erforderlich ist, damit dies funktioniert. Ohne sie wird Ihnen jedoch ein zusätzlicher manueller Schritt auferlegt. Ich habe versucht, die Dokumente zu dieser Eigenschaft zu lesen, aber ich bin zu dick, um sie zu verstehen. hoffentlich kommt jemand und schult mich, aber ja, danke im Voraus dafür. Alles was ich weiß ist - diese Eigenschaft einschließen undctrl+shift+b
die aktuellehtml
Datei in einem neuenchrome
Tab öffnen, problemlos.einfach.
quelle
Öffnen Sie benutzerdefiniertes Chrome mit URL an der Eingabeaufforderung
Öffnen Sie benutzerdefiniertes Chrome mit aktiver Datei
Anmerkungen
windows
Eigenschaft durch ein anderes Betriebssystem${config:chrome.executable}
durch Ihren benutzerdefinierten Chromstandort, z"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
${config:chrome.profileDir}
durch Ihr benutzerdefiniertes Chrome-Profilverzeichnis, z. B."C:/My/Data/chrome/profile"
oder lassen Sie es wegsettings.json
- Benutzer oder Arbeitsbereich - und passen Sie die Pfade an Ihre Bedürfnisse an:launch.json
für Debugging-Zwecke wiederverwenden :"runtimeExecutable": "${config:chrome.executable}"
quelle