Come aprire nel browser da VS Code

Se utilizzi file HTML, PHP o JS, puoi aprirli in un browser da Visual Studio Code. Tuttavia, non esiste un’opzione integrata per questo. Questo può essere fastidioso, soprattutto se vuoi vedere rapidamente il risultato della tua codifica.

Fortunatamente, puoi abilitare la funzione “Apri nel browser” in altri modi. Questo articolo ti mostrerà come fare.

Come aprire nel browser in VS Code su PC Windows

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

• Aprire il file HTML nell’editor di codice di Visual Studio .

• Nella barra degli strumenti verticale più a sinistra, fai clic su Estensioni. In alternativa, puoi utilizzare la scorciatoia da tastiera “Ctrl + Maiusc + X” per avviare le estensioni.

• Fare clic sulla barra di ricerca per abilitare la voce.

• Digita “apri nel browser”. Seleziona l’estensione che corrisponde alla tua query di ricerca.

• Fare clic sul pulsante “Installa”.

• Ricarica il programma.
• Seleziona Esplora file dalla barra degli strumenti a sinistra.

• Trova il tuo file HTML in Esplora file e fai clic con il pulsante destro del mouse. Seleziona “Apri nel browser predefinito” o “Apri in altri browser”.

• Se selezioni l’opzione “Apri nel browser predefinito”, il file HTML verrà eseguito in qualsiasi browser predefinito. Se selezioni “Apri in altri browser”, dovrai specificare quale browser verrà utilizzato.

Puoi trovare molte estensioni utili in Visual Studio Marketplace . Oppure puoi ottenere le estensioni “Apri nel browser” con le recensioni degli utenti più positive qui: Estensione 1 , Estensione 2 , Estensione 3 , Estensione 4 .

Come aprire nel browser in VS Code su Mac

Visual Studio Code può essere aggiornato con varie estensioni che aumentano le funzionalità del programma. Un tipo di estensione consente di aprire file HTML, PHP o JS nel browser predefinito o in un browser diverso. Ecco come abilitare questa opzione su un Mac.

• Utilizzando l’editor di codice di Visual Studio, aprire il file desiderato.

• Vai alla barra degli strumenti a sinistra e seleziona “Estensioni”.

• Fai clic sulla barra di ricerca sulla barra delle estensioni e scrivi “apri nel browser”.

• Seleziona un’estensione e fai clic su Installa.

• Ricarica il software.
• Vai alla barra degli strumenti a sinistra e seleziona Esplora file.

• Trova il file che desideri aprire nella barra di esplorazione e fai clic con il pulsante destro del mouse su di esso. Seleziona “Apri nel browser predefinito” o “Apri in altri browser”.

• L’opzione “Apri nel browser predefinito” aprirà il file utilizzando il browser preselezionato. “Apri in altri browser” verrà visualizzato un messaggio in cui è possibile selezionare uno dei browser installati sul computer.

Visual Studio Marketplace offre un’ampia varietà di estensioni che possono aggiungere nuove funzionalità a Visual Studio Code. Vale la pena esplorare il sito Web se si desidera personalizzare ulteriormente il programma. E se sei interessato solo alle estensioni di 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 incluse. Tuttavia, le etichette non sono uniformi. Ogni estensione ha invece una specifica combinazione di tasti che attiva l’apertura del file nel tuo browser.

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

• Estensione 1: “Ctrl + 1” su Windows, “Comando + 1” su Mac.

• Estensione 2: “Ctrl + Alt + O” su Windows, “Comando + Opzione (Alt) + O” su Mac.

• Estensione 3: “Ctrl + Maiusc + F9” su Windows, “Comando + Maiusc + F9” su Mac.

• Estensione 4: “Ctrl + Maiusc + P” su Windows, “Comando + Maiusc + P” su Mac.

Tieni presente che queste scorciatoie funzioneranno solo con le estensioni corrispondenti collegate in questo articolo. Se scegli di installare un’altra estensione, molto probabilmente le scorciatoie corrispondenti saranno elencate nella sua pagina Marketplace.

Esecuzione di HTML nel codice di Visual Studio

Se sei interessato a lavorare con HTML in Visual Studio Code, ecco alcuni modi per eseguire codice HTML nel tuo programma.

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

• Apri Visual Studio Code e crea un nuovo file HTML.

• Vai su File, quindi fai clic su Salva.

• Utilizzando HTML:5, attiva il modello per HTML. Quindi apri il file che hai salvato nel passaggio 2.

• Usa l’estensione “Apri nel browser” che hai installato in precedenza per avviare il file nel browser.
• Con il browser aperto, torna a Visual Studio Code e modifica il file HTML, salvando le modifiche.

• Torna al browser e fai clic su Aggiorna. Dovresti vedere la pagina cambiare a seconda della tua modifica.

• Ripeti i passaggi 5 e 6 per verificare 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 ne vale la pena.

• In Visual Studio Code, vai alla sezione “Estensioni” situata nella parte inferiore della barra degli strumenti a sinistra.

• Nella barra di ricerca delle estensioni, digita “server live”.

• Fare clic sul pulsante “Installa” accanto all’estensione di Live Server.

• Crea e salva un nuovo file HTML.

• In Visual Studio Code Explorer, fare clic con il pulsante destro del mouse sul nuovo file. Seleziona “Apri server live”.

• Il file HTML si aprirà nel browser. Quando ciò accade, prova a modificare il codice HTML. Salva i tuoi progressi.

• Non appena apporti una modifica al codice e lo salvi, il browser dovrebbe aggiornarsi mostrando il nuovo contenuto. Non sarà necessario aggiornare manualmente la pagina, ma potrai confermare visivamente le modifiche in tempo reale.

Altre utili estensioni HTML del codice di Visual Studio

Come accennato, Visual Studio Marketplace è pieno di ottimi strumenti, molti dei quali sono orientati all’HTML. Ecco dieci delle estensioni HTML più utili e apprezzate.

• lit-plugin : uno strumento che fornisce l’evidenziazione della sintassi, convalida l’input e aiuta a completare il codice senza errori. Questa estensione ha regole personalizzate.
• SCSS Everywhere : un’estensione di completamento automatico per le definizioni di classi 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 espandendo il frammento dopo che è stato parzialmente stampato.
• ES6 String HTML : abilita il supporto per il codice stringa es6 per l’evidenziazione della sintassi. Funziona con HTML, CSS, XML, GLSL e altro.
• Elimina attributi HTML : questa estensione rimuoverà gli attributi HTML, nonché gli oggetti e le direttive Angular, Vue e React. Puoi usarlo per aprire e chiudere automaticamente i tag, nonché per selezioni multiple.
• Djaneiro – Django Snippets : un’ampia raccolta di snippet per i modelli HTML di django. L’utilizzo di questa estensione ridurrà notevolmente il tempo trascorso a digitare.
• Anteprima dal vivo : l’estensione Anteprima dal vivo di Microsoft ti consente di ospitare un server locale. Se hai un progetto che non utilizza Angular, React o altri strumenti lato server, questa estensione ti consentirà di eseguire anteprime HTML regolari e in linea con aggiornamento della pagina in tempo reale.
• Oracle JET Core : creata da Oracle Corporation, questa estensione fornisce il supporto completo per i dati HTML Oracle JET personalizzati. Gli snippet inclusi popoleranno automaticamente tutti gli attributi e i tag JET.
• Navigazione CSS : consente di navigare alle definizioni per HTML in CSS, HTML in Less e HTML in Sass. È incluso anche il comando Peek Definition.
• Convertitore di caratteri HTML accentati: sostituisce senza problemi i caratteri speciali con le entità HTML corrispondenti. Questa estensione è utile in determinate situazioni, ma necessaria quando si tratta di stringhe localizzabili.

Puoi eseguire Visual Studio Code dal tuo browser

Oltre a eseguire file HTML in un browser, puoi anche usare tutto il codice di Visual Studio online. Ciò richiede l’esecuzione di una versione specifica di un programma progettato per essere utilizzato in un browser.

Vale la pena notare che questa versione è molto più leggera di Visual Studio Code for Desktop. Tuttavia, può essere una soluzione semplice per una facile navigazione nel repository e nei file e per apportare modifiche minori al codice.

Se desideri provare la versione basata su browser di Visual Studio Code, puoi iniziare subito facendo clic qui .

Prepara i tuoi file HTML ed eseguili

L’apertura di file HTML nel browser è semplificata con un’estensione personalizzata per Visual Studio Code. Se scegli di esplorare l’ampia 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 file HTML nel tuo browser preferito? Che estensione hai usato? Fateci sapere nei commenti qui sotto.