Come Eseguire un File HTML in Visual Studio Code

Co-redatto da Stan Kats

Visual Studio Code è un editor di codice per la programmazione creato da Microsoft. È disponibile per piattaforme Windows, macOS e Linux. Permette di creare e modificare un codice sorgente scritto in vari linguaggi di programmazione, incluso l'HTML. Tuttavia, come si può eseguire un codice HTML per poter controllare come viene visualizzato a video il risultato che genera? Fortunatamente, esistono numerose estensioni per Visual Studio Code che permettono di eseguire facilmente un codice HTML direttamente all'interno dell'editor. È possibile usare anche la console "Terminale", che riconduce alla console dei comandi del sistema operativo in uso, per eseguire un file HTML. Questo articolo spiega come eseguire un codice HTML usando Visual Studio Code.

Metodo 1

Metodo 1 di 4:

Creare, Modificare e Salvare un File HTML

1
Avvia Visual Studio Code. È caratterizzato da un'icona blu raffigurante il logo di Visual Studio. Clicca sull'icona indicata per avviare il programma. La troverai nel menu "Start" di Windows, nella cartella "Applicazioni" su Mac o nel menu "App" su Linux.
- Se non hai ancora installato Visual Studio Code sul computer, puoi scaricarlo gratuitamente usando questo link. Clicca semplicemente sul pulsante Download visibile nella pagina web che apparirà. Al termine del download, esegui il file di installazione direttamente dal browser internet oppure dalla cartella in cui è stato salvato (normalmente, si tratta della cartella "Download"). Segui le istruzioni che appariranno a video per completare l'installazione.
2
Apri il documento che contiene il codice HTML o creane uno nuovo. Segui queste istruzioni per aprire un file esistente o crearne uno nuovo:
- Per creare un nuovo file clicca sul menu File che trovi sulla barra dei menu, quindi clicca sull'opzione Nuovo file. A questo punto, inizia a creare il tuo codice HTML.
- Per aprire un file esistente clicca sul menu File che trovi sulla barra dei menu, quindi clicca sull'opzione Apri file. Accedi alla cartella in cui è memorizzato il file HTML da aprire e clicca sull'icona corrispondente per selezionarlo, quindi clicca sul pulsante Apri.
3
Salva il file come documento HTML. Quando sei pronto per eseguire il codice HTML che hai creato con Visual Studio Code, per prima cosa devi salvare il tuo lavoro sotto forma di file HTML. Dopo aver creato il documento HTML, potrai eseguirlo all'interno di qualsiasi browser internet. Segui queste istruzioni per salvare il codice HTML sotto forma di file usando Visual Studio Code:
- Clicca sul menu File;
- Clicca sull'opzione Salva con nome;
- Assegna un nome al file digitandolo nel campo "Nome file";
- Usa il menu a discesa "Salva come" per selezionare l'opzione "HTML";
- Clicca sul pulsante Salva.
Pubblicità

Metodo 2

Metodo 2 di 4:

Usare la Finestra Terminale

1
Avvia Visual Studio Code. È caratterizzato da un'icona blu raffigurante il logo di Visual Studio. Clicca sull'icona indicata per avviare il programma. La troverai nel menu "Start" di Windows, nella cartella "Applicazioni" su Mac o nel menu "App" su Linux.
2
Apri un file HTML esistente o creane uno nuovo. Se devi creare il tuo codice HTML, crea un nuovo file, aggiungi il codice e salvalo come documento HTML. Se hai già pronto un file HTML, aprilo all'interno di Visual Studio Code. A questo punto, clicca sulla scheda che contiene il codice HTML visualizzata nella parte superiore della finestra.
3
Apri una finestra "Terminale". Clicca sul menu Terminale collocato nella parte superiore della finestra di Visual Studio Code. Clicca sulla voce Nuovo terminale. La finestra "Terminale" è l'unico modo per poter eseguire un file HTML direttamente all'interno di Visual Studio Code senza ricorrere all'utilizzo di un'estensione. Tuttavia, si tratta anche del metodo più complesso.
- In alternativa, clicca sul menu Visualizza, quindi clicca sull'opzione Terminale.
4
Digita il comando cd seguito dal percorso completo dove è memorizzato il file HTML e premi il tasto Invio. In questo modo, come cartella di lavoro della console dei comandi, verrà impostata la directory in cui è salvato il file HTML da eseguire. Per esempio, se il documento HTML in oggetto è memorizzato nella cartella "Documenti", dovrai digitare il comando cd \Users\[nome_utente]\Documents e premere il tasto Invio.
- Se il file HTML è stato salvato in una partizione o un disco diverso da quello di sistema (cioè dove risiede l'installazione del sistema operativo), dovrai accedere a tale unità prima di poter usare il comando indicato. Per cambiare unità di memoria dalla console dei comandi, digita la lettera dell'unità che identifica la partizione o il disco desiderato (per esempio D: per l'unità "D:") e premi il tasto Invio.
- Se non sai dove è memorizzato il file HTML da eseguire, clicca sulla scheda in cui è riportato il nome del file HTML con il tasto destro del mouse e seleziona l'opzione Copia percorso dal menu che apparirà. Digita il comando cd all'interno della finestra "Terminale" e incolla il percorso copiato esattamente dopo il comando "cd". A questo punto, cancella il nome del file presente alla fine del percorso e premi il tasto Invio.
- Se una delle directory indicate nel percorso del file HTML presenta uno spazio vuoto all'interno del nome, la console dei comandi non potrà eseguire il comando impartito. In questo caso, usa la finestra "Esplora file" di Windows o la finestra di "Finder" su Mac per modificare il nome di tutte le cartelle del percorso del file che presenta uno spazio vuoto per eliminarlo (per esempio, se hai salvato il file nella cartella "File HTML", dovrai modificarne il nome in "File_HTML" o "FileHTML").
5
Digita il comando start seguito dal nome del file HTML da eseguire, quindi premi il tasto Invio. Per esempio, se vuoi eseguire il file HTML denominato "index", dovrai digitare il comando start index.html e premere il tasto Invio. In questo modo, il file HTML indicato verrà eseguito in una finestra separata dandoti la possibilità di visualizzare a video il risultato finale.
- Per chiudere la finestra di anteprima in cui è visibile la pagina web che hai creato, clicca semplicemente sull'icona raffigurante la lettera "x" posizionata nella parte superiore della finestra stessa.^{[1]
  X
  Fonte di ricerca}
Pubblicità

Metodo 3

Metodo 3 di 4:

Usare l'Estensione "HTML Preview"

1
Avvia Visual Studio Code. È caratterizzato da un'icona blu raffigurante il logo di Visual Studio. Clicca sull'icona indicata per avviare il programma. La troverai nel menu "Start" di Windows, nella cartella "Applicazioni" su Mac o nel menu "App" su Linux.
2
Clicca sul pulsante "Estensioni". È caratterizzato da un'icona raffigurante quattro piccoli quadrati ed è visibile lungo la barra laterale sinistra della finestra. Verrà visualizzato a video il pannello "Estensioni".
3
Digita le parole chiave HTML Preview nella barra di ricerca. È posizionata nella parte superiore del pannello "Estensioni". Verrà visualizzato l'elenco dei risultati della ricerca in cui saranno presenti tutte le estensioni che corrispondono ai criteri cercati. "HTML Preview" è un'estensione creata per Visual Studio Code: permette di visualizzare un'anteprima dei file HTML direttamente all'interno dell'editor sia in modalità a "schermo intero" sia in modalità "schermo condiviso".
4
Clicca sull'estensione "HTML Preview". Dovrebbe essere la prima voce dell'elenco dei risultati della ricerca. È stata sviluppata da Thomas Haakon Townsend. È caratterizzata da un'icona raffigurante uno scudo arancione con il numero "5" al centro (si tratta del logo ufficiale dello standard HTML 5).
5
Clicca sul pulsante Installa. È posizionato nell'angolo inferiore destro del riquadro dedicato all'estensione "HTML Preview" dell'elenco dei risultati. In questo modo, l'estensione indicata verrà installata in Visual Studio Code. Il completamento dell'installazione dovrebbe richiedere qualche minuto.
6
Apri un file HTML esistente o creane uno nuovo. Se devi creare il tuo codice HTML, crea un nuovo file, aggiungi il codice e salvalo come documento HTML. Se hai già pronto un file HTML, aprilo all'interno di Visual Studio Code. A questo punto, clicca sulla scheda che contiene il codice HTML visualizzata nella parte superiore della finestra perché venga mostrato a video.
7
Clicca sul pulsante "Open Preview". È caratterizzato da un'icona raffigurante una finestra stilizzata e una piccola lente di ingrandimento. È posizionata nell'angolo superiore destro della finestra di Visual Studio Code. Verrà visualizza una finestra di anteprima per il file HTML in esame, affiancata a quella in cui è visibile il codice sorgente.
- Per visualizzare la finestra di anteprima a schermo intero, tieni premuto il tasto Alt mentre clicchi sul pulsante "Open Preview".
- Per chiudere la finestra di anteprima del file HTML, clicca semplicemente sull'icona raffigurante la lettera "x" posizionata nella parte superiore della finestra stessa.
Pubblicità

Metodo 4

Metodo 4 di 4:

Usare l'Estensione "Open in Browser"

1
Avvia Visual Studio Code. È caratterizzato da un'icona blu raffigurante il logo di Visual Studio. Clicca sull'icona indicata per avviare il programma. La troverai nel menu "Start" di Windows, nella cartella "Applicazioni" su Mac o nel menu "App" su Linux.
2
Clicca sul pulsante "Estensioni". È caratterizzato da un'icona raffigurante quattro piccoli quadrati ed è visibile lungo la barra laterale sinistra della finestra. Apparirà a video il pannello "Estensioni".
3
Digita le parole chiave open in browser nella barra di ricerca. È posizionata nella parte superiore del pannello "Estensioni". Verrà visualizzato l'elenco dei risultati della ricerca in cui saranno presenti tutte le estensioni che corrispondono ai criteri cercati. "Open in browser" è un'estensione creata per Visual Studio Code: permette di visualizzare un'anteprima dei file HTML utilizzando il browser internet che preferisci direttamente all'interno di Visual Studio Code.
4
Clicca sull'estensione "Open in browser". Dovrebbe essere la prima voce dell'elenco dei risultati della ricerca. È stata sviluppata dalla TechER. Clicca sul nome dell'estensione per selezionarla.
5
Clicca sul pulsante Installa. È posizionato nell'angolo inferiore destro del riquadro dedicato all'estensione "Open in browser" dell'elenco dei risultati. In questo modo, l'estensione indicata verrà installata in Visual Studio Code. Il completamento dell'installazione dovrebbe richiedere qualche minuto.
6
Apri un file HTML esistente o creane uno nuovo. Se devi creare il tuo codice HTML, crea un nuovo file, aggiungi il codice e salvalo come documento HTML. Se hai già pronto un file HTML, aprilo all'interno di Visual Studio Code. A questo punto, clicca sulla scheda che contiene il codice HTML visualizzata nella parte superiore della finestra perché venga mostrato a video.
7
Clicca su un punto qualsiasi del codice HTML con il tasto destro del mouse. Verrà visualizzato un menu contestuale.
8
Clicca sull'opzione Open in Default Browser. In questo modo, il codice HTML del documento in esame verrà eseguito utilizzando il browser internet predefinito di sistema.^{[2]
X
Fonte di ricerca}
- In alternativa, puoi cliccare sull'opzione Open in Other Browser, per poi scegliere con un doppio clic del mouse il browser internet che vuoi utilizzare per visualizzare l'anteprima del codice HTML su cui stai lavorando.
- Se ti viene chiesto di selezionare un browser internet come predefinito, clicca su quello che preferisci usare per aprire il file HTML in oggetto, quindi clicca sul pulsante OK.
Pubblicità