Visual Studio Code è uno degli editor di codice più utilizzati, questo grazie al suo design intuitivo e alle numerose funzionalità lo rendono lo strumento ideale per programmatori e Web designer. In questo articolo, esploreremo alcune delle principali funzionalità di Visual Studio Code e alcune delle estensioni più utili per migliorare il flusso di lavoro e prepararci allo sviluppo di un intero sito Web.
Migliorare l'efficienza migliorando l'area lavoro di Visual Studio Code.
Come abbiamo anticipato anche nell'articolo introduttivo, Visual Studio Code ha al suo interno migliaia di estensioni, ovvero strumenti di lavoro aggiuntivi che permettono di integrare funzionalità integrative rispetto a quelle di default. Vediamo quindi come è possibile cercare ed installare alcune estensioni che potranno esserci utili durante lo sviluppo di siti Web.
Per iniziare ci posizioniamo sopra l'icona dedicata alle estensioni presente all'interno della barra laterale. Cliccando su di essa vediamo aprirsi una sezione da cui è possibile visualizzare le estensioni installate, quelle consigliate e dove è possibile cercarne di nuove.
Auto Rename Tag
Partiamo dalla prima che vi consiglio, e cerchiamo Auto Rename Tag.
Questa estensione è particolarmente utile per lo sviluppo Web in quanto permette di ottimizzare le modifiche ed in particolar modo il rename dei tag (come dice anche il nome) semplicemente cliccando sopra ad un singolo elemento.
Facciamo un esempio: apriamo un nuovo documento HTML e scriviamo del codice di markup. A questo punto sorge l'esigenza di voler modificare un tag che ovviamente comprende 2 elementi: uno in apertura ed uno in chiusura. A questo punto basterà cliccare sopra ad un solo elemento per modificare anche quello ad esso associato.
Con Auto Rename Tag è possibile rinominare automaticamente tag HTML simmetrici. Inoltre, l'estensione assicura che tutti i tag vengano rinominati in modo coerente, riducendo così il rischio di errori. Questa semplice estensione ci consente di risparmiare tempo e fatica nel processo di modifica del codice.
Comment Headers
Passiamo alla seconda estensione utile durante lo sviluppo di siti Web e pagine Web, Comment Headers.
Comment Headers è un altro strumento essenziale per gli sviluppatori che usano Visual Studio Code in quanto aiuta a scrivere commenti nel codice in modo più efficace e comprensibile. L'estensione permette di aggiungere commenti colorati e formattati all'interno del codice. Rendendo più facile distinguere tra diversi tipi di commenti e comprendere meglio il loro scopo.
Con Comment Headers, è possibile scrivere commenti in diversi formati al fine di riconoscere meglio l'annotazione e poter organizzare meglio il lavoro. Soprattutto nei casi in cui più persone debbano lavorare sullo stesso codice o quando le righe di codice sono numerose, articolate e complesse.
Come funziona l'estensione Comment headers di Visual Studio Code?
A seguito dell'installazione è possibile inserire all'interno dei documenti diversi tipi di commenti semplicemente digitando /.
Si apre così una tendina con diverse opzioni che ci permetteranno di definire la tipologia di commenti e intestazioni che vogliamo inserire.
Queste intestazioni includono informazioni importanti sul documento, come il nome del file, l'autore, la data di creazione e una descrizione del suo contenuto. Inoltre, le intestazioni includono anche una sezione per i commenti sulle modifiche apportate, in modo che chiunque possa facilmente tracciare lo storico degli interventi eseguiti, soprattutto nel caso in cui più persone lavorino allo stesso progetto.
L'utilizzo dell'estensione Comment Headers ha molti vantaggi. Innanzitutto, ci aiuta a risparmiare tempo, e soprattutto può anche aiutarci a mantenere ordine all'interno del codice.
Color Highlight
Passiamo alla prossima estensione, Color Highlight.
Color Highlight è un'altra estensione che semplifica il lavoro degli sviluppatori, infatti il suo principale beneficio è quello di mostrare in tempo reale il colore esatto di un codice esadecimale o RGB. Questo significa che è possibile identificare facilmente i colori e assicurarsi che siano coerenti in tutto il progetto.
Con Color Highlight è inoltre possibile identificare facilmente i colori utilizzati nel foglio di stile e modificarli in modo rapido ed efficiente.
Emmet
Proseguiamo, e vediamo una delle estensioni maggiormente utilizzate all'interno dei progetti HTML: Emmet. Anche se non nativo di Visual Studio Code, Emmet, può considerarsi uno strumento indispensabile in quanto è ad oggi integrato direttamente all'interno dell'editor. Per utilizzarlo non dovremo installare nessuna estensione aggiuntiva in quanto è già disponibile di default.
Cos'è Emmet ed in che modo semplifica il lavoro di scrittura del codice?
Emmet è uno strumento che ci consente di utilizzare abbreviazioni per scrivere rapidamente il codice HTML e CSS. Ad esempio, invece di scrivere tutto il codice per un tag di apertura e chiusura, possiamo utilizzare l'abbreviazione div e premere il tasto Tab per generare automaticamente il codice completo.
Possiamo anche utilizzare abbreviazioni per definire le classi e gli ID, generare liste e gruppi di tag anche complessi. Con poche abbreviazioni chiave è possibile scrivere rapidamente codice HTML e CSS (senza dover memorizzare tutte le sintassi), risparmiare tempo e ridurre gli errori di battitura.
Insomma questa estensione tornerà molto utile durante lo sviluppo di siti Web e pagine Web.
Live Server
Vediamo l'ultima delle estensioni indispensabili per lavorare al meglio con Visual Studio Code, Live Server.
A seguito dell'installazione Live Server permette di visualizzare i file e le modifiche in tempo reale nel browser. Ciò significa che non è più necessario effettuare refresh della pagina manualmente ogni volta che si apporta una modifica.
Per attivarla basta cliccare sul pulsante "Go-live" presente in basso a destra ed in automatico viene avviata la finestra del browser. Da quel momento in poi essa aggiornerà e visualizzerà in maniera automatica ogni modifica che faremo alla pagina Web.
Live Server è un'estensione particolarmente utile per tutti coloro che lavorano su progetti Web dinamici ed hanno bisogno di visualizzare le modifiche in tempo reale.
Conclusioni
Insomma, all'interno di questa seconda lezione dedicata allo sviluppo di un sito Web con Visual Studio Code abbiamo approfondito gli strumenti di lavoro e le potenzialità che l'editor mette a nostra disposizione per creare l'ambiente di sviluppo ideale. Proseguiamo ora con la personalizzazione dell'interfaccia e la costruzione del sito Internet.
