Visual Studio Code: i 10 migliori plugin per qualsiasi front-end developer

Tutti amiamo Visual Studio Code: l'editor gratuito e moderno sviluppato da Microsoft pensato per scrivere, ottimizzare e debuggare applicazioni web e cloud.

Visual Studio Code è disponibile su tutte le piattaforme (Windows, MacOS, Linux) ed è estendibile grazie all'ausilio di plugins, che ne aumentano le capacità introducendo funzionalità e comportamenti.

Al di là di casi specifici, a seguire quelli che secondo me sono i plugin imprescindibili per poter vivere bene quando si sviluppano webapp frontend.

Live Server

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Questo plugin è in grado di creare un web server locale utile per testare la web app, risolvendo molti dei problemi che possono presentarsi effettuando la preview su protocollo file anziché http. Il pezzo forte è il livereload, e cioè l'auto-aggiornamento della pagina ad ogni salvataggio del sorgente che stiamo scrivendo.

Bracket Pair Colorizer

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Le parentesi (tonde, quadre, graffe) sono il pane quotidiano di ciascun developer. Quando l'applicazione inizia ad avere una certa complessità può essere difficile individuare inizio e fine dei blocchi/parentesi senza un aiuto. Questo plugin fa proprio questo: colora in maniera diversa ed evidenzia le parentesi per rendere immediatamente individuabile la coppia di parentesi di interesse per capire immediatamente dove iniziano e dove finiscono.

Auto Close Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Questo plugin piazza automaticamente un tag di chiusura ogni volta che questo è necessario.

Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Path Intellisense suggerisce automaticamente il percorso di file e cartelle man mano che viene digitato. Comodissimo per chi detesta dover verificare e/o aprire le cartelle interessate per individuare il file corretto da includere (sia esso JS, CSS ecc).

Git Lens

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Questa estensione integra git direttamente all'interno del sorgente, mostrando di volta in volta chi e quando ha modificato un determinato blocco o riga del sorgente. Perfetto per tutti coloro che sono soliti sviluppare applicazioni a più mani e desiderano avere il polso della situazione.

Better Comments

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Arricchisce i commenti variando colore ed evidenziandone immediatamente il significato.

Colorize

https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize

Visualizza il colore corrispondete al codice colore selezionato (supporta hex, rgb, rgba, hsl) aiutando qualsiasi web designer a comprendere immediatamente il colore utilizzato nel codice.

Material Theme

https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

Applica un tema material a tutto l'editor.

Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Applica l'icona giusta al file o cartella giusti, in stile material. Adoro il modo in cui queste icone rendono tremendamente esplicita la tipologia di file e cartelle di cui si sta parlando.

Sort lines

https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines

Ordina alfabeticamente le righe di codice selezionate, regalando una incredibile sensazione di ordine al sorgente.