Le migliori estensioni per Visual Studio Code

Le migliori estensioni per Visual Studio Code, sono di seguito elencate per fornire ai sviluppatori Front-end un ambiente già pronto per la programmazione web.

In questo articolo, parliamo dell’editor di codice marchiato Microsoft, che ormai da marzo dell’anno scorso è stato rilasciato in versione stabile. E’ attualmente il mio editor, in grado di scalzare Atom dal trono.

Come ogni editor moderno, ha già molte estensioni disponibili che lo trasformano in base alle vostre esigenze di sviluppo. Ritengo meriti di essere provato sia da programmatori esperti (ormai fidelizzati a un particolare software), e da coloro che da poco si sono buttati in questo mondo.

Come installare le estensioni su Visual Studio Code?

L’installazione di estensioni è abbastanza semplice in Visual Studio Code, perchè è possibile eseguirle direttamente dal Marketplace integrato. Ogni estensione ha la sua pagina dedicata, dove, oltre alla panoramica di quest’ultima, sono  presenti anche delle indicazioni sul corretto utilizzo.

Le estensioni per Visual Studio Code

Le estensioni ufficiali di Visual Studio Code sono già sufficienti per lavorare su un progetto, ma in casi specifici è necessario installarne di altre. In dettaglio, ho provato un pò di estensioni dedite allo sviluppo front-end.

HTML Snippets

Se si desidera scrivere HTML in Visual Studio Code, l’estensione può venire in aiuto in quanto aggiunge il supporto avanzato per HTML. Visual Studio code ha già il supporto base per HTML, come per esempio la colorazione della sintassi, questa estensione aggiunge molto di più.

La funzionalità più utile è senza dubbio l’autocompletamento, oltre alla visualizzazione di tutte le opzioni disponibili per il tag che state scrivendo.

Quando clicchi sull’elemento selezionato, HTML Snippets aggiunge il tag HTML5 completo delle rispettive proprietà.

L’autore dell’estensione tiene conto anche dei tag deprecati, quindi se hai bisogno di un tag HTML specifico, e quest’ultimo non è disponibile in lista, verifica se è ancora valido o meno!

HTML CSS Class Completion

HTML CSS Class Completion può essere un’estensione di aiuto se utilizzate tante classi CSS nel vostro progetto. Spesso noi programmatori web dimentichiamo i nomi esatti delle classi CSS, spesso andiamo “a ricordo”…

Questa estensione risolve il problema, perchè riconosce e consiglia attraverso l’autocompletamento le classi CSS disponibili nel progetto, attraverso il monitoraggio automatico dei fogli di stile caricati.

View in Browser

View in Browser è tanto semplice quanto potente. Permette la visualizzazione in real time del risultato del vostro codice all’interno del browser, modificando il DOM ad ogni vostra modifica.

Questa estensione supporta solo l’HTML, quindi se avete bisogno di visualizzare il vostro sito, necessita il file HTML aperto nell’editor. Non è possibile accedere al browser da un file CSS o JAVASCRIPT.

Debugger for Chrome

Tra le estensioni per Visual Studio Code, Debugger for Chrome è attualmente una delle estensioni più scaricate.

Questa estensione mi ha convinto ad utilizzare Visual Studio Code 🙂 

Debugger for Chrome consente il debug di codice Javascript in Google Chrome senza il bisogno di lasciare l’editor. Questo significa che non devi per forza utilizzare la console del browser per il debug dei file javascript, bensì direttamente dal codice sorgente su Visual Studio Code!

L’estensione dispone di tutte le funzionalità di cui un debugger decente necessita: configurazione dei breakpoint, la visualizzazione delle variabili e relativi valori, stepping, una console e altre ancora.

Per utilizzare l’estensione bisogna lanciare chrome con l’opzione di debug remoto abilitata, oltre che il settaggio del file launch.json. Per la corretta configurazione, è necessario seguire le istruzioni disponibili nella scheda dell’estensione.

JSHint

JSHINT integra il popolare linter javascript omonimo all’interno del vostro editor, potrai così essere informato in tempo reale di eventuali errori durante la digitazione. Anche in questo caso è possibile estendere le opzioni di default personalizzando i settaggi grazie all’aiuto di un file di configurazione.

L’utilizzo è semplice, in quanto l’estensione mostrerà con un bollino rosso tutte le righe con degli errori, mentre le notifiche/warning sottolineandole in verde. Se vuoi più informazioni sull’errore, basta muovere il cursore sulla riga in questione, e JSHINT mostrerà un fumetto con la descrizione.

jQuery Code Snippets

jQuery Code Snippets velocizza ulteriormente lo sviluppo front-end su Visual Studio Code, in quanto permette di integrare parti di codice già scritte, avendo a disposizione un database di oltre 130 snippets più utilizzati.

Tra le estensioni per Visual Studio Code, è a mio parere una delle più importanti. E’ possibile integrare codice jQuery molto velocemente.

Tutti gli snippets jQuery sono invocabili attraverso il prefisso jq. L’unica eccezione è il trigger func, che inserisce una funzione anonima nell’editor.

Questa comoda estensione è un’utile strumento per coloro che non sono completamente sicuri della sintassi, e non vogliono perdere tempo con la documentazione.

Fonte : link

Conclusioni

Sono molte le estensioni disponibili per VS Code, quelle elencate sono solo una parte di quelle che secondo me vale la pena installare. Fatemi sapere se vi ha convinto oppure no!