Come visualizzare un file HTML nel browser con Visual Studio Code


266

Come posso visualizzare il mio codice HTML in un browser con il nuovo codice di Microsoft Visual Studio?

Con Notepad ++ hai la possibilità di eseguire in un browser. Come posso fare la stessa cosa con Visual Studio Code?


7
VS Code ha ora un'estensione del server live. Si prega di vedere la mia risposta: stackoverflow.com/a/48721885/466066
Jose Cherian,

3
L'estensione del server live ha funzionato per me. Non voglio configurare alcun file per fare questo.
AGDM,

Risposte:


209

Per Windows - Apri il browser predefinito - Testato su VS Code v 1.1.0

Rispondere sia all'apertura di un file specifico (il nome è hardcoded) sia all'apertura di QUALSIASI altro file.

passi:

  1. Usa ctrl+ shift+ p(o F1) per aprire la Tavolozza comandi.

  2. Digita Tasks: Configure Tasko su versioni precedenti Configure Task Runner. Selezionandolo si aprirà il file task.json . Elimina lo script visualizzato e sostituiscilo con il seguente:

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

    Ricorda di cambiare la sezione "args" del file task.json con il nome del tuo file. Questo aprirà sempre quel file specifico quando premi F5.

    Puoi anche impostare questo per aprire qualunque file tu abbia aperto in quel momento usando ["${file}"]come valore per "args". Nota che $va oltre {...}, quindi ["{$file}"]non è corretto.

  3. Salva il file.

  4. Torna al tuo file html (in questo esempio è "text.html") e premi ctrl+ shift+ bper visualizzare la tua pagina nel tuo browser web.

inserisci qui la descrizione dell'immagine


16
Puoi anche usare le variabili se hai più di un file HTML. Puoi fare: "args": ["{$ file}"] per passare il file aperto corrente. Vedi anche code.visualstudio.com/Docs/tasks#_variables-in-tasksjson
Dirk Bäumer

7
Come lo faccio su Mac? Non ci sono file exe. Vorrei aprire la pagina Web in Chrome su Mac
InvisibleDev il

3
sto solo ricevendo "Impossibile avviare il programma esterno chrome {$ file}. spawn chrome ENOENT"
johny perché il

7
Per configurare l'attività in una nuova cartella: selezionare il comando Attività: configura Runner attività e verrà visualizzato un elenco di modelli di runner attività. Selezionare Altri per creare un'attività che esegue un comando esterno. . . . Ora dovresti vedere un file task.json nella cartella .vscode dell'area di lavoro con il seguente contenuto:. . . by code.visualstudio.com/Docs/editor/tasks
yu yang Jian

5
Configura Task Runner non è più presente in VSC 1.24.0 - Control-Shift-P non restituisce risultati per quella stringa.
Lonstar,

110

VS Code ha un'estensione di Live Server che supporta l'avvio con un clic dalla barra di stato.

Alcune delle caratteristiche:

  • Avvio con un clic dalla barra di stato
  • Ricarica dal vivo
  • Supporto per Chrome Debugging Attachment

inserisci qui la descrizione dell'immagine


8
Questa estensione ha anche un componente aggiuntivo Web per fornire la funzionalità di ricarica automatica alle pagine dinamiche.
M. Sundstrom,

@ M.Sundstrom puoi darmi il nome / collegamento di quel componente aggiuntivo per favore?
Adil Saju,

2
Ancora molto utile, e soprattutto completamente privo di configurazione!
Jonas,

2
Questo non è raccomandato per pagine complesse, forse va bene per i nuovi programmatori
Yasser Jarouf,

1
ma sembra che non sia possibile visualizzare l'anteprima del file attivo non salvato, giusto? (Eseguendolo, non visualizza in anteprima l'html, ma mostra sul browser la gerarchia delle cartelle)
JinSnow

73

@InvisibleDev - per farlo funzionare su un Mac provando a usare questo:

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

Se hai Chrome già aperto, avvierà il tuo file html in una nuova scheda.


32

Se desideri ricaricare dal vivo, puoi utilizzare gulp-webserver, che controllerà le modifiche ai file e ricaricherà la pagina, in questo modo non dovrai premere F5 ogni volta sulla tua pagina:

