Come visualizzare un file HTML nel browser con Visual Studio Code

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?

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.

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

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

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

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

versione vscode: 1.10.2

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

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

Passo 1:

1. Apri il codice di Visual Studio, quindi vai alle estensioni.

2. Cerca "apri nel browser".

   3.Installarlo.

   4.Fare clic con il tasto destro sul file html, troverete l'opzione "Apri nel browser".

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

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

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.

Una soluzione con un clic installa semplicemente le estensioni open-in-browser dal marketplace di Visual Studio.

Risposta aggiornata il 18 aprile 2020

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.

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

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

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

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

4. Torna al tuo file html e premi Command+ Shift+ bper visualizzare la tua pagina in Chrome.

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

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

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

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

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

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

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)

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.

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