So zeigen Sie eine HTML-Datei im Browser mit Visual Studio Code an

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?

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:

1. Verwenden Sie ctrl+ shift+ p(oder F1), um die Befehlspalette zu öffnen.

2. Geben Sie Tasks: Configure Taskältere Versionen ein oder ein Configure 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:

   {
       "version": "0.1.0",
       "command": "explorer",    
       "windows": {
           "command": "explorer.exe"
       },
       "args": ["test.html"]
   }

   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.

3. Speicher die Datei.

4. 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.

VS Code verfügt über eine Live Server-Erweiterung , die das Starten mit einem Klick über die Statusleiste unterstützt.

Einige der Funktionen:

• Ein-Klick-Start über die Statusleiste
• Live Reload
• Unterstützung für Chrome Debugging Attachment

@InvisibleDev - damit dies auf einem Mac funktioniert, der dies versucht:

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": [
        "${file}"
    ]
}

Wenn Sie Chrome bereits geöffnet haben, wird Ihre HTML-Datei in einem neuen Tab gestartet.

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

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "webserver",
            "isBuildCommand": true,
            "showOutput": "always"
        }
    ]
}

• Fügen Sie im Stammverzeichnis Ihres Projekts gulpfile.js hinzu und geben Sie folgenden Code ein:

gulpfile.js

var gulp = require('gulp'),
    webserver = require('gulp-webserver');

gulp.task('webserver', function () {
    gulp.src('app')
        .pipe(webserver({
            livereload: true,
            open: true
        }));
});

• Geben Sie nun im VS-Code Strg + Umschalt + P ein und geben Sie "Aufgabe ausführen" ein, wenn Sie ihn eingeben. Sie sehen, dass Ihre Aufgabe "Webserver" ausgewählt ist, und drücken Sie die Eingabetaste.

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

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

Unter Linux können Sie den xdg-openBefehl verwenden, um die Datei mit dem Standardbrowser zu öffnen:

{
    "version": "0.1.0",
    "linux": {
        "command": "xdg-open"
    },
    "isShellCommand": true,
    "showOutput": "never",
    "args": ["${file}"]
}

Hier ist eine 2.0.0-Version für das aktuelle Dokument in Chrome mit Tastenkombination:

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Chrome",
            "type": "process",
            "command": "chrome.exe",
            "windows": {
                "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
            },
            "args": [
                "${file}"
            ],
            "problemMatcher": []
        }
    ]
}

keybindings.json ::

{
    "key": "ctrl+g",
    "command": "workbench.action.tasks.runTask",
    "args": "Chrome"
}

Zum Ausführen auf einem Webserver:

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Schritt 1:

1. Öffnen Sie Visual Studio Code und wechseln Sie zu den Erweiterungen.

2. 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................................................ ......

Ich poste nur die Schritte, die ich im msdnBlog 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 - htmlDateien in localhostund debugIhren JavascriptCode.

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:

{
   "name": "Demo",
   "version": "1.0.0",
   "description": "demo project.",
   "scripts": {
     "lite": "lite-server --port 10001",
     "start": "npm run lite"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "lite-server": "^1.3.1"
   }
}

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:

npm install

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:

npm start

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:

• Schließen Sie die Eingabeaufforderung erst, wenn Sie mit dem Codieren in Ihrer App für diesen Tag fertig sind
• Es wird unter http: // localhost: 10001 geöffnet. Sie können den Port jedoch ändern, indem Sie die Datei package.json bearbeiten.

Das ist es. Geben Sie jetzt vor jeder Codierungssitzung einfach npm start ein und los geht's!

Ursprünglich hier im msdnBlog gepostet . Credits gehen an Autor:@Laurent Duveau

Wenn Sie nur auf einem Mac sind, diese tasks.jsonDatei:

{
    "version": "0.1.0",
    "command": "open",
    "args": ["${file}"],
}

... ist alles, was Sie zum Öffnen der aktuellen Datei in Safari benötigen, vorausgesetzt, die Erweiterung lautet ".html".

Erstellen Sie tasks.jsonwie 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:

{
    "version": "0.1.0",
    "command": "open",
    "args": ["-a", "Chrome.app", "${file}"],
}

Dies macht, was Sie wollen, wie beim Öffnen in einem neuen Tab, wenn die App bereits geöffnet ist.

One-Click-Lösung Installieren Sie einfach Open-in-Browser- Erweiterungen vom Visual Studio-Marktplatz.

Aktualisierte Antwort am 18. April 2020

Klicken Sie auf dieses Symbol zum Verwalten von links unten . Klicken Sie auf Erweiterungen oder VerknüpfungCtrl+Shift+X

Dann in Erweiterung mit diesem Schlüsselsatz suchen Im Standardbrowser öffnen . Sie finden diese Erweiterung. Es ist besser für mich.

Klicken htmlSie nun mit der rechten Maustaste auf die Datei und Sie sehen Öffnen im Standardbrowser oder Verknüpfung Ctrl+1, um die htmlDatei im Browser anzuzeigen.