Ecco come farlo:

  • Apri il prompt dei comandi (cmd) e digita

    npm install --save-dev gulp-webserver

  • Immettere Ctrl + Maiusc + P in Codice VS e digitare Configura Task Runner . Selezionalo e premi invio. Si aprirà il file Task.json per te. Rimuovi tutto da esso e inserisci il seguente codice

tasks.json

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "webserver",
            "isBuildCommand": true,
            "showOutput": "always"
        }
    ]
}
  • Nella directory principale del progetto aggiungi gulpfile.js e inserisci il seguente codice:

gulpfile.js

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

gulp.task('webserver', function () {
    gulp.src('app')
        .pipe(webserver({
            livereload: true,
            open: true
        }));
});
  • Ora in VS Code inserisci Ctrl + Shift + P e digita "Esegui attività" quando lo inserisci vedrai la tua attività "webserver" selezionata e premi invio.

Il tuo server web ora aprirà la tua pagina nel tuo browser predefinito. Ora tutte le modifiche che farai alle tue pagine HTML o CSS verranno ricaricate automaticamente.

Ecco un'informazione su come configurare 'gulp-webserver' per la porta dell'istanza e quale pagina caricare, ...

Puoi anche eseguire l'attività semplicemente digitando Ctrl + P e digitare task webserver


2
Ho dovuto correre npm install -g gulp, npm install -g gulp-webservere aggiungere una variabile ambiente NODE_PATH che punta a mio AppData \ NPM \ node_modules. Quindi sono stato in grado di eseguire l'attività del server web, tuttavia ottengo un 404 all'avvio del browser. Hai idea di cosa mi manchi?
Kirill Osenkov,

2
Non importa, ho dovuto cambiare 'app' nel tuo esempio in '.' (quindi serve dalla directory corrente).
Kirill Osenkov,

1
Un commento alla risposta: se vuoi eseguire un file html nel tuo browser, che ricaricherà automaticamente le modifiche, il tuo gulpfile.js dovrebbe apparire così, con un '.' anziché "app". Codice = 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
Questo e spettacolare. Grazie per aver spiegato questo come un'opzione preziosa. Ho anche applicato un po 'di entrambe le risposte di Krill e Friis per farlo funzionare. Ma lo fa!
Klewis,

Stavo ottenendo "Cannot GET /" perché ho copypasted gulpfile.js senza configurare la linea in gulp.src('app')modo che indicasse effettivamente la mia fonte (che non era /appma '.'). Funziona perfettamente Grazie!

22

Ora puoi installare un'estensione Visualizza nel browser . L'ho provato su Windows con Chrome e funziona.

versione vscode: 1.10.2

inserisci qui la descrizione dell'immagine


5
Quell'estensione ottiene recensioni orribili.
Jon Crowell,

Questo non aggiorna automaticamente il browser e questo non è ciò che OP sta cercando
Jude Niroshan

18

Ecco una versione 2.0.0 per il documento corrente in Chrome con scorciatoia da tastiera:

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

Per l'esecuzione su un server Web:

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


17

In Linux, è possibile utilizzare il xdg-opencomando per aprire il file con il browser predefinito:

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

6
Grazie! Sono un utente Linux e mi sentivo perso. Vorrei aggiungere che è necessario premere Ctrl + Shift + bper avviarlo nel browser. Per me, il mnemonico era "b = browser". :-)
ankush981

Funziona ma sembra deprecato, se hai una versione aggiornata, grazie
Bruno L.

14

Passo 1:

  1. Apri il codice di Visual Studio, quindi vai alle estensioni.
  2. Cerca "apri nel browser". inserisci qui la descrizione dell'immagine

    3.Installarlo.

    4.Fare clic con il tasto destro sul file html, troverete l'opzione "Apri nel browser". inserisci qui la descrizione dell'immagine

    È tutto................................................ ......


9

Sto solo ripubblicando i passaggi che ho usato dal msdnblog. Potrebbe aiutare la comunità.

Ciò ti aiuterà a configurare un server Web locale noto come lite-server con VS Codee ti guiderà anche a ospitare i tuoi htmlfile statici localhoste il debugtuo Javascriptcodice.

1. Installa Node.js

Se non è già installato, scaricalo qui

