Sono entusiasta di condividere la prima estensione ufficiale per VS Code di freeCodeCamp – una modalità tema scuro.

Questo tema utilizza lo schema di colori distintivo di freeCodeCamp, così come le caratteristiche tipografiche e di design dell'interfaccia utente.

Il tema della modalità notturna è minimalista, piacevole alla vista e ti aiuterà a raggiungere un flusso ideale per programmare.

Ecco una preview del tema scuro:

Puoi scaricare questo tema da Visual Studio Marketplace.

Oppure puoi aprire la scheda delle estensioni sul tuo editor VS Code, cercare "freeCodeCamp Dark Theme" e poi installarlo.

Sulla modalità notturna

Questo tema è basato sull'estetica visiva del "Command Line Chic" di freeCodeCamp. Se vuoi sentirti come se fossi in Mr. Robot, questo stile fa per te.

Abbiamo progettato questo tema scuro per raggiungere un equilibrio tra contrasto e atmosfera, leggibilità e stile.

Se sei un appassionato di design, abbiamo riportato i criteri alla base del Command Line Chic nella Guida allo stile della nostra no profit.                      

Credo che andrai a indagare. Buona programmazione.

Visual Studio Code è uno degli editor di codice più popolari esistenti. È gratuito, ha un'interfaccia pulita e ha innumerevoli estensioni che rendono programmare più facile e più divertente.

Sono uno sviluppatore frontend e uso VS Code mentre lavoro sul mio canale YouTube. In molti mi hanno chiesto qual è il modo per far sì che il browser si aggiorni automaticamente mentre programmo, senza usare il pulsante per ricaricare la pagina.

Beh, è possibile se configuri un'utile estensione in VS Code chiamata live-server. In questo post, ti spiegherò nel dettaglio come funziona e come impostare e configurare un live server in VS Code.

Perché dovrei usare l'estensione live-server?

Di solito, quando fai un cambiamento nel tuo codice o scrivi qualcosa di nuovo, hai bisogno di ricaricare la pagina manualmente per vedere i cambiamenti.

In altre parole, se fai 100 modifiche al tuo codice ogni giorno, devi ricaricare la pagina 100 volte.

The live-server extension, however, automates this for you. After installing it, an automated localhost will be able to run in your browser, which you can start with a single button.

L'estensione live-server invece, automatizza questa operazione per te. Dopo averla installata, un localhost automatizzato verrà eseguito nel tuo browser, grazie a un singolo pulsante.

Una volta che apporti dei cambiamenti nel tuo codice o scrivi qualcosa di nuovo, dopo aver salvato, il browser ricaricherà la pagina automaticamente. Così potrai vedere i cambiamenti velocemente e automaticamente.

Se preferisci, puoi vedere il video tutorial qui sotto:

Installa VS Code

Puoi saltare questa parte se hai già installato VS Code sul tuo computer. Altrimenti, puoi scaricarlo dal sito ufficiale.

Dopo che hai scaricato e installato VS Code, vedrai la schermata di benvenuto:

Sul lato sinistro, dovresti vedere alcune icone. Una di quelle (sotto l'icona "no bugs") è il pulsante estensioni:

Dopo averlo premuto, apparirà una barra di ricerca. Digita semplicemente "live server".

Vedrai molte opzioni, così da poter scegliere quella che funziona per il tuo sistema. Io uso Live Server di Ritwick Dey, quindi continuiamo con quella in questo esempio:

Clicca sul pulsante "Install" per installare l'estensione.

Crea una nuova pagina HTML

Per iniziare il live server, assicurati di aver creato almeno una pagina HTML. Per fare ciò, clicca sul pulsare file in cima, poi scegli il pulsante nuovo file e digita index.html:

Problemi di configurazione

Dopo aver creato la pagina HTML e installato l'estensione dovresti vedere un'icona "Go Live" in basso nel campo blu:

Se non la vedi, riavvia VS Code. Poi dovrebbe funzionare.

Clicca sul pulsante "Go Live" e il localhost (assegnato a un numero di porta) dovrebbe partire sul tuo browser. Puoi far partire e fermare il live server in ogni momento premendo sullo stesso pulsante.

Se hai raggiunto questo step, congratulazioni! :) Ora puoi lavorare con il live-server. Altrimenti, se stai ancora avendo problemi, guarda questo post per maggiori informazioni.

Grazie per aver letto quest'articolo! Spero che ti aiuti a installare e configurare l'estensione live server in VS Code.