Wie zeige ich meinen HTML-Code im Browser mit Visual Studio-Code an?

@InvisibleDev - Damit dies auf einem Mac funktioniert, versuchen Sie Folgendes:

{
    "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 geöffnet.

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

Einige Funktionen:

• One Click Start über die Statusleiste
• Live Reload
• Unterstützung für Chrome-Debugging-Anlagen

Wenn Sie live nachladen möchten, können Sie gulp-webserver verwenden, der Ihre Dateiänderungen überwacht und die Seite neu lädt. Auf diese Weise müssen Sie nicht jedes Mal auf Ihrer Seite die Taste F5 drücken:

So wird's gemacht:

• Öffnen Sie die Eingabeaufforderung (cmd) und geben Sie ein

  npm install --save-dev gulp-webserver

• Geben Sie Ctrl + Shift + P in VS-Code ein und geben Sie Task Runner konfigurieren ein. Wählen Sie es aus und drücken Sie die Eingabetaste. Es öffnet sich die Datei task.json für Sie. Entfernen Sie alles von dort aus, geben Sie einfach folgenden Code ein

aufgaben.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 Ctrl + Shift + P ein und geben Sie "Run Task" ein. Wenn Sie den Code eingeben, sehen Sie Ihre Aufgabe "Webserver" und drücken 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' für den Port und zum Laden der Seite, ...

Sie können Ihre Aufgabe auch ausführen, indem Sie einfach Ctrl + P und task webserver eingeben.

Sie können jetzt eine Erweiterung View In Browser installieren. Ich habe es an Fenstern mit Chrom getestet und es funktioniert.

vscode version: 1.10.2

In Linux können Sie den Befehl xdg-open 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"
}

Für die Ausführung auf einem Webserver im Standardbrowser: npm install http-server -g

{
    "label": "Run on webserver",
    "type": "Shell",
    "command": "http-server",
    "args": [
        "${file}",
        "-p",
        "8080",
        "-c-1",
        "-o"
    ],
    "problemMatcher": []
}

Drücken Sie STRG + C im Terminal, um den Server herunterzufahren

Ich veröffentliche nur die Schritte, die ich im msdn Blog verwendet habe, erneut. Es kann der Gemeinschaft helfen.

Auf diese Weise können Sie einen lokalen Webserver namens Lite-Server mit VS Code Einrichten und Ihre statischen html -Dateien in localhost und debug Ihr Javascript Code.

1. Installiere Node.js

Wenn nicht bereits installiert, holen Sie es sich hier

Es kommt mit npm (dem Paketmanager für die Beschaffung und 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 eine package.json-Datei zum Projektordner hinzu

Dann kopieren Sie den folgenden Text:

{
   "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 Ihrem 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 im selben Terminalfenster (Eingabeaufforderung in Windows) den folgenden Befehl 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 für das automatische Speichern konfiguriert haben (Menü Datei/Automatisch speichern), werden während der Eingabe Änderungen im Browser angezeigt!

Anmerkungen:

• Schließen Sie die Eingabeaufforderung erst, wenn Sie die Programmierung in Ihrer App für diesen Tag abgeschlossen haben
• Es öffnet sich am http: // localhost: 10001 , aber Sie können den Port ändern, indem Sie die Datei package.json bearbeiten.

Das ist es. Jetzt vor jeder Codierungssitzung einfach npm start eingeben und los geht's!

Ursprünglich gepostet hier in msdn Blog. Credits gehen an Autor: @Laurent Duveau

Wenn Sie nur mit einem Mac arbeiten, können Sie diese tasks.json-Datei verwenden:

{
    "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".

tasks.json wie oben beschrieben erstellen und mit aufrufen ⌘+shift+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 wird tun, was Sie wollen, wie beim Öffnen in einem neuen Tab, wenn die App bereits geöffnet ist.

mein Läufer-Skript sieht so aus: 

{
    "version": "0.1.0",

    "command": "Explorer",

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

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

und es öffnet sich einfach mein Explorer, wenn ich in meiner index.html-Datei Strg-Shift b drücke

Ö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}"] }

Beachten Sie das Pfadformat in"command":line. Verwenden Sie nicht das Format "C:\path_to_exe\runme.exe".

Um diese Aufgabe auszuführen, öffnen Sie die anzuzeigende HTML-Datei, drücken Sie F1, geben Sie task opera ein und drücken Sie die Eingabetaste

CTRL+SHIFT+P ruft die Befehlspalette auf.
Abhängig davon, was Sie natürlich ausführen. Beispiel in einer ASP.net-App, die Sie eingeben können:
>kestrel und öffnen Sie dann Ihren Webbrowser und geben Sie localhost:(your port here) ein. 

Wenn Sie > eingeben, werden Ihnen die show- und run-Befehle angezeigt.

Oder in Ihrem Fall mit HTML denke ich, F5 sollte nach dem Öffnen der Befehlspalette den Debugger öffnen.

Quelle: link

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

1. Benutzen 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 "Other" ausgewählt ist. Wenn Sie dies bereits getan haben, sendet VS Code Sie direkt an tasks.json.

3. Einmal in der Datei tasks.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.

so können Sie es in mehreren Browsern für Windows ausführen 

{
 "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 nichts für Edge eingegeben habe, da Edge meinem Standardbrowser nur den Namen der Datei gegeben hat.

BEARBEITEN: Sie brauchen auch nicht -incognito oder -private-window ... nur ich möchte es in einem privaten Fenster anzeigen

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}"
      ]
    }
  ]
}

Ein-Klick-Lösung Installieren Sie einfach open-in-browser Erweiterungen aus dem Visual Studio-Marktplatz.

Strg + F1 öffnet den Standardbrowser. Alternativ können Sie auch Strg + Umschalt + P drücken, um das Befehlsfenster zu öffnen und "In Browser anzeigen" auszuwählen. Der HTML-Code muss in einer Datei gespeichert werden (nicht gespeicherter Code im Editor - ohne Erweiterung, funktioniert nicht)

Dieses Feature wurde kürzlich in einem der Visual Studio Code-Tutorials in www.lynda.com gefunden.

Drücken Sie Strg + K gefolgt von M, um den "Select Language Mode" zu öffnen (oder klicken Sie auf die rechte untere Ecke, die HTML vor diesem Smiley sagt), geben Sie markdown ein und drücken Sie die Eingabetaste

Drücken Sie nun Strg + K gefolgt von V. Es öffnet sich ein HTML-Tab in der Nähe.

Tadaaa !!!

Die emmet-Befehle funktionierten nun nicht in diesem Modus in meiner HTML-Datei. Daher ging ich wieder in den ursprünglichen Zustand (Hinweis - 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 die automatische Erkennung. Emmet-Befehle begannen zu funktionieren. Wenn Sie mit dem HTML-Viewer zufrieden sind, müssen Sie nicht in den ursprünglichen Zustand zurückkehren.

Ich frage mich, warum vscode nicht standardmäßig über die HTML-Viewer-Option verfügt, wenn die HTML-Datei im Markdown-Modus angezeigt werden kann.

Trotzdem ist es cool. Glückliches vscoding :)

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, kühle keinen verschwendeten Beitrag, amiirte?

meine Lösung (windows) basiert auf @ noontz. Seine Konfiguration war möglicherweise für ältere Versionen von vscode ausreichend, aber nicht für 1.34 (zumindest konnte ich es nicht zum Laufen bringen ..).

unsere Konfigurationen sind fast identisch. Speichern Sie eine einzelne Eigenschaft - diese Eigenschaft ist die Eigenschaft group. Ich bin mir nicht sicher, warum, aber ohne dies würde meine Aufgabe nicht einmal in der Befehlspalette erscheinen.

so. Ein funktionierender tasks.json für windows Benutzer, die vscode 1.34 ausführen:

{
    "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 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 und ctrl+shift+b öffnet die aktuelle html -Datei in einem neuen chrome -Reiter, problemlos.

einfach.