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

265

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?

Ninjakannon
quelle
7
VS Code verfügt jetzt über eine Live Server-Erweiterung. Bitte sehen Sie meine Antwort: stackoverflow.com/a/48721885/466066
Jose Cherian
3
Die Live-Server-Erweiterung hat bei mir funktioniert. Ich möchte keine Dateien dafür konfigurieren.
AGDM

Antworten:

209

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.

Geben Sie hier die Bildbeschreibung ein

Yushulx
quelle
16
Sie können sogar Variablen verwenden, wenn Sie mehr als eine HTML-Datei haben. Sie können Folgendes tun: "args": ["{$ file}"], um die aktuell geöffnete Datei zu übergeben. Siehe auch code.visualstudio.com/Docs/tasks#_variables-in-tasksjson
Dirk Bäumer
7
Wie mache ich das auf dem Mac? Es gibt keine exe-Dateien. Ich möchte die Webseite in Chrome auf Mac öffnen
InvisibleDev
3
Ich
bekomme
7
So konfigurieren Sie eine Aufgabe in einem neuen Ordner: Wählen Sie den Befehl Aufgaben: Task Runner konfigurieren, und Sie sehen eine Liste der Task Runner-Vorlagen. Wählen Sie Andere aus , um eine Aufgabe zu erstellen, die einen externen Befehl ausführt. . . . In Ihrem Arbeitsbereich .vscode-Ordner sollte jetzt eine Datei "functions.json" mit folgendem Inhalt angezeigt werden :. . . von code.visualstudio.com/Docs/editor/tasks
yu yang Jian
5
Configure Task Runner ist in VSC 1.24.0 nicht mehr vorhanden - Control-Shift-P gibt keine Ergebnisse für diese Zeichenfolge zurück.
Lonstar
110

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

Geben Sie hier die Bildbeschreibung ein

Jose Cherian
quelle
8
Diese Erweiterung verfügt auch über ein Web-Add-On, mit dem dynamische Seiten automatisch neu geladen werden können.
M. Sundstrom
@ M.Sundstrom Kannst du mir bitte den Namen / Link dieses Add-Ons geben?
Adil Saju
2
Immer noch sehr nützlich und vor allem komplett konfigurationsfrei!
Jonas
2
Dies wird nicht für komplexe Seiten empfohlen, möglicherweise gut für neue
Programmierer
1
aber anscheinend können Sie die nicht gespeicherte aktive Datei nicht in der Vorschau anzeigen, oder? (
Wenn Sie es ausführen
73

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

Sammydo_55
quelle
32

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

Vlad Bezden
quelle
2
Ich musste laufen npm install -g gulp, npm install -g gulp-webserverund 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?
Kirill Osenkov
2
Egal, ich musste nur die 'App' in Ihrem Beispiel in 'ändern'. (so dient es aus dem aktuellen Verzeichnis).
Kirill Osenkov
1
Ein Kommentar zur Antwort: Wenn Sie eine HTML-Datei in Ihrem Browser ausführen möchten, die bei Änderungen automatisch neu geladen wird, sollte Ihre Datei gulpfile.js so aussehen, mit einem '.' anstelle der 'App'. Code = var gulp = require ('gulp'), webserver = require ('gulp-webserver'); gulp.task ('Webserver', function () {gulp.src ('.') .pipe (Webserver ({Fallback: 'index.html', Livereload: true, open: true}));});
Friis1978
1
Das ist fantastisch. Vielen Dank, dass Sie dies als wertvolle Option erklärt haben. Ich hatte auch ein wenig von Krill und Friis 'Antworten angewendet, um dies zum Laufen zu bringen. Aber es tut!
Klewis
Ich habe "Cannot GET /" erhalten, weil ich gulpfile.js kopypastiert habe, ohne die Zeile gulp.src('app')so zu konfigurieren , dass sie tatsächlich auf meine Quelle verweist (was nicht /appnur '.' War ). Funktioniert perfekt. Vielen Dank!
22

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

Geben Sie hier die Bildbeschreibung ein

Roel
quelle
5
Diese Erweiterung bekommt schreckliche Kritiken.
Jon Crowell
Dies aktualisiert den Browser nicht automatisch und dies ist nicht das, wonach OP sucht
Jude Niroshan
17

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}"]
}
Loris
quelle
6
Vielen Dank! Ich bin ein Linux-Benutzer und fühlte mich verloren. Ich möchte hinzufügen, dass man drücken muss Ctrl + Shift + b, um es im Browser zu starten. Für mich war die Mnemonik "b = Browser". :-)
ankush981
Es funktioniert, scheint aber veraltet zu sein. Wenn Sie eine aktualisierte Version haben, danke
Bruno L.
17

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

noontz
quelle
14

Schritt 1:

  1. Öffnen Sie Visual Studio Code und wechseln Sie zu den Erweiterungen.
  2. Suchen Sie nach "Im Browser öffnen". Geben Sie hier die Bildbeschreibung ein

    3.Installieren Sie es.

    4.Klicken Sie mit der rechten Maustaste auf Ihre HTML-Datei. Dort finden Sie die Option "Im Browser öffnen". Geben Sie hier die Bildbeschreibung ein

    Das ist alles................................................ ......

Rinku Choudhary
quelle
9

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

Shaijut
quelle
6

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.

Sez
quelle
4

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

Manish Sharma
quelle
4

Aktualisierte Antwort am 18. April 2020

Geben Sie hier die Bildbeschreibung ein

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.

Herr Perfektionist
quelle
3

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.

Geben Sie hier die Bildbeschreibung ein

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

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

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

Andreas DM
quelle
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}"] }

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

Jose Carlos
quelle
2

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

Sahar Ben-Shushan
quelle
2

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

Abdel-Rahman Muhammed
quelle
Ich habe nur den tasksTeil kopiert . das "args":["/C"]ist es, was diese Arbeit macht. Was macht das aus Neugier?
Ryan B
1

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

Mrk
quelle
1
Die Frage ist, wie man in einem Browser anzeigt.
user5389726598465
1

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

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)

PersyJack
quelle
1
Welche Version von Visual Studio Code verwenden Sie? Diese Befehle funktionieren in meiner gerade aktualisierten Version 1.8.1 nicht. Strg + F1 macht nichts und ich habe keine Option Im Browser anzeigen in der Befehlspalette. Vielleicht haben Sie etwas anderes als die Standardinstallation oder zusätzliche Aufgaben in Ihrer task.json?
Jla
Ich habe die gleiche Version, aber mir wurde klar, dass ich eine Erweiterung dafür installiert habe. Es ist: marketplace.visualstudio.com/…
PersyJack
0

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.

mad.meesh
quelle
0

Ö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}"
ford04
quelle