Für Mac - Wird in Chrome geöffnet - Getestet mit VS Code v 1.9.0

1. Verwenden Sie Command+ shift+ p, um die Befehlspalette zu öffnen.

2. 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.

3. Einmal in der Datei task.json. Löschen Sie das angezeigte Skript und ersetzen Sie es durch Folgendes:

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": ["${file}"]
}

4. Wechseln Sie zurück zu Ihrer HTML-Datei und drücken Sie Command+ Shift+ b, um Ihre Seite in Chrome anzuzeigen.

CTRL+SHIFT+Pwird 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 ein localhost:(your port here).

Wenn Sie >es eingeben, werden Ihnen die Befehle show and run angezeigt

Oder in Ihrem Fall mit HTML denke ich, dass F5nach dem Öffnen der Befehlspalette der Debugger geöffnet werden sollte.

Quelle: Link

Öffnen von Dateien im Opera-Browser (unter Windows 64 Bit). Fügen Sie einfach diese Zeilen hinzu:

{
"version": "0.1.0",
"command": "opera",
"windows": {
    "command": "///Program Files (x86)/Opera/launcher.exe"
},
"args": ["${file}"] }

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

Mein Runner-Skript sieht so aus:

{
    "version": "0.1.0",

    "command": "explorer",

    "windows": {
        "command": "explorer.exe"
    },

    "args": ["{$file}"]
}

und es öffnet einfach meinen Explorer, wenn ich in meiner index.html-Datei die Strg-Umschalttaste b drücke

Hier erfahren Sie, wie Sie es in mehreren Browsern für Windows ausführen können

{
 "version": "0.1.0",
 "command": "cmd",
 "args": ["/C"],
 "isShellCommand": true,
 "showOutput": "always",
 "suppressTaskName": true,
 "tasks": [
     {   
         "taskName": "Chrome",
         "args": ["start chrome -incognito \"${file}\""]
     },
     {   
         "taskName": "Firefox",
         "args": ["start firefox -private-window \"${file}\""]
     },
     {   
         "taskName": "Edge",
         "args": ["${file}"]
     }   
    ]
}

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

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 :)

Hier ist die Version 2.0.0 für Mac OSx:

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "echo",
      "type": "shell",
      "command": "echo Hello"
    },
    {
      "label":"chrome",
      "type":"process",
      "command":"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
      "args": [
        "${file}"
      ]
    }
  ]
}

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)

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, vscodeaber nicht mit 1.34(zumindest konnte ich es nicht zum Laufen bringen ..).

Unsere Konfigurationen sind bis auf eine einzelne Eigenschaft nahezu identisch - diese Eigenschaft ist die groupEigenschaft. Ich bin mir nicht sicher warum, aber ohne dies würde meine Aufgabe nicht einmal in der Befehlspalette erscheinen.

so. a Arbeiten tasks.jsonfür windowsBenutzer, die Folgendes ausführen vscode 1.34:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Chrome",
            "type": "process",
            "command": "chrome.exe",
            "windows": {
                "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
            },
            "args": [
                "${file}"
            ],
            "group": "build",
            "problemMatcher": []
        }
    ]
}

Beachten Sie, dass die problemMatcherEigenschaft 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 und ctrl+shift+bdie aktuelle htmlDatei in einem neuen chromeTab öffnen, problemlos.

einfach.

Öffnen Sie benutzerdefiniertes Chrome mit URL an der Eingabeaufforderung

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Open Chrome",
      "type": "process",
      "windows": {
        "command": "${config:chrome.executable}"
      },
      "args": ["--user-data-dir=${config:chrome.profileDir}", "${input:url}"],
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "url",
      "description": "Which URL?",
      "default": "http://localhost:8080",
      "type": "promptString"
    }
  ]
}

Öffnen Sie benutzerdefiniertes Chrome mit aktiver Datei

{
  "label": "Open active file in Chrome",
  "type": "process",
  "command": "chrome.exe",
  "windows": {
    "command": "${config:chrome.executable}"
  },
  "args": ["--user-data-dir=${config:chrome.profileDir}", "${file}"],
  "problemMatcher": []
},

Anmerkungen

• Falls erforderlich, ersetzen Sie die windowsEigenschaft durch ein anderes Betriebssystem
• Ersetzen Sie ${config:chrome.executable}durch Ihren benutzerdefinierten Chromstandort, z"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
• Ersetzen Sie es ${config:chrome.profileDir}durch Ihr benutzerdefiniertes Chrome-Profilverzeichnis, z. B. "C:/My/Data/chrome/profile"oder lassen Sie es weg
• Sie können die Variablen wie oben beibehalten, wenn Sie möchten. Fügen Sie dazu folgende Einträge hinzu settings.json- Benutzer oder Arbeitsbereich - und passen Sie die Pfade an Ihre Bedürfnisse an:

"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"

• Sie können diese Variablen beispielsweise launch.jsonfür Debugging-Zwecke wiederverwenden :"runtimeExecutable": "${config:chrome.executable}"