Come aprire nel browser da VS Code

Se utilizzi file HTML, PHP o JS, potresti volerli aprire nel browser da Visual Studio Code. Tuttavia, non esiste un'opzione integrata per farlo. Questo può essere frustrante, specialmente se vuoi dare una rapida occhiata al risultato della tua codifica.

Come aprire nel browser da VS Code

Fortunatamente, puoi abilitare la funzione "Apri nel browser" attraverso altri metodi. Questo articolo ti mostrerà come fare proprio questo.

Come aprire nel browser in VS Code su un PC Windows

Il modo più semplice per ottenere l'opzione Apri nel browser per Visual Studio Code in Windows consiste nell'usare un'estensione. L'installazione delle estensioni in Visual Studio Code è relativamente semplice, così come il loro utilizzo per aprire i file nel browser.

  1. Apri il file HTML nell'editor di codice di Visual Studio .
    Come aprire nel browser da VS Code
  2. Sulla barra degli strumenti verticale all'estrema sinistra, fai clic su "Estensioni". In alternativa, puoi utilizzare la scorciatoia da tastiera "Ctrl + Maiusc + X" per avviare le estensioni.
    Come aprire nel browser da VS Code
  3. Fare clic sulla barra di ricerca per abilitare la scrittura.
    Come aprire nel browser da VS Code
  4. Immettere "apri nel browser". Scegli un'estensione che corrisponda al termine di ricerca.
    Come aprire nel browser da VS Code
  5. Fare clic sul pulsante "Installa".
    Come aprire nel browser da VS Code
  6. Ricarica il programma.
  7. Seleziona Explorer dalla barra degli strumenti a sinistra.
    Come aprire nel browser da VS Code
  8. Trova il tuo file HTML in Explorer e fai clic destro su di esso. Scegli "Apri nel browser predefinito" o "Apri in altri browser".
    Come aprire nel browser da VS Code
  9. Se selezioni l'opzione "Apri nel browser predefinito", il file HTML verrà avviato in qualsiasi browser sia impostato come predefinito. Se scegli "Apri in altri browser", dovrai specificare quale browser verrà utilizzato.

Puoi trovare molte estensioni utili in Visual Studio Marketplace . Oppure puoi ottenere le estensioni Open in Browser con le recensioni degli utenti più positive qui: Extension 1 , Extension 2 , Extension 3 , Extension 4 .

Come aprire nel browser in VS Code su un Mac

Visual Studio Code può essere aggiornato utilizzando varie estensioni che aumentano la funzionalità del programma. Un tipo di estensione può consentire l'apertura di file HTML, PHP o JS in un browser predefinito o di altro tipo. Ecco come abilitare questa opzione su un Mac.

  1. Usando Visual Studio Code Editor , apri il file desiderato.
    Come aprire nel browser da VS Code
  2. Vai alla barra degli strumenti a sinistra e seleziona "Estensioni".
    Come aprire nel browser da VS Code
  3. Fai clic sulla barra di ricerca nel pannello Estensioni e scrivi "apri nel browser".
    Come aprire nel browser da VS Code
  4. Scegli un'estensione e fai clic su "Installa".
    Come aprire nel browser da VS Code
  5. Ricarica il software.
  6. Vai alla barra degli strumenti a sinistra e seleziona Explorer.
    Come aprire nel browser da VS Code
  7. Individua il file che desideri aprire nel pannello Explorer e fai clic con il pulsante destro del mouse su di esso. Seleziona "Apri nel browser predefinito" o "Apri in altri browser".
    Come aprire nel browser da VS Code
  8. L'opzione "Apri nel browser predefinito" avvierà il file utilizzando il browser preselezionato. "Apri in altri browser" farà apparire un prompt in cui potrai scegliere uno dei browser installati sul tuo computer.
    Come aprire nel browser da VS Code

Visual Studio Marketplace ha una vasta selezione di estensioni che possono aggiungere nuove funzioni a Visual Studio Code. Vale la pena esplorare il sito Web se si desidera modificare ulteriormente il programma. E se sei interessato esclusivamente alle estensioni Apri nel browser, ecco alcuni suggerimenti: Estensione 1 , Estensione 2 , Estensione 3 , Estensione 4 .

Apri nel collegamento del browser

Quasi tutte le estensioni Open in Browser per Visual Studio Code sono dotate di scorciatoie da tastiera abilitate. Tuttavia, le scorciatoie non sono uniformi. Invece, ogni estensione ha una particolare combinazione di tasti che attiverà l'apertura del file nel tuo browser.

Ecco le scorciatoie da tastiera per le estensioni suggerite in questo articolo.

  1. Estensione 1: "Ctrl + 1" su Windows, "Command + 1" su Mac.
    Come aprire nel browser da VS Code
    Come aprire nel browser da VS Code
  2. Estensione 2: "Ctrl + Alt + O" su Windows, "Comando + Opzione (Alt) + O" su Mac.Come aprire nel browser da VS Code
    Come aprire nel browser da VS Code
  3. Estensione 3: "Ctrl + Maiusc + F9" su Windows, "Comando + Maiusc + F9" su Mac.
    Come aprire nel browser da VS Code
    Come aprire nel browser da VS Code
  4. Estensione 4: "Ctrl + Maiusc + P" su Windows, "Comando + Maiusc + P" su Mac.
    Come aprire nel browser da VS Code
    Come aprire nel browser da VS Code

Tieni presente che queste scorciatoie funzioneranno solo sulle rispettive estensioni collegate in questo articolo. Se scegli di installare un'estensione diversa, le scorciatoie pertinenti verranno probabilmente elencate nella sua pagina del Marketplace.

Esecuzione di HTML in Visual Studio Code

Se sei interessato a lavorare con l'HTML in Visual Studio Code, ecco alcuni metodi per eseguire il codice HTML all'interno del programma.

Il primo metodo consiste nel caricare manualmente il file che si desidera eseguire.

  1. Apri Visual Studio Code e crea un nuovo file HTML.
    Come aprire nel browser da VS Code
  2. Vai su "File", quindi fai clic su "Salva".
    Come aprire nel browser da VS Code
  3. Utilizzando HTML:5, attiva il modello per HTML. Quindi, apri il file che hai salvato nel passaggio 2.
    Come aprire nel browser da VS Code
  4. Utilizzare l'estensione Apri nel browser installata in precedenza per avviare il file nel browser.
  5. Lasciando aperto il browser, torna a Visual Studio Code e modifica il file HTML, salvando le modifiche.
    Come aprire nel browser da VS Code
  6. Torna al browser e fai clic su Aggiorna. Dovresti vedere la pagina cambiare in base alla tua modifica.
    Come aprire nel browser da VS Code
  7. Ripeti i passaggi 5 e 6 per controllare i tuoi progressi mentre continui a modificare il file HTML.

Il metodo manuale può aiutarti a tenere traccia del tuo lavoro. Tuttavia, esiste una soluzione ancora migliore: il caricamento automatico. Questa opzione richiederà l'installazione di un'altra estensione, ma dovrebbe valerne la pena.

  1. In Visual Studio Code, vai su Estensioni, situato nella parte inferiore della barra degli strumenti a sinistra.
    Come aprire nel browser da VS Code
  2. Nella barra di ricerca delle estensioni, digita "server live".
    Come aprire nel browser da VS Code
  3. Fai clic sul pulsante "Installa" accanto all'estensione Live Server.
    Come aprire nel browser da VS Code
  4. Crea e salva un nuovo file HTML.
    Come aprire nel browser da VS Code
    Come aprire nel browser da VS Code
  5. In Visual Studio Code Explorer, fai clic con il pulsante destro del mouse sul nuovo file. Seleziona "Apri server live".
    Come aprire nel browser da VS Code
  6. Il file HTML si aprirà nel browser. Una volta fatto, prova a modificare il codice HTML. Salva i tuoi progressi.
    Come aprire nel browser da VS Code
    Come aprire nel browser da VS Code
  7. Non appena crei una modifica nel codice e la salvi, il tuo browser dovrebbe aggiornarsi, mostrando il nuovo contenuto. Non avrai bisogno di aggiornare la pagina manualmente e potrai invece avere una conferma visiva delle modifiche in tempo reale.
    Come aprire nel browser da VS Code

Altre utili estensioni HTML del codice di Visual Studio

Come accennato, Visual Studio Marketplace è pieno di strumenti eccellenti, molti dei quali sono orientati all'HTML. Ecco le dieci estensioni più utili e meglio classificate per HTML.

  • lit-plugin : uno strumento che evidenzia la sintassi, controlla la digitazione e ti aiuta a completare il codice senza errori. Questa estensione ha regole personalizzabili.
  • SCSS Everywhere : un'estensione di completamento automatico per le definizioni di classe per HTML, SCSS, Elixir, SASS, PHP, CSS e molti altri tipi di file.
  • Frammenti angolari : aggiunge frammenti angolari per un facile utilizzo in HTML e TypeScript. L'estensione funziona aprendo uno snippet una volta che è stato parzialmente digitato.
  • ES6 String HTML : abilita il supporto del codice stringa es6 per l'evidenziazione della sintassi. Funziona con HTML, CSS, XML, GLSL e altri formati.
  • Dividi attributi HTML : questa estensione dividerà gli attributi HTML, nonché le prop e le direttive Angular, Vue e React. Puoi usarlo su tag di apertura e chiusura automatica, nonché su selezioni multiple.
  • Djaneiro - Django Snippets : una vasta raccolta di snippet per modelli HTML Django. L'utilizzo di questa estensione ridurrà notevolmente il tempo impiegato per la digitazione.
  • Anteprima dal vivo : l'estensione Anteprima dal vivo di Microsoft consente l'hosting del server locale. Se disponi di un progetto che non utilizza Angular, React o altri strumenti del server, questa estensione consentirà l'anteprima HTML regolare e incorporata con aggiornamenti della pagina in tempo reale.
  • Oracle JET Core : questa estensione creata da Oracle Corporation fornisce il supporto completo per i dati HTML personalizzati di Oracle JET. Gli snippet inclusi completeranno automaticamente qualsiasi attributo e tag JET.
  • Navigazione CSS : abilita Vai alla definizione per HTML in CSS, HTML in Less e HTML in Sass. Anche il comando Peek Definition è abilitato.
  • Convertitore di caratteri accentati HTML : sostituisce perfettamente i caratteri speciali con entità HTML appropriate. Questa estensione è utile a livello di situazione, ma essenziale quando si gestiscono stringhe localizzabili.

Puoi eseguire il codice di Visual Studio dal tuo browser

Oltre a eseguire file HTML in un browser, è anche possibile utilizzare l'intero codice di Visual Studio online. Ciò richiede l'avvio di una particolare versione del programma sviluppato per l'utilizzo del browser.

Vale la pena notare che questa versione è molto più leggera rispetto al codice desktop di Visual Studio. Tuttavia, può essere una soluzione semplice per una facile navigazione tra repository e file, nonché modifiche minori al codice.

Se desideri provare la variante del browser Visual Studio Code, puoi iniziare subito facendo clic qui .

Ottieni i tuoi file HTML attivi e funzionanti

L'apertura di file HTML nel browser è semplificata con l'estensione dedicata per Visual Studio Code. Se decidi di esplorare la vasta offerta di estensioni per questo strumento di codifica, la funzione Apri nel browser sarà solo l'inizio del tuo viaggio.

Sei riuscito ad aprire il tuo file HTML nel tuo browser preferito? Quale estensione hai usato? Fateci sapere nella sezione commenti qui sotto.

Leave a Comment

Risoluzione del problema di assenza di segnale della scheda di acquisizione di Windows 11 a 60 FPS

Risoluzione del problema di assenza di segnale della scheda di acquisizione di Windows 11 a 60 FPS

Problemi con la scheda di acquisizione di Windows 11: nessun segnale a 60 FPS? Scopri soluzioni comprovate per ripristinare streaming e acquisizione di gameplay fluidi. Soluzioni passo passo per prestazioni impeccabili.

Risoluzione Il disco selezionato è dello stile di partizione GPT

Risoluzione Il disco selezionato è dello stile di partizione GPT

Hai problemi con l'errore "Il disco selezionato è di tipo GPT" durante l'installazione di Windows? Scopri soluzioni comprovate per convertire il tuo disco da GPT a MBR senza perdita di dati e tornare a installare senza problemi. Guida passo passo per principianti.

Come risolvere il problema della sovrapposizione delle icone nella barra delle applicazioni di Windows 11

Come risolvere il problema della sovrapposizione delle icone nella barra delle applicazioni di Windows 11

Hai problemi con le icone sovrapposte nella barra delle applicazioni di Windows 11? Scopri soluzioni comprovate e dettagliate per ripristinare una barra delle applicazioni pulita. Soluzioni rapide per un multitasking più fluido e senza frustrazioni.

Risoluzione dei problemi di ritardo nei giochi VBS e HVCI di Windows 11

Risoluzione dei problemi di ritardo nei giochi VBS e HVCI di Windows 11

Problemi di lag durante il gioco su Windows 11 dovuti a VBS e HVCI? Questa guida completa spiega cosa sono, perché causano stuttering e fornisce una risoluzione dettagliata per aumentare gli FPS senza compromettere la sicurezza. Torna a giocare senza interruzioni oggi stesso!

Come risolvere il problema del registro di sistema di Windows 11 e velocizzarlo

Come risolvere il problema del registro di sistema di Windows 11 e velocizzarlo

Hai problemi con un PC Windows 11 lento? Scopri passaggi comprovati per risolvere il problema del registro di sistema, ottimizzare il sistema e ripristinare la velocità della luce. Metodi semplici e sicuri per tutti.

Risolvere il problema del mancato risparmio energetico della batteria del laptop Windows 11

Risolvere il problema del mancato risparmio energetico della batteria del laptop Windows 11

Hai problemi con la batteria del tuo laptop Windows 11 che non si scarica mai? Scopri soluzioni comprovate per risolvere questo fastidioso problema e ottimizzare la durata della batteria senza sforzo. Guida dettagliata all'interno.

Risoluzione dellerrore di memoria grafica integrata di Windows 11

Risoluzione dellerrore di memoria grafica integrata di Windows 11

Hai problemi con l'errore di memoria della scheda grafica integrata di Windows 11? Scopri i passaggi comprovati per risolvere questo fastidioso problema, ottimizzare il tuo sistema e tornare a giocare e multitasking senza problemi.

Risoluzione dei problemi relativi agli errori dei comandi Wget e Curl di Windows 11

Risoluzione dei problemi relativi agli errori dei comandi Wget e Curl di Windows 11

Hai problemi con gli errori dei comandi Wget e Curl su Windows 11? Questa guida completa ti guiderà attraverso passaggi di risoluzione dei problemi, soluzioni e suggerimenti per far funzionare senza problemi i tuoi download e le chiamate API. Aggiornata per gli ultimi aggiornamenti di Windows.

Come risolvere i problemi con i suoni di sistema mancanti di Windows 11

Come risolvere i problemi con i suoni di sistema mancanti di Windows 11

Problemi con i suoni di sistema di Windows 11 mancanti? Scopri soluzioni comprovate per ripristinare senza problemi i suoni di notifica e i segnali acustici di errore. Guida passo passo per un ripristino audio impeccabile.

Come risolvere i problemi di trasparenza di Windows 11 su più GPU

Come risolvere i problemi di trasparenza di Windows 11 su più GPU

Problemi di trasparenza in Windows 11 su configurazioni multi-GPU? Scopri soluzioni comprovate per ripristinare una grafica fluida, migliorare le prestazioni ed eliminare lo sfarfallio. Guida dettagliata per gamer e creator.

Risoluzione dei problemi relativi allunità NAS di Windows 11 non trovata in Esplora risorse

Risoluzione dei problemi relativi allunità NAS di Windows 11 non trovata in Esplora risorse

Hai problemi con l'unità NAS di Windows 11 che non viene visualizzata in Esplora risorse? Scopri questa guida dettagliata alla risoluzione dei problemi per ricollegare facilmente il tuo storage di rete e tornare ad accedere ai file senza problemi. Soluzioni comprovate per problemi comuni come errori di mappatura e problemi di connettività.

Come risolvere la latenza e il buffer underrun della DAW di Windows 11

Come risolvere la latenza e il buffer underrun della DAW di Windows 11

Problemi di latenza e buffer underrun della DAW su Windows 11? Scopri soluzioni comprovate per ottimizzare la configurazione audio, ridurre i ritardi e ottenere una produzione musicale fluida e senza interruzioni.

Come risolvere lerrore delle icone centrate sulla TaskbarX di Windows 11

Come risolvere lerrore delle icone centrate sulla TaskbarX di Windows 11

Hai problemi con l'errore "icone centrate" nella barra delle applicazioni di Windows 11? Scopri le soluzioni dettagliate per riallineare le icone della barra delle applicazioni senza problemi. Aggiornato con le ultime modifiche per un'esperienza fluida.

Risoluzione dellerrore dellotturatore per la privacy della webcam di Windows 11

Risoluzione dellerrore dellotturatore per la privacy della webcam di Windows 11

Hai problemi con l'errore "Otturatore per la privacy della webcam" di Windows 11? Scopri soluzioni comprovate per ripristinare l'accesso alla fotocamera in modo rapido e sicuro. Guida passo passo per una risoluzione dei problemi senza problemi.

Risoluzione del problema Dolby Vision non attivato in Windows 11

Risoluzione del problema Dolby Vision non attivato in Windows 11

Hai problemi con Dolby Vision che non si attiva su Windows 11? Scopri soluzioni dettagliate, suggerimenti per la risoluzione dei problemi e soluzioni di esperti per ottenere immagini HDR vivide e fluide. Di' addio per sempre agli schermi scuri.