wake-up-neo.com

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

Wie zeige ich meinen HTML-Code in einem Browser mit dem neuen Microsoft Visual Studio-Code an?

Mit Notepad ++ haben Sie die Möglichkeit, in einem Browser auszuführen. Wie kann ich mit Visual Studio Code dasselbe tun?

189
user4863890

Für Windows - Öffnen Sie Ihren Standardbrowser - Getestet mit VS Code v 1.1.0

Antworte auf beide, indem du eine bestimmte Datei öffnest (der Name ist fest codiert) OR öffne JEDE andere Datei.

Schritte:

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

  2. Geben Sie Tasks: Configure Task oder bei älteren Versionen Configure Task Runner ein. Durch Auswahl dieser Option wird die Datei tasks.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 "tasks.json" in den Namen Ihrer Datei zu ändern. Dadurch wird immer diese bestimmte Datei geöffnet, wenn Sie F5 drücken.

    Sie können dies auch festlegen, um die jeweils geöffnete Datei zu öffnen, indem Sie ["${file}"] als Wert für "args" verwenden. Beachten Sie, dass der $ außerhalb des {...} steht, daher ist ["{$file}"] falsch.

  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.

enter image description here

186
yushulx

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

67
Sammydo_55

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

 enter image description here

48
Jose Cherian

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.

32
Vlad Bezden

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

 enter image description here

21
Roel

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

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

12
noontz

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

9
stom

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.

5
Sez

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

2

Ö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

2
Jose Carlos

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

2
Andreas DM

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.

enter image description here

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

  2. 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}"]
}
  1. Wechseln Sie zurück zu Ihrer HTML-Datei und drücken Sie Command + Shift + b um Ihre Seite in Chrome anzuzeigen.
2
Joe Mellin

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

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

1
Manish Sharma

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)

0
PersyJack

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

0
Mrk

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.

0
mad.meesh