Con più del 70% dei programmatori che utilizzano VSCode, è di gran lunga l’ambiente di sviluppo più popolare, dalla sviluppo web alla scienza dei dati.
E sebbene VSCode abbia una solida gamma di funzionalità di base, credo che il suo potere nascosto risieda nell’ecosistema di estensioni scaricabili e installabili dal marketplace.
Immagina tutto questo come un app store per le estensioni di VSCode!
Dall’assistente di codifica basato su intelligenza artificiale all’integrazione di Git e la formattazione del codice, queste estensioni di VSCode coprono una vasta gamma di funzionalità utili per migliorare la tua esperienza di sviluppo.
GitHub Copilot
Caratteristica principale: suggerimenti di codice alimentati da intelligenza artificiale.
Se c’è un’estensione di VSCode che devi provare nel 2023, deve essere GitHub Copilot. Si tratta di un assistente di codifica alimentato da intelligenza artificiale che fornisce suggerimenti di codice in linea mentre digiti. È facile imparare come usare Copilot, e credo che sempre più sviluppatori integreranno assistenti AI come questo nel loro flusso di lavoro. Il beneficio principale è risparmiare tempo e aumentare la produttività fornendo completamento automatico e suggerimenti di codice.
Tabnine
Caratteristica principale: suggerimenti di codice alimentati da intelligenza artificiale.
Seguendo la nostra prima scelta, Tabnine è un altro assistente di codifica AI che è estremamente utile per ottenere suggerimenti intelligenti di completamento del codice mentre digiti. Come qualsiasi buon AI, impara dal tuo codice e può suggerire completamenti in base al contesto attuale e ai modelli di codifica.
ChatGPT
Caratteristica principale: strumento AI basato su testo per rispondere alle tue domande di codifica.
È giusto dire che il 2023 è stato l’anno dell’AI, quindi dovevamo includere l’estensione ChatGPT nella parte superiore della nostra lista! ChatGPT è un LLM alimentato da AI che risponde alle richieste in linguaggio naturale. Questo include ottenere aiuto con la codifica, motivo per cui ChatGPT è diventato uno degli strumenti AI più popolari tra gli sviluppatori che vogliono lavorare più velocemente. Aggiungendo questa estensione a VSCode, puoi integrare ChatGPT direttamente nel tuo ambiente di sviluppo, rendendo super veloce interagire con ChatGPT senza lasciare l’editor.
Live Server
Caratteristica principale: avvia un server locale per visualizzare le modifiche in tempo reale.
Se sei coinvolto in qualsiasi forma di sviluppo web, questa è sicuramente un’estensione che devi avere! Con questo plugin di Visual Studio Code, puoi avviare un server di sviluppo locale per vedere le modifiche al tuo codice in tempo reale nel tuo browser. Questo è estremamente utile se desideri un feedback istantaneo sulle modifiche al tuo codice. Puoi anche aggiungere un secondo monitor e apprezzare davvero i benefici di questa estensione durante lo sviluppo di siti web e app web.
Docker
Caratteristica principale: gestisce i container Docker all’interno di VS Code.
Se trascorri del tempo a lavorare con i container Docker, hai assolutamente bisogno di questa estensione Docker! Il principale vantaggio è che è molto più facile costruire, gestire e distribuire le tue applicazioni containerizzate direttamente dal tuo ambiente di sviluppo. Questo è un tema ricorrente, ma è importante sottolineare che ogni volta che puoi rimanere nello stesso ambiente, risparmi davvero molto tempo durante lo sviluppo. Apprezzo anche la funzionalità di debug con un clic per i container Node.js, Python e .NET.
Excel Viewer
Caratteristica principale: visualizza file Excel in VS Code.
Credo sia giusto dire che tutti abbiamo probabilmente trascorso del tempo a lavorare con fogli Excel. Anche se sei un appassionato di Python che usa la libreria pandas, probabilmente ti sei trovato a lavorare con Excel in diversi momenti. Ecco perché penso che questa estensione di VSCode sia un’ottima idea, poiché ti consente di visualizzare anteprime dei file Excel direttamente nel tuo editor di codice. Quindi, che tu debba lavorare con fogli Excel o CSV, questa è un’ottima soluzione per visualizzare rapidamente i dati senza dover aprire un’altra app.
Prettier
Caratteristica principale: formattazione automatica del codice e applicazione delle regole di stile.
Se c’è una cosa che apprezzo davvero, è il codice formattato in modo bello! Ecco perché ho incluso Prettier. Per riassumere, è un formattatore di codice e un’applicatore di regole di stile. Questo significa che formatta automaticamente il tuo codice secondo un insieme di regole e convenzioni ogni volta che premi Salva. Questo è un enorme risparmio di tempo se vuoi garantire una formattazione del codice coerente e pulita senza farlo manualmente. È anche molto utile per i team, poiché si assicura che tutti utilizzino uno stile coerente con molto poco sforzo. Sì, non c’è bisogno di litigare su spazi vs tabulazioni!
Git History
Caratteristica principale: visualizza la cronologia di Git e confronta le versioni dei file.
Che tu sia uno sviluppatore web, uno scienziato dei dati, un sviluppatore di giochi o qualsiasi altro tipo di programmatore, è molto probabile che utilizzi comandi Git ogni giorno! In effetti, direi che è quasi impensabile nello sviluppo moderno non utilizzare una forma di controllo versione. Comunque, se sei un utente Git, hai bisogno di questa estensione di VSCode nella tua vita quotidiana. La sua principale forza è che ti consente di visualizzare il log Git con una vista interattiva della cronologia del tuo repository Git direttamente all’interno del tuo editor di codice. Mi piace anche l’interfaccia pulita per confrontare rami e commit.
Settings Sync
Caratteristica principale: sincronizza le impostazioni di VSCode su dispositivi diversi.
Se ti sei mai trovato a programmare su una macchina diversa, le probabilità sono abbastanza alte che tu ti sia ritrovato a utilizzare scorciatoie, tasti rapidi e estensioni che non sono disponibili. Puoi persino sincronizzare queste impostazioni sul tuo account GitHub, rendendo davvero facile accedervi su qualsiasi dispositivo.
GitLens
Caratteristica principale: visualizza annotazioni Git in linea, grafici delle modifiche e altro.
Tornando al controllo versione con Git, questa è un’altra ottima estensione per migliorare il tuo flusso di lavoro Git all’interno di VSCode. Con GitLens, posso accedere ad annotazioni in linea, annotazioni di file, grafici dei commit e una cronologia visiva dei file direttamente nell’editor. È anche utile per monitorare le modifiche al codice nel tempo all’interno del tuo team, compreso il motivo di tali modifiche.
Remote – SSH
Caratteristica principale: lavora con server remoti tramite SSH.
Se devi lavorare con una macchina remota, probabilmente usi SSH. Sì, posso installare questa estensione molto utile di VSCode per connettermi a un server remoto o a un contenitore tramite SSH all’interno del mio editor. Se stai seguendo un corso su AWS o stai iniziando a lavorare nel cloud, assicurati di ottenere questa estensione.
Code Runner
Caratteristica principale: esegui snippet di codice.
Se ti sei mai trovato a lavorare su un grande codice sorgente, è molto probabile che tu abbia incontrato lo scenario in cui vuoi apportare una piccola modifica, ma non vuoi eseguire l’intero codice sorgente per testarlo. Beh, nessun problema, perché questa estensione di VSCode ti consente di eseguire snippet di codice in oltre 30 linguaggi di programmazione direttamente nell’editor di VS Code.
Regex Previewer
Caratteristica principale: anteprima delle espressioni regolari mentre le digiti.
Se c’è un’area della programmazione che può essere un rompicapo per i principianti, deve essere quella delle espressioni regolari! Sia che tu sia nuovo alle regex o un professionista, probabilmente ti sei trovato a consultare un foglio di riferimento per controllare il tuo codice. Ma si tratta di aumentare la produttività. Questo è molto utile, specialmente per i principianti che potrebbero avere difficoltà a visualizzare cosa stiano facendo le loro regex. Puoi persino usarlo per imparare le regex. Non importa quanto sei esperto, questa estensione può essere un enorme risparmio di tempo per confermare se le tue regex funzioneranno come previsto.
TODO Highlights
Caratteristica principale: evidenzia i commenti TODO nel tuo codice.
Come la maggior parte degli sviluppatori, mi trovo spesso a scrivere commenti TODO nel mio codice. Sarò anche il primo a ammettere che a volte me ne dimentico! Beh, grazie a questa estensione di VSCode, posso fare in modo che tutti i miei commenti TODO risaltino. Questo è ideale per renderli facilmente riconoscibili e accessibili. Naturalmente, devo ricordarmi di fare il lavoro, ma mi piace come ti aiuti a tenere traccia di compiti e commenti nel tuo codice.
VSCode-icons
Caratteristica principale: aggiunge icone e colori ai tuoi file e cartelle in VSCode.
Questa è un’estensione piuttosto basilare superficialmente; dopo tutto, si tratta solo di aggiungere icone, giusto? Beh, sì, è vero! Ma se ti sei mai trovato a lavorare su progetti di grandi dimensioni con molte cartelle e file, la navigazione può diventare abbastanza faticosa. Inoltre, tutte le cartelle sembrano uguali! Ecco dove entra in gioco questa estensione, poiché puoi aggiungere stile e colore alle tue cartelle e aggiungere icone ai file.
Peacock
Caratteristica principale: codifica a colori per spazi di lavoro VS Code per progetti diversi.
Questa è ideale per personalizzare i colori del tuo spazio di lavoro. I colori forniscono un suggerimento visivo molto bello per aiutarmi a tenere traccia di quale progetto sto lavorando. Ancora una volta, è super semplice, apprezzerai la possibilità di identificare e passare facilmente tra progetti tramite spazi di lavoro colorati.
Polacode
Caratteristica principale: crea bellissime schermate del tuo codice.
A volte dobbiamo fare presentazioni del nostro codice. E quando arriva il momento, potremmo aver bisogno di condividere frammenti di codice all’interno della documentazione o nelle presentazioni. Ecco dove entra in gioco questa estensione di VSCode, poiché Polacode ti consente di creare bellissime schermate del tuo codice con evidenziazione della sintassi. Devi solo evidenziare il codice che vuoi catturare, e Polacode farà il resto.
Better Comments
Caratteristica principale: migliora i commenti del codice con colori e formattazione.
I commenti nel codice sono uno degli elementi più comuni in qualsiasi progetto, ma probabilmente sono quelli a cui dedichiamo meno attenzione. Progettato per migliorare la leggibilità dei tuoi commenti nel codice con colori e formattazione. Presenta anche l’opzione di categorizzare i miei commenti in avvisi, query, todo, evidenziazioni e altro.
Code Spell Checker
Caratteristica principale: rileva e corregge errori di ortografia nel tuo codice.
Controlla gli errori di ortografia nei tuoi commenti, stringhe e file Markdown. Penso che sia sempre un segno di un vero professionista quando il loro codice non solo è ben progettato, ma è anche facile da leggere e senza errori di ortografia evidenti o comuni.
Turbo Console Log
Caratteristica principale: inserisci istruzioni JS console.log con un clic.
Essendo uno dei linguaggi più popolari tra gli sviluppatori, ha senso includere alcune estensioni di VSCode per JavaScript. Forse una delle pratiche più comuni quando si scrive JS è utilizzare l’umile istruzione console.log per test e debug ad hoc. Ecco dove brilla questa estensione, poiché ti consente di aggiungere rapidamente istruzioni console.log significative al tuo codice con scorciatoie da tastiera.
Indent-rainbow
Caratteristica principale: colora i livelli di rientro nel tuo codice.
Se programmi regolarmente in un linguaggio come Python che dipende dal rientro, probabilmente ti sei trovato a cercare di tracciare i livelli di rientro sullo schermo. Lo so, ci sono passato! Anche quando cerco di mantenere il mio codice piatto, a volte è impossibile evitare il rientro nei miei progetti Python. Ecco dove entra in gioco questa estensione di VSCode, poiché aggiunge colore ai vari livelli di rientro nel tuo codice. Fidati di me, usala e apprezzerai immediatamente quanto sia più facile leggere il codice indentato. Apprezzo anche il fatto che utilizza automaticamente la dimensione del tab corrente che hai impostato per il tuo editor.
Bookmarks
Caratteristica principale: aggiungi e naviga velocemente tra i segnalibri nel tuo codice.
Indipendentemente dal browser o dalla scelta preferita, è abbastanza probabile che tu abbia usato i segnalibri per salvare i siti web. Bene, perché non possiamo fare lo stesso con le linee di codice che vogliamo controllare più tardi. Consente di aggiungere segnalibri alle linee di codice nei tuoi file per una navigazione super veloce. Particolarmente utile quando lavoro con un codice di grandi dimensioni.
Auto Rename Tag
Caratteristica principale: rinomina automaticamente le coppie di tag HTML/XML.
Questa è un’estensione di VSCode davvero semplice, ma è anche molto utile poiché ti risparmia quel piccolo extra di tempo quando devi rinominare i tag HTML o XML. Basta rinominare il tag di apertura o di chiusura, e l’altro verrà rinominato automaticamente per corrispondere.
JavaScript Code Snippets
Caratteristica principale: raccolta di frammenti di codice JavaScript comunemente utilizzati.
Se stai programmando regolarmente in JavaScript, probabilmente ti sei trovato a utilizzare gli stessi frammenti di codice tutto il tempo con piccole modifiche. Questo è abbastanza comune nello sviluppo web: dopotutto, quando qualcosa è buono, perché ricominciare da capo? Anche se hai appena completato un corso di JavaScript, avrai notato che molti progetti di sviluppo web utilizzano modelli di codice simili. Può essere un enorme risparmio di tempo quando hai bisogno di un rapido boilerplate per far partire la palla.
ES7+ React/Redux/React-Native Snippets
Caratteristica principale: raccolta di frammenti di codice React e Redux.
Che tu sia un professionista o stai seguendo un corso su React, ti troverai a utilizzare la stessa logica e gli stessi approcci più e più volte. Quindi, per aiutarti a risparmiare tempo, questa estensione di VSCode, poiché offre una raccolta di frammenti di codice comuni per lavorare con React e Redux. Offre persino frammenti di TypeScript se hai scelto di passare a JS fortemente tipizzato.
CSS Peek
Caratteristica principale: naviga/controlla le definizioni CSS nel tuo codice.
Se sei uno sviluppatore web, probabilmente trascorri molto tempo lavorando sia in HTML che in CSS. Ti piacerebbe dare un’occhiata veloce ai tuoi fogli di stile CSS direttamente dai tuoi file HTML. Ti consente di passare rapidamente dal codice HTML al codice CSS e viceversa cliccando su un selettore CSS nel tuo HTML. Questo tipo di multitasking è super efficiente, più apprezzerai i benefici nel risparmio di tempo durante la costruzione dei tuoi progetti HTML.
Colorize
Caratteristica principale: colora il testo e i codici colore esadecimali nel tuo codice.
Se sei uno sviluppatore front-end, probabilmente dedichi molto tempo a pensare e a fare scelte di colore per gli elementi della tua pagina web. Ma con questa pratica estensione di VSCode, puoi vedere una visualizzazione rapida del colore direttamente nell’editor, poiché aggiunge il colore scelto al tuo codice. Sì, quel codice esadecimale diventerà magicamente colorato nel colore effettivo che stai cercando di utilizzare!
Markdown All in One
Caratteristica principale: supporto integrato per il markdown in VS Code.
Se sei qualcuno che ha iniziato a utilizzare il markdown per creare la tua documentazione, apprezzerai davvero la funzionalità aggiunta che questa estensione di VSCode offre! E sì, VSCode offre il supporto di base per il markdown, ma se sei un utente esperto, apprezzerai le scorciatoie, i comandi e il completamento automatico offerti.
Icon Fonts
Caratteristica principale: anteprima e inserisci icone in VS Code.
Se hai mai cercato icone da includere nei tuoi progetti di sviluppo, capirai quanto può essere noioso! Offre una raccolta di icone che puoi incorporare direttamente nei tuoi progetti. Usa gli snippet per incorporare gli iconi di Bootstrap Glyphicons, le icone Android e molto altro.
Debugger for Chrome
Caratteristica principale: esegui il debug del codice JS direttamente da VS Code in Chrome.
Ideale per gli sviluppatori JavaScript che desiderano eseguire il debug all’interno di un browser Chrome direttamente nell’editor di codice di VSCode. Se hai trascorso del tempo a creare progetti JavaScript, sarai molto familiare con il fatto di dover passare al tuo browser per testare e fare il debug. Ma con questa estensione, puoi rimuovere questo passaggio aggiuntivo e farlo tutto all’interno dell’ambiente di sviluppo.