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.

Sign up and earn $1000 a day ⋙

Leave a Comment

Perché dovresti spegnere il tuo portatile Windows ogni giorno?

Perché dovresti spegnere il tuo portatile Windows ogni giorno?

Molte persone, quando lasciano il proprio portatile, chiudono semplicemente il coperchio e se ne vanno. Sebbene sia comodo perché il tuo portatile sarà pronto all'uso ogni volta che ne avrai bisogno, questo comportamento può danneggiarlo senza che tu nemmeno te ne accorga.

Come risolvere lo stato di errore della stampante su Windows

Come risolvere lo stato di errore della stampante su Windows

Il messaggio "Stampante in stato di errore" su Windows può apparire per diversi motivi, ad esempio una connessione non riuscita, un problema con il driver o una configurazione errata dei servizi di sistema.

Come disattivare le ricerche recenti su Windows 11

Come disattivare le ricerche recenti su Windows 11

Non a tutti piace vedere le ricerche recenti su Windows 11. Ecco come disattivarle su Windows 11.

Come accedere allo spazio di archiviazione Android su Windows 11

Come accedere allo spazio di archiviazione Android su Windows 11

Puoi accedere direttamente allo spazio di archiviazione del tuo telefono Android in Esplora file di Windows 11 tramite il nuovo Cross Device Experience Host di Microsoft.

Come abilitare o disabilitare laccesso sicuro su Windows 10, Windows 11

Come abilitare o disabilitare laccesso sicuro su Windows 10, Windows 11

Windows è il sistema operativo più preso di mira dagli hacker. Pertanto, dovresti rafforzare il sistema di difesa del tuo PC per rimanere al sicuro sia online che offline. In questo articolo ti spiegherò come abilitare o disabilitare l'accesso sicuro su Windows 10.

23 fantastici screensaver per proteggere lo schermo del tuo computer Windows

23 fantastici screensaver per proteggere lo schermo del tuo computer Windows

Screensaver: salvaschermo del computer che si attiva automaticamente quando il computer non viene utilizzato per un certo periodo di tempo. Ecco 23 bellissimi screensaver per Windows.

Windows 11 apporterà una modifica molto necessaria al menu Start

Windows 11 apporterà una modifica molto necessaria al menu Start

L'ultima modifica in fase di test risolve uno dei problemi più fastidiosi del menu Start di Windows 11 e si spera che venga effettivamente rilasciata.

Elimina completamente i file più ostinati su Windows

Elimina completamente i file più ostinati su Windows

Se non riesci ad aprire, modificare o eliminare un file in Esplora file di Windows, il file è ancora aperto in un programma in esecuzione in background oppure qualcosa non si chiude correttamente.

Come configurare il doppio monitor perfetto su Windows con FancyZones

Come configurare il doppio monitor perfetto su Windows con FancyZones

Se utilizzi regolarmente configurazioni multi-monitor, FancyZones può fare davvero la differenza. Questa utilità Windows PowerToys consente di personalizzare completamente il layout del desktop.

Come utilizzare Google Authenticator su PC Windows

Come utilizzare Google Authenticator su PC Windows

Google Authenticator può essere utile, ma è fastidioso che Google non abbia ancora creato un'app desktop ufficiale. Tuttavia, puoi utilizzare Google Authenticator sul tuo PC Windows anche in altri modi. Scopriamo insieme come puoi utilizzare Google Authenticator sul tuo PC.

Come risolvere lerrore Scheda di rete non trovata su Windows 10

Come risolvere lerrore Scheda di rete non trovata su Windows 10

Molte persone riscontrano problemi con le schede di rete che scompaiono da Gestione dispositivi o ricevono un messaggio di errore che indica che la scheda di rete è mancante. Questo articolo ti guiderà nella risoluzione del problema del driver della scheda di rete mancante su Windows 10.

Come nascondere/visualizzare la barra delle applicazioni su Windows 11

Come nascondere/visualizzare la barra delle applicazioni su Windows 11

In Windows 11, la barra delle applicazioni occupa solo una piccola parte dello spazio di visualizzazione nella parte inferiore dello schermo.

Anche Microsoft sta per adottare Windows Intelligence, imparando da Apple

Anche Microsoft sta per adottare Windows Intelligence, imparando da Apple

Di recente sono iniziati a delinearsi indizi secondo cui Microsoft probabilmente "seguirà la strada" di Apple nel campo dell'intelligenza artificiale.

Come creare un avvio USB utilizzando il prompt dei comandi

Come creare un avvio USB utilizzando il prompt dei comandi

Creare una chiavetta USB avviabile per installare Windows sta diventando sempre più popolare. Esistono molti software che aiutano a creare una chiavetta USB avviabile in pochi clic. Ma se hai familiarità con il Prompt dei comandi, puoi usare questo strumento per creare una chiavetta USB avviabile senza installare software aggiuntivo.

Come ripristinare WordPad in Windows 11

Come ripristinare WordPad in Windows 11

Microsoft abbandonerà il suo editor di testo avanzato gratuito WordPad alla fine del 2023, nel tentativo di consentire agli utenti di passare alle app premium di Office.