16 migliori estensioni di codice VS per sviluppatori Web

Microsoft Visual Studio Code (VS Code) è uno dei migliori editor di codice per gli sviluppatori di software. Dalla sua uscita, la sua popolarità è aumentata non solo per la piattaforma stabile che fornisce, ma anche per la natura estensibile che Microsoft ha costruito al suo interno. Il mercato delle estensioni è una cornucopia di componenti aggiuntivi e funzionalità che consente agli sviluppatori di personalizzare VS Code nell'ambiente di sviluppo dei loro sogni. Vogliamo analizzare alcune delle migliori estensioni VS Code disponibili oggi in modo da non perderne nessuna.

1. Sublime Text Keymap e importatore di impostazioni

In cima alla nostra lista c'è il Sublime Text Keymap and Settings Importer, giustamente intitolato. Nel caso in cui il titolo non fosse abbastanza descrittivo, questa estensione ti consente di inserire le tue mappe e impostazioni di testo Sublime Text esistenti in modo da poter passare senza problemi all'utilizzo di VS Code come predefinito. Dal momento che così tante persone amano Sublime e ci hanno passato anni, fare in modo che VS Code mantenga la memoria muscolare guadagnata da quell'editor ha molto senso.

2. Frammenti di codice JavaScript (ES6)

Digitare JavaScript (o qualsiasi codice) può diventare complicato quando si ripetono gli stessi frammenti più e più volte. Questa estensione aiuta ad alleviare ciò permettendoti sostanzialmente di scrivere scorciatoie per frammenti di codice usati spesso. Quando attivato, lo snippet sostituisce semplicemente il testo e si inserisce direttamente nel documento.

3. Bracket Pair Colorizer 2

Indipendentemente dalla lingua che codificherai, le parentesi saranno probabilmente una parte importante di esso. E tenerli dritti può essere un mal di testa. Ma con questa estensione VS Code, puoi colorare i codici delle coppie corrispondenti per alleviare quel punto dolente e lavorare per far funzionare il codice stesso, non l'editor.

4. ESLint

In molti modi, ESLint è il linter per JavaScript. Rilevare gli errori e fornire feedback e avvisi immediati è essenziale per mantenere pulito il codice del tuo team e non c'è davvero modo migliore per farlo in JS di ESLint. Consigliamo vivamente di installarlo il prima possibile.

5. Responsabile del progetto

Un problema con VS Code che si presenta abbastanza spesso è come passare da un progetto all'altro. Per impostazione predefinita, il flusso non è esattamente il più intuitivo. Quindi Project Manager lavora per risolvere questo problema fornendoti un menu nella barra laterale che puoi utilizzare per salvare diverse cartelle e progetti Git da scambiare facilmente. Questo non è tanto un miglioramento dell'editor quanto un aumento della qualità della vita.

6. Anteprima del browser

Uno degli elementi più odiosi dello sviluppo web è il caricamento e l'aggiornamento dei tuoi contenuti in diversi browser per i test. L'anteprima del browser aiuta a limitare la quantità di cui hai bisogno per farlo fornendoti una solida anteprima del tuo lavoro all'interno di VS Code stesso in un nuovo processo di Chrome.

7. Più carina

Vogliamo tutti un codice più carino. Quindi dovremmo probabilmente installare tutti Prettier per gestirlo per noi. La descrizione descrive Prettier come un "formattatore di codice ritenuto, impone uno stile coerente analizzando il codice e ristampandolo con le proprie regole che tengono conto della lunghezza massima della riga, avvolgendo il codice quando necessario". Potresti non volerlo usare per ogni lingua o progetto, quindi ci sono molte impostazioni di configurazione in modo da poterlo personalizzare a tuo piacimento.

8. gitlink

Ci piace gitlink per la sua semplicità. Sebbene ci siano molte estensioni Git là fuori, una delle cose su gitlink è che è semplice e fa solo una cosa. E lo fa bene. Evidenzia semplicemente un frammento di codice e gitlink ti porterà al repository online per quel particolare frammento. È incredibilmente utile andare rapidamente al tuo repository, indipendentemente da dove è ospitato in remoto.

9. Commenti migliori

Commentare il tuo codice è una delle abitudini più importanti che uno sviluppatore possa avere. Inoltre , commentare bene il tuo codice è un'abilità che dovrebbe essere insegnata in ogni classe di informatica e bootcamp di programmazione là fuori. Detto questo, Better Comments è una di quelle estensioni VS Code di cui tutti hanno bisogno perché, se credi nel nome, ti permetterà di lasciare commenti migliori nel tuo codice. Con scorciatoie che ti consentono di distinguere tra domande, esclamazioni, codice commentato, query, avvisi, punti salienti e TODO, questa estensione non solo ti semplificherà la vita, ma semplificherà anche la vita del tuo team. E qualsiasi sviluppatore che viene dopo di te nel progetto. Non possiamo raccomandarlo abbastanza.

10. Icone del codice VS

Una parte importante della personalizzazione di VS Code con le estensioni è la personalizzazione effettiva. Non solo cambiamenti di funzionalità. Con VS Code Icons, l'editor diventa un po' più colorato e più facile da navigare. Il file system è dotato di icone che rappresentano vari tipi di file e queste vengono visualizzate nell'esploratore e nelle schede del documento stesse. Rende molto più semplice e meno un mal di testa lavorare attraverso file system complicati. Letteralmente a volte. Le icone così facili da leggere prevengono l'affaticamento degli occhi e quindi il mal di testa. Quindi, per la tua salute, installa VS Code Icons.

11. Tag di chiusura automatica

Forse siamo noi, ma digitare i tag di chiusura per qualsiasi lingua diventa un lavoro ingrato. C'è solo qualcosa nell'aggiungere quel / in alla fine che fa sembrare un po' fuori le battute dei tasti. Mai aver paura. Il tag di chiusura automatica ci ha semplificato la vita. Quindi vogliamo rendere il tuo più facile. È semplice e facile e puoi continuare a digitare tra di loro e semplicemente premere i tasti fino alla riga successiva o alla fine di quella. Installalo e concedi alle tue dita una pausa dalla ginnastica di chiusura manuale dei tag.

12. colorare

CSS è fantastico. La scelta dei colori in CSS non lo è. Quando hai a che fare con codici esadecimali e valori RGBA, a volte è difficile ottenere un'immagine mentale della tavolozza che hai impostato per un sito. Questa estensione aiuta ad alleviare ciò fornendo una nota visiva per qualsiasi codice colore che usi all'interno dei tuoi file. Puoi vedere i colori che stai usando all'interno del testo stesso come un punto culminante in modo da non dover continuamente scambiare avanti e indietro da campioni e selettori di colore e così via.

13. Codice polare

Polacode è come una fotocamera Polaroid per il tuo editor di codice. Progettato per rendere lo snapshot del tuo codice più semplice e pulito, questo è un must per tutti gli autori di tutorial che vogliono che il loro codice sia giusto.

14. GitLens

È difficile spiegare completamente ciò che rende GitLens così eccezionale. Funziona come se Git e VS Code fossero stati progettati l'uno con l'altro e, invece di lavorare attraverso le gerarchie della riga di comando, ottieni visualizzazioni e approfondimenti che eliminano gran parte della confusione dal lavoro del team Git. Puoi visualizzare le cose tramite il passaggio del mouse, vedere le modifiche e le annotazioni recenti, le visualizzazioni di confronto all'interno di VS Code stesso, le mappe di calore, la cronologia delle linee e molto altro ancora. È fondamentalmente l'estensione Git perfetta e pensiamo che dovresti installarla subito.

15. Server live

Hai mai desiderato avviare un server di sviluppo locale dall'interno del tuo IDE e lavorarci in tempo reale? Non importa come hai risposto a questa domanda, vorrai dare una possibilità a Live Server. Perché è proprio quello che puoi fare con esso. Anche se potrebbe non eliminare completamente la necessità di prodotti come Local by Flywheel e MAMP, riduce sicuramente la loro necessità in molte situazioni.

16. Abbellire

Beautify utilizza il popolare js-beautify per mantenere il tuo JavaScript bello e ordinato. Non preoccuparti delle linee spezzate, della spaziatura e dei rientri strani. Basta fare clic su un pulsante e tutto il tuo codice sarà pronto per il suo primo piano (magari con Polacode dall'alto).

Conclusione

Questo elenco potrebbe essere lungo migliaia di elementi. In effetti, probabilmente ci sono alcuni di voi che hanno installato centinaia di estensioni diverse che si attivano e si disattivano in momenti diversi. Ma riteniamo che queste siano le estensioni VS Code che puoi installare e quindi imparare cos'altro vuoi mentre scavi più a fondo nel mercato.

Quali sono le tue estensioni VS Code preferite? Fateci sapere nei commenti!

Immagine in primo piano dell'articolo di SVIATLANA SHEINA / shutterstock.com