Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Visual Studio Code e sviluppo Front-end per il Web

Visual Studio Code è un editor particolarmente indicato per lo sviluppo di siti Web e Web application. Scopriamo perché
Visual Studio Code è un editor particolarmente indicato per lo sviluppo di siti Web e Web application. Scopriamo perché
Link copiato negli appunti

Visual Studio Code è una soluzione particolarmente indicata per i progetti Web. Vediamo ora come crearne uno e lavorarci.

Obiettivi

Lo scopo dell'articolo è quello di imparare ad impostare un progetto Web statico su Visual Studio Code con le tecnologie:

Saranno inoltre trattati Bootstrap, la sintassi EMMET ed il debug di NodeJS.

Prerequisiti

Per poter comprendere tutti i contenuti di quest'articolo è consigliata una conoscenza base di:

È inoltre un presupposto di base che si abbiano installati sul proprio dispositivo:

  • Visual Studio Code
  • NodeJS

Estensioni fondamentali

Visual Studio Code è famoso per la sua malleabilità, dovuta soprattutto alla facilità di adattarsi a qualunque linguaggio e ambiente grazie alle sue estensioni.

Ed è da qua che si parte ogni qual volta si vuole configurare per una nuova tipologia di progetto.

Alcune delle estensioni consigliate sono già state citate in precedenti articoli della stessa guida.

Live Server

Si può avere un anteprima rapida della pagina in tempo reale su un browser esterno tramite l'estensione Live Server con id ritwickdey.LiveServer.

Schermata di installazione di live server

Per avviarlo basta premere il pulsante in basso a destra sulla barra di stato

Come avviare live server

Live Preview

in alternativa è possibile installare l'estensione (ancora in fase di sviluppo) Live Preview di Microsoft, con id ms-vscode.live-server:

Per avviarlo basta poi cercare "Start Live Preview" tramite control panel (CTRL+Shift+P).

avviare live preview

Si aprirà quindi una scheda nell'IDE dove sarà possibile navigare fino ad arrivare alla pagina da mostrare.

preview di funzionamento di livepreview

La live in questo caso viene generata in tempo reale senza dover salvare il file.

CSS Intellisense

Per avere l'auto-completamento delle classi CSS è necessario disporre dell'intellisense CSS. Una delle estensioni che può fornirlo è Zignd.html-css-class-completion.

Installazione di intellisense per CSS

Una volta installata apparirà il simbolo di un fulmine sulla barra di stato (in basso). Premendolo verrà ricaricata la cache delle classi CSS del workspace.

Ricaricare la cache di css

Mentre si sta digitando si avrà l'auto-completamento delle classi CSS che son state trovate. L'apertura del menù di auto-completamento può essere forzata con la scorciatoia CTRL+spazio.

Auto compilazione di css dopo la ricarica della cache

Bootstrap

Le estensioni che facilitano l'uso di Bootstrap forniscono in realtà degli snippet richiamabili tramite intellisense (CTRL+spazio). Esistono diverse estensioni da considerare a seconda della versione di Bootstrap che si vuole utilizzare.

  • per la versione 3 si ha wcwhitehead.bootstrap-3-snippets;
  • per la versione 4 thekalinga.bootstrap4-vscode che fornisce snippet anche per font awesome;
  • per la versione 5 AnbuselvanRocky.bootstrap5-vscode.

Installazione bootstrap

I suggerimenti vengono mostrati automaticamente durante la scrittura o alla pressione di CTRL+spazio, si possono navigare i risultati con le frecce e premere Invio quando si trova quello corretto.

Esempi completamento bootstrap

Realizzare una pagina HTML

Si supponga di aver già creato la cartella del nostro progetto contenente la pagina HTML che si vuole creare.

struttura web project statico

A partire da un file vuoto si può decidere di generare la struttura di base di una pagina HTML in diversi modi.

Una prima modalità consiste nello scrivere l'intestazione HTML manualmente. Un altro modo sicuramente più veloce è quello di usare il template di Visual Studio Code. Senza alcun contenuto testuale quindi va premuta la scorciatoia CTRL+spazio e poi selezionato "HTML sample".

auto completamento Template pagina web html

Il risultato sarà questo:

risultato Template pagina web html

Similmente è possibile utilizzare la sintassi EMMET, scrivendo html:5 e premendo Invio.

auto completamento html alternativo

Ovviamente è possibile scrivere solo parte del comando e sfruttare l'auto-completamento. Il risultato sarà simile a quello precedente:

risultato auto completamento html alternativo

Il primo metodo però, quello che prevede l'uso del template, resta il più completo in quanto genera anche gli import per CSS e JavaScript.

La sintassi EMMET

Come molti altri IDE ed editor di codice anche Visual Studio Code supporta la sintassi EMMET, ovvero un set di abbreviazioni che rendono lo sviluppo Web molto più fluido.

Per accedere a queste funzioni si può iniziare a scrivere parte dell'abbreviazione e aspettare l'auto-completamento, o premere CTRL+spazio.

come autocompletare la sintassi emmet

Quando si vuole sostituire l'abbreviazione con il risultato basta quindi premere Invio e il risultato sarà il seguente:

risultato auto completamento sintassi emmet

CSS

La scrittura del codice CSS è già ben integrata in Visual Studio Code. È infatti possibile usufruire dell'auto-completamento dei nomi delle proprietà:

CSS auto completamento integrato

Così come nei valori:

Auto completamento css risultato

Se la proprietà che si sta valorizzando è un colore, è possibile utilizzare un interfaccia semplificata per poter selezionare la sfumatura direttamente con un color picker grafico. Per farlo è necessario iniziare a valorizzarla con un valore a caso, ad esempio rgb(0,0,0), quindi aspettare che appaia l'icona del colore sulla sinistra e portarsi al di sopra con il mouse. Apparirà il color picker.

Color chooser visual studio code

JavaScript

JavaScript è il linguaggio che, volenti o nolenti, si è costretti a conoscere ed utilizzare per poter sviluppare sul Web. Il supporto nativo di Visual Studio Code è già presente di default e comprende linting del linguaggio, snippet tramite scorciatoia, suggerimenti, debug e avvio.

Creazione funzione con template integrata

Esistono due diversi casi d'uso in JavaScript, quello di NodeJS e quello dell'esecuzione del codice in una pagina HTML. In entrambi i casi si può avviare e quindi debuggare una sessione di sviluppo JavaScript.

Run e Debug JavaScript con NodeJS

NodeJS è una piattaforma a linea di comando costruita per eseguire JavaScript senza browser. È stato creato a partire dall'interprete di Google Chrome (V8).

Per eseguire un file JavaScript con NodeJS normalmente si può scrivere sul proprio terminale:

node percorso/del/file.js

Tuttavia Visual Studio Code riconosce immediatamente la tipologia di sorgente e mette a disposizione anche un modo più rapido per avviare un programma tramite node. Basta cliccare "Run and Debug" nella tab dedicata al debug.

Avviare un programma js

Quindi selezionare NodeJS

Avviare programma js

A questo punto vedremo l'output direttamente in console.

Il debug di node si avvia da solo se ci son punti di debug nel codice. Per inserire un punto di debug si deve cliccare alla sinistra del numero di riga da cui farlo partire.

debug funzione js

Il debug viene rilevato anche qualora venga avviato node manualmente tramite però console di Visual Studio Code:

Avviare il debug tramite console con node

Se ciò non dovesse succedere si può accedere dalle impostazioni al percorso "Debug > JavaScript: Auto Attach Filter". Per avere la piena funzionalità assicurarsi che sia impostata su "Always".

impostazioni dell' auto attach

Configurazioni manuali

Potrebbe essere necessario, in alcuni casi, creare file di esecuzione o debug ad hoc. Nella finestra di "Run e Debug" selezionare "Creare un file launch.json".

impostazioni dell' auto attach

Avvio manuale tramite launch json

Quindi selezionare "Node.js". Ora, se l'intenzione è far avviare il file correntemente aperto nell'IDE, si deve scrivere:

"configurations": [
{
"type": "node",
"request": "launch",
"name": "Avvia programma",
"skipFiles": [
"/**"
],
"program": "${file}"
}
]

Probabilmente gran parte del codice è già auto-generato, sarà da sostituire solo quello che è scritto dopo "Program".

Se invece l'intenzione è quella di aprire un debug su un programma node già avviato esternamente bisogna scrivere:

{
"name": "Attach",
"port": 9229,
"request": "attach",
"skipFiles": [
"/**"
],
"type": "node"
}

Sostituendo eventualmente la porta con quella che si utilizza.

Per quest'ultima procedura si vuole ricordare che per avviare node in altra istanza in modalità debug è necessario utilizzare il seguente comando:

node --inspect=:9229

Oppure il seguente comando se si vuole fare in modo che l'esecuzione rimanga ferma fino a quando non si collega un debugger:

node --inspect-brk=:9229

Solo dopo aver inserito il comando sarà possibile avviare il debug con Visual Studio Code.

Debug Javascript tramite web browser

Avviare il debug di Visual Studio Code eseguendo il codice tramite Web browser in una pagina HTML è possibile ed è anche una procedura automatizzata.

Per farlo deve essere avviato innanzitutto un server dove la pagina HTML viene "servita", e come spiegato in precedenza lo si può fare tramite l'estensione Live Server.

Una volta avviato il server basta andare nella scheda del debug e premere il tasto "Run and Debug" (o "Esegui con debug" in Italiano).

Esegui con debug su chrome

Quindi selezionare "App Chrome". È disponibile anche Edge se siete fan del browser di Microsoft.

Selezione app web per debug

Si creerà in automatico il file di configurazione launch.json. Cliccate sulla rotellina per poter modificare il file inserendo la porta si esecuzione corretta.

Configurazione di lancio

Nel caso di Live Server, questo gira normalmente sulla porta 5500 (se ne vengono aperti più di uno potrebbe essere un numero superiore a 5500, come 5501 e così via...).

cambio porta esecuzione debug

A questo basta premere il tasto "Play" per avviare il debug.

Avvio effettivo debug chrome

Se avete impostato dei breakpoint verrà bloccata l'esecuzione e potrete controllarne il flusso tramite Visual Studio Code

risultato debug

Configurazione manuale per esecuzione su Web browser

Si può infine configurare manualmente il launch.json per avviare il debug tramite browser aggiungendo questa configurazione:

{
"type": "chrome",
"request": "launch",
"name": "Avvia Chrome con localhost",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}"
}

Ti consigliamo anche