Per iniziare a programmare, un aspirante sviluppatore web deve conoscere come le sue tasche l’ambiente di lavoro che utilizza. Quest’ultimo dipende dal linguaggio di programmazione scelto per iniziare a programmare da zero. Nel caso in cui lo sviluppatore non voglia porsi limiti con i linguaggi da imparare, ha a disposizione un IDE (Integrated Development Environment) estremamente versatile. Stiamo parlando di Visual Studio Code il text editor di codice sorgente sviluppato da Microsoft per tutti i sistemi operativi. Ad oggi si tratta di uno dei migliori ambienti di lavoro, in quanto non necessita di grandi risorse a livello hardware e, grazie alle sue estensioni, diventa integrabile con quasi tutti i linguaggi di programmazione esistenti.
Il punto di forza di Visual Studio Code sono proprio le estensioni. Sono presenti nel marketplace dell’editor e ce ne sono di qualsiasi tipo. Molte di queste servono proprio per far funzionare il proprio codice (a seconda del linguaggio scelto) ed individuare eventuali errori in compilazione, oltre a permettere di runnare il codice. Alcune estensioni servono anche per imparare come programmare. Mi spiego meglio. Rovistando nell’ampio marketplace di VSC sarà possibile installare delle estensioni in grado di migliorare il tuo codice o dare consigli al programmatore su eventuali errori commessi, riconosciuto dal text editor.
Nello specifico andiamo a vedere le 10 estensioni di Visual Studio Code che ti cambieranno la vita:
- Snippets – racchiude una categoria di estensioni, molto utili specialmente se si vuole iniziare a programmare, presenti nel marketplace. Sono un componente aggiuntivo per la produttività, racchiude la raccolta di varie estensioni per i linguaggi di programmazione più usati. Consentono di creare e utilizzare abbreviazioni per i metodi/istruzioni/blocchi di codice che utilizzi più spesso nel codice.
- CSS Peek – lato web developer, questa estensione consente di “sbirciare” gli stili per le classi CSS, gli ID e i tag HTML.
- AutoRename Tag – VSCode evidenzia intrinsecamente i tag corrispondenti (in un file HTML) e aggiunge immediatamente tag di chiusura ogni volta che ne viene aperto uno. Questa estensione rinomina automaticamente tutti i tag che vengono modificati. Ovviamente funziona anche su PHP e JavaScript e aumenta la produttività, riducendo il tempo che si perderebbe a rinominare il tag due volte (apertura e chiusura).
- GitLens – L’estensione GitLens combina le funzionalità di Git con quelle di VSCode, consentendo di visualizzare l’origine del codice sorgente tramite Git. Ottimo per comprendere meglio il codice, così da sapere chi ha modificato il codice, quando e perché. Ha molte funzionalità quali: navigazione delle revisioni attraverso la cronologia dei file, annotare alla fine della riga di codice informazioni sull’ultimo commit o visualizzare chi ha fatto il commit su una riga evidenziata.
- Turbo Console Log – fare il debug per chi vuole iniziare a programmare risulta una difficoltà. Questa estensione di Visual Studio Code aiuta gli sviluppatori neofiti, automatizzando il processo di creazione di un messaggio di log significativo, in modo tale da rendere il debug più semplice avendo un output che evidenzia l’errore da individuare.
- ESLint – l’estensione ESLint funge da code validator. Per iniziare a programmare è ottimo. Esegue il codice per verificare la presenza di eventuali errori di sintassi, li sottolinea e suggerisce possibili soluzioni per correggerli. Questa estensione ha molte configurazioni per migliorare l’integrità e la qualità del codice, come regole e stili. Le regole ESLint sono insiemi di istruzioni osservate per garantire la qualità del codice. Personalizzabili in base al proprio stile di programmazione. Gli stili invece sono insiemi di regole già create che il codice seguirà, visualizzando errori se la regola viene infranta.
- Live Server – una delle estensioni più utili per i web developer. Apre il progetto nel browser web principale utilizzando una porta comunicata tramite un messaggio pop-up. Aggiornando la pagina tutte le modifiche effettuate su VSCode alla tua app web verranno visualizzate. Produttività aumentata!
- Prettier – è un formattatore che aiuta a mantenere coerente lo stile di scrittura del codice. Si tratta di un’estensione molto versatile che aiuta ad avere degli script ordinati e comprensibili modificando le impostazioni a proprio piacimento. Prettier ha oltre 38,5k “stelle” su GitHub. Risolve automaticamente i problemi di formattazione ed è compatibile con moltissimi linguaggi di programmazione e framework (JavaScript, Java, CSS, HTML, Angular, PHP, ecc…).
- Remote SSH – estensione ufficiale Microsoft. Consente agli sviluppatori di utilizzare qualsiasi PC in remoto con un server SSH come IDE. Non richiede che il codice sorgente sia sul tuo computer locale. Esegue direttamente funzioni e altre estensioni VS IDE sul computer remoto.
- Quokka.js – L'estensione Quokka.js esegue il codice JavaScript e TypeScript e fornisce un feedback istantaneo durante la stesura del codice. Visualizza e aggiorna i valori runtime accanto al codice nel text editor mentre avviene la scrittura dello script, senza doverli eseguire nel browser, risparmiando tempo che potrebbe essere impiegato per visualizzare i log in un browser.
Queste sono solo alcune delle potenti e utili estensioni che Visual Studio Code mette a disposizione. Per iniziare a programmare, uno sviluppatore alle prime armi deve assolutamente scaricare questo IDE e usufruire di tutte le risorse che il marketplace mette a disposizione. Le estensioni di VSCode sono utilizzate anche dai programmatori più esperti proprio perché facilitano la scrittura del codice e aiutano lo sviluppatore a capire determinate dinamiche e regole della programmazione. E tu le conoscevi?