Viene fornito con npm (il gestore pacchetti per l'acquisizione e la gestione delle librerie di sviluppo)

2. Crea una nuova cartella per il tuo progetto

Da qualche parte nel tuo disco, crea una nuova cartella per la tua app web.

3. Aggiungere un file package.json nella cartella del progetto

Quindi copia / incolla il seguente testo:

{
   "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. Installa il web server

In una finestra del terminale (prompt dei comandi in Windows) aperta nella cartella del progetto, eseguire questo comando:

npm install

Ciò installerà lite-server (definito in package.json), un server statico che carica index.html nel browser predefinito e lo aggiorna automaticamente quando cambiano i file dell'applicazione.

5. Avviare il server Web locale!

(Supponendo di avere un file index.html nella cartella del progetto).

Nella stessa finestra del terminale (prompt dei comandi in Windows) eseguire questo comando:

npm start

Aspetta un secondo e index.html viene caricato e visualizzato nel tuo browser predefinito servito dal tuo server web locale!

lite-server sta guardando i tuoi file e aggiorna la pagina non appena apporti modifiche a qualsiasi file html, js o css.

E se hai VS Code configurato per il salvataggio automatico (menu File / Auto Save), vedi le modifiche nel browser mentre scrivi!

Appunti:

  • Non chiudere il prompt della riga di comando fino a quando non hai finito di scrivere codice nell'app per il giorno
  • Si apre su http: // localhost: 10001 ma è possibile cambiare la porta modificando il file package.json.

Questo è tutto. Ora, prima di qualsiasi sessione di programmazione, digita npm start e sei a posto!

Originariamente pubblicato qui nel msdnblog. I crediti vanno all'autore:@Laurent Duveau


6

Se sei solo su Mac questo tasks.jsonfile:

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

... è tutto ciò che serve per aprire il file corrente in Safari, supponendo che la sua estensione sia ".html".

Crea tasks.jsoncome descritto sopra e invocalo con + shift+ b.

Se vuoi che si apra in Chrome, allora:

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

Questo farà quello che vuoi, come nell'apertura in una nuova scheda se l'app è già aperta.



4

Risposta aggiornata il 18 aprile 2020

inserisci qui la descrizione dell'immagine

Fai clic su questa icona di gestione in basso a sinistra . Fai clic su Estensioni o scorciatoiaCtrl+Shift+X

Quindi cerca in estensione con questa frase chiave Apri nel browser predefinito . Troverai questa estensione. È meglio per me

Ora fai clic destro sul htmlfile e vedrai Apri nel browser predefinito o Scorciatoia Ctrl+1per vedere il htmlfile nel browser.


3

Per Mac - Apre in Chrome - Testato su VS Code v 1.9.0

  1. Usa Command+ shift+ pper aprire la Tavolozza comandi.

inserisci qui la descrizione dell'immagine

  1. Digita Configura Task Runner, la prima volta che lo fai, VS Code ti darà il menu di scorrimento verso il basso, se seleziona "Altro". Se lo hai già fatto, VS Code ti invierà direttamente a task.json.

  2. Una volta nel file task.json. Elimina lo script visualizzato e sostituiscilo con il seguente:

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": ["${file}"]
}
  1. Torna al tuo file html e premi Command+ Shift+ bper visualizzare la tua pagina in Chrome.

2

CTRL+SHIFT+Pmostrerà la tavolozza dei comandi.
A seconda di cosa stai gestendo, ovviamente. Esempio in un'app ASP.net è possibile digitare:
>kestrele quindi aprire il browser Web e digitare localhost:(your port here).

Se digiti >, ti mostrerà lo show ed eseguirà i comandi

O nel tuo caso con HTML, penso che F5dopo aver aperto la tavolozza dei comandi dovrebbe aprire il debugger.

Fonte: link



2

Aprire i file nel browser Opera (su Windows 64 bit). Aggiungi solo queste righe:

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

Prestare attenzione al formato del percorso su "comando": riga. Non utilizzare il formato "C: \ path_to_exe \ runme.exe".

Per eseguire questa attività, apri il file html che desideri visualizzare, premi F1, digita task opera e premi invio


2

la mia sceneggiatura runner è simile a:

{
    "version": "0.1.0",

    "command": "explorer",

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

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

ed è appena aperto il mio explorer quando premo ctrl shift b nel mio file index.html


2

ecco come è possibile eseguirlo in più browser per Windows

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

notate che non ho digitato nulla in args per Edge perché Edge è il mio browser predefinito che gli ha appena dato il nome del file.

EDIT: inoltre non hai bisogno di -incognito né -private-window ... sono solo io che mi piace vederlo in una finestra privata


Stavo copiando solo la tasksparte. l' "args":["/C"]è ciò che rende questo lavoro. Per curiosità, cosa fa questo?
Ryan B,

1

Recentemente mi sono imbattuto in questa funzione in uno dei tutorial sul codice di Visual Studio in www.lynda.com

Premi Ctrl + K seguito da M, aprirà la "Seleziona modalità lingua" (o fai clic sull'angolo in basso a destra che dice HTML prima di quella faccina), digita markdown e premi Invio

Ora premi Ctrl + K seguito da V, aprirà il tuo html in una scheda vicino.

Tadaaa !!!

Ora i comandi emmet non funzionavano in questa modalità nel mio file html, quindi sono tornato allo stato originale (nota - il tag html tellisense funzionava perfettamente)

Per passare allo stato originale - Premi Ctrl + K seguito da M, seleziona rilevamento automatico. i comandi emmet hanno iniziato a funzionare. Se sei soddisfatto del solo visualizzatore HTML, non è necessario che torni allo stato originale.

Mi chiedo perché vscode non abbia l'opzione di visualizzazione html per impostazione predefinita, quando è in grado di distribuire il file html in modalità markdown.

Comunque è bello. Buona vscoding :)


1
La domanda è su come visualizzare in un browser.
user5389726598465

1

Ecco la versione 2.0.0 per 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}"
      ]
    }
  ]
}

0

Ctrl + F1 aprirà il browser predefinito. in alternativa puoi premere Ctrl + Maiusc + P per aprire la finestra di comando e selezionare "Visualizza nel browser". Il codice html deve essere salvato in un file (codice non salvato nell'editor - senza estensione, non funziona)


1
Quale versione di Visual Studio Code stai usando? Quei comandi non funzionano nel mio 1.8.1 appena aggiornato. Ctrl + F1 non fa nulla e non ho un'opzione Visualizza nel browser nella tavolozza dei comandi. Forse hai qualcosa al di là dell'installazione predefinita o attività extra nelle tue task.json?
jla,

Ho la stessa versione ma mi sono reso conto di aver installato un'estensione per questo. È: marketplace.visualstudio.com/…
PersyJack

0

probabilmente la maggior parte sarà in grado di trovare una soluzione dalle risposte di cui sopra, ma visto che nessuno ha funzionato per me ( vscode v1.34) ho pensato di condividere la mia esperienza. se almeno una persona lo trova utile allora, non un posto sprecato, amiirte ?


comunque, la mia soluzione ( windows) è costruita in cima a @ noontz's. la sua configurazione potrebbe essere stata sufficiente per le versioni precedenti di vscodema non con1.34 (almeno, non riuscivo a farlo funzionare ..).

le nostre configurazioni sono quasi identiche, salvo una singola proprietà: tale proprietà è lagroup proprietà. non sono sicuro del perché, ma senza questo, il mio compito non apparirebbe nemmeno nella tavolozza dei comandi.

così. un lavoro tasks.jsonper gli windowsutenti che eseguono 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": []
        }
    ]
}

tieni presente che la problemMatcherproprietà non è necessaria per il suo funzionamento, ma senza di essa ti viene imposto un passaggio manuale aggiuntivo. ho provato a leggere i documenti su questa proprietà ma sono troppo spessa per capire. spero che qualcuno verrà e mi istruisca, ma sì, grazie in anticipo per quello. tutto quello che so è: includi questa proprietà e ctrl+shift+bapre il htmlfile corrente in una nuova chromescheda, senza problemi.


facile.


0

Apri Chrome personalizzato con URL dal prompt

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

Apri Chrome personalizzato con file attivo

{
  "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": []
},

Appunti

  • se necessario, sostituire la windowsproprietà con un altro sistema operativo
  • sostituisci ${config:chrome.executable}con la tua posizione cromata personalizzata, ad es"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
  • sostituirlo ${config:chrome.profileDir}con la propria directory del profilo Chrome personalizzata, ad es "C:/My/Data/chrome/profile" o lasciala fuori
  • Se lo desideri, puoi conservare le variabili come sopra. Per fare ciò, aggiungi le seguenti voci in settings.json- utente o spazio di lavoro -, regola i percorsi in base alle tue esigenze:
"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"
  • È possibile riutilizzare queste variabili, ad es. launch.jsonPer scopi di debug:"runtimeExecutable": "${config:chrome.executable}"
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.