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.

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 .
   
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.
   
3. Fare clic sulla barra di ricerca per abilitare la scrittura.
   
4. Immettere "apri nel browser". Scegli un'estensione che corrisponda al termine di ricerca.
   
5. Fare clic sul pulsante "Installa".
   
6. Ricarica il programma.
7. Seleziona Explorer dalla barra degli strumenti a sinistra.
   
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".
   
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.
   
2. Vai alla barra degli strumenti a sinistra e seleziona "Estensioni".
   
3. Fai clic sulla barra di ricerca nel pannello Estensioni e scrivi "apri nel browser".
   
4. Scegli un'estensione e fai clic su "Installa".
   
5. Ricarica il software.
6. Vai alla barra degli strumenti a sinistra e seleziona Explorer.
   
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".
   
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.
   

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.
   
   
2. Estensione 2: "Ctrl + Alt + O" su Windows, "Comando + Opzione (Alt) + O" su Mac.
   
3. Estensione 3: "Ctrl + Maiusc + F9" su Windows, "Comando + Maiusc + F9" su Mac.
   
   
4. Estensione 4: "Ctrl + Maiusc + P" su Windows, "Comando + Maiusc + P" su Mac.
   
   

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.
   
2. Vai su "File", quindi fai clic su "Salva".
   
3. Utilizzando HTML:5, attiva il modello per HTML. Quindi, apri il file che hai salvato nel passaggio 2.
   
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.
   
6. Torna al browser e fai clic su Aggiorna. Dovresti vedere la pagina cambiare in base alla tua modifica.
   
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.
   
2. Nella barra di ricerca delle estensioni, digita "server live".
   
3. Fai clic sul pulsante "Installa" accanto all'estensione Live Server.
   
4. Crea e salva un nuovo file HTML.
   
   
5. In Visual Studio Code Explorer, fai clic con il pulsante destro del mouse sul nuovo file. Seleziona "Apri server live".
   
6. Il file HTML si aprirà nel browser. Una volta fatto, prova a modificare il codice HTML. Salva i tuoi progressi.
   
   
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.
   

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.