Visual Studio Code, o VS Code, è uno degli editor di codice sorgente più di tendenza utilizzati dagli sviluppatori. Per aumentare la produttività del tuo progetto di sviluppo software, puoi utilizzare alcune delle migliori estensioni VS Code menzionate in questo articolo.
Ottieni una fantastica esperienza pronta all’uso quando inizi a modificare i codici sorgente di software o pagine Web in Visual Studio Code. Tuttavia, essendo uno sviluppatore, potresti sempre richiedere più funzionalità in questo editor di codice dell’ambiente di sviluppo quasi integrato (IDE).
VS Code Marketplace dovrebbe essere la tua destinazione per tutti i tipi di estensioni VS IDE. Continua a leggere questo articolo per trovare le migliori estensioni VS IDE che puoi utilizzare nella tua app Web o nei progetti di sviluppo di app di Windows.
Sommario:
La popolarità del codice di Visual Studio
Secondo il WakaTime statistiche sulla programmazione, gli sviluppatori hanno utilizzato l’editor VS Code per oltre 21 milioni di ore. È stato l’editor di codice n. 1 per il 2021 quando ha confrontato le ore di modifica del codice in altri strumenti come IntelliJ (> 3 milioni di ore) e PhpStorm (> 2 milioni di ore).
Ecco alcuni motivi per cui la maggior parte degli sviluppatori preferisce VS Code rispetto ad altri editor di codice sorgente:
# 1. È completamente gratuito, open source e viene fornito con supporto multipiattaforma. Ciò significa che funziona su Linux, Windows e macOS.
#2. L’editor ha un debugger integrato. Pertanto, è necessario fare meno clic. Inoltre, puoi tenere d’occhio il tuo progetto di codifica e il debugger in un’unica finestra senza dover cambiare app.
#3. VS Code è pronto all’uso con IntelliSense, altrimenti noto come codifica predittiva.
#4. Puoi convertire facilmente l’app VS Code in una workstation full-stack con i tasti di scelta rapida corretti, le estensioni VS Code e le impostazioni.
Cosa sono le estensioni IDE di Visual Studio?
VS Code è un editor di codice sorgente super-organizzato che supporta operazioni di sviluppo di software e app come il controllo della versione, il debug e l’esecuzione di attività. Fornisce una piattaforma efficiente agli sviluppatori per un ciclo di compilazione e debug del codice senza sforzo per la maggior parte dei linguaggi di programmazione. Tuttavia, avrai bisogno di un IDE come Visual Studio per flussi di lavoro complessi.
Per superare le carenze, gli sviluppatori hanno escogitato estensioni VS Code. Le estensioni sono semplicemente componenti aggiuntivi che puoi installare nell’app VS Code e accedere a nuove funzionalità. Le estensioni VS IDE aumentano principalmente la produttività e rendono la codifica più semplice e impeccabile.
Perché le estensioni IDE sono utili?
In primo luogo, puoi usare le estensioni VS Code per migliorare l’usabilità dello strumento per vari progetti di sviluppo di software e app. Se il progetto richiede una funzionalità specifica che manca a VS Code, puoi cercare un’estensione nel mercato.
Inoltre, le estensioni ti aiutano ad aumentare la produttività del tuo team di sviluppo di app. È possibile evitare errori inutili durante la codifica utilizzando le estensioni di completamento del codice.
Inoltre, sono disponibili programmi di installazione di pacchetti di estensioni avanzati che possono aiutarti a importare repository per progetti DevOps da siti di hosting di pacchetti. In poche parole, le estensioni ti consentono di convertire il codice VS in un IDE a servizio completo.
Diamo ora un’occhiata ad alcuni dei migliori editor di codice VS.
Sincronizzazione impostazioni
Puoi controllare il Sincronizzazione impostazioni Estensione VS IDE dal marketplace di Visual Studio se è necessario sincronizzare frammenti di codice, impostazioni, temi, associazioni di tasti, icone di file, aree di lavoro e così via su computer diversi durante il progetto di sviluppo. L’estensione utilizza GitHub Gists.
Alcune grandi caratteristiche sono:
- Puoi utilizzare il tuo account GitHub esistente Gist e token.
- Scarica automaticamente le ultime modifiche alle impostazioni.
- Impostazioni di caricamento automatico quando c’è una modifica nel file.
L’estensione ha già visto più di 3 milioni di installazioni. Inoltre, il componente aggiuntivo è gratuito per qualsiasi tipo di lavoro di sviluppo. Tuttavia, ci sono modi per supportare gli sviluppatori di questo strumento, se lo desideri.
Server dal vivo
Se stai lavorando allo sviluppo di siti Web in VS Code e hai bisogno di visualizzare il tuo lavoro finora, puoi utilizzare Server dal vivo. Crea un server locale e temporaneo solo per il sito Web in fase di sviluppo. Puoi visualizzare pagine di siti Web sia dinamiche che statiche utilizzando questa estensione.
Alcune caratteristiche salienti sono:
- Web server live e ricaricabile basato su browser per la visualizzazione di siti Web.
- Gli utenti possono arrestare o avviare il server con un solo clic dalla barra di stato del componente aggiuntivo.
- Compatibile con l’allegato di debug di Chrome.
Lo strumento è disponibile gratuitamente e finora ha registrato oltre 23 milioni di installazioni.
Visual Studio Code Remote – SSH
Il telecomando – SSH il componente aggiuntivo per VS Code ti consente di utilizzare qualsiasi PC remoto con un server SSH come IDE. Migliorerà notevolmente la risoluzione dei problemi e lo sviluppo in varie situazioni. Alcune caratteristiche degne di nota sono:
- Sviluppa app e software su una sofisticata workstation remota accedendovi dal tuo computer locale.
- Scambia istantaneamente tra vari ambienti di sviluppo senza influire sulle prestazioni del tuo computer locale.
- Collabora su un IDE esistente da più macchine remote.
La parte migliore è che non è necessario distribuire alcun codice sorgente sulla workstation locale. Il componente aggiuntivo esegue comandi e altre estensioni VS IDE direttamente sul computer remoto.
Più carino: formattatore di codice
Se vuoi implementare una guida di stile comune a tutti i progetti di sviluppo del tuo team, devi provare il Più carino componente aggiuntivo per VS Code. Ecco alcune caratteristiche di questo componente aggiuntivo che dovresti conoscere:
- Estensione di formattazione del codice supponente
- Si integra con molti editor di codice
- Le discussioni sullo stile diventano inutili quando usi questo strumento
- Ti fa risparmiare energia e tempo
A volte, come sviluppatore, potrebbe essere necessario lavorare su una base di codice incoerente. Puoi facilmente pulire e riformattare una base di codice esistente usando questa estensione su VS Code.
npm
Se lavori su progetti JavaScript, devi provare npm come gestore di pacchetti. Ora, quando devi spostare il tuo lavoro nell’editor di codice VS, puoi farlo. Perché l’estensione npm ti consente di goderti la supportabilità di npm sull’editor di codice VS come altri IDE.
Alcuni dei comandi costruiti sono:
- Richiamo dell’ultimo script npm utilizzato dopo l’installazione di questa estensione.
- Esegui uno script npm
- Terminare qualsiasi script in esecuzione
- Esegui npm install
Questa è un’estensione VS Code sviluppata da Microsoft che ha registrato oltre 5 milioni di installazioni.
Responsabile del progetto
Se sei un project manager di sviluppo software e supervisioni più progetti DevOps su VS Code, dovresti provare Responsabile del progetto. Lo strumento ti consente di accedere a tutti i progetti da un computer, indipendentemente da dove sono disponibili i progetti.
Ci sono disposizioni per definire i progetti in modo da poterli organizzare facilmente. Alcune caratteristiche degne di nota sono:
- Salva cartelle o spazi di lavoro come progetti
- Tagga i tuoi progetti per un’organizzazione avanzata
- Apri tutti i progetti nella nuova o nella stessa finestra
- Identifica facilmente i progetti rinominati o eliminati
Inoltre, l’estensione ha visto oltre 2 milioni di installazioni.
SonarLint
SonarLint è un’estensione di Visual Studio open source che consente di risolvere i problemi di codifica prima che appaiano. Il componente aggiuntivo evidenzia le vulnerabilità e i bug della sicurezza durante la scrittura del codice in Visual Studio. La sua interfaccia è semplice e funziona proprio come un’app di controllo ortografico in qualsiasi editor di testo.
Inoltre, lo strumento fornisce una chiara guida alla risoluzione. Pertanto, hai la possibilità di correggere il codice prima che il flusso di lavoro si impegni nel programma. Inoltre, l’estensione di VS Code supporta diverse analisi del linguaggio di programmazione come C++, C, Java, HTML, PHP, JavaScript, TypeScript e Python.
Stylelint
Stai cercando uno strumento automatizzato che segnali errori di codifica, errori stilistici, bug e altri costrutti sospetti su VS Code? Puoi provare Stylelint, un’estensione linter facile da installare per VS Code. Oltre a segnalare, impone al tuo team di sviluppo di attenersi a convenzioni di stile del codice preapprovate per evitare spazzatura e spazzatura nel codice del software o dell’app.
Alcune caratteristiche degne di nota:
- Supporto plug-in per la creazione di regole personalizzate
- Per le moderne funzionalità e sintassi CSS, ha oltre 170 regole integrate
- A volte risolve automaticamente i problemi di codice quando comprende qualsiasi modello
VS Marketplace mostra 700.000 installazioni per questo componente aggiuntivo.
CSS Sbircia
Vuoi sbarazzarti di dover passare al tuo file .css per ispezionare le proprietà allegate a un ID o una classe? Devi provare il CSS Sbircia componente aggiuntivo per VS Code. Ti consente di visualizzare l’immagine al passaggio del mouse del codice CSS dal file HTML.
L’estensione converte anche ID e nomi di classi in collegamenti ipertestuali. Pertanto, quando fai clic su questi collegamenti ipertestuali, puoi accedere immediatamente alla definizione dell’ID e alla classe del tuo CSS.
Questo componente aggiuntivo ha registrato più di 3 milioni di installazioni. Puoi installare lo strumento in VS Code gratuitamente.
Codice Polacco
Codice Polacco è un componente aggiuntivo per VS Code che ti consente di creare istantaneamente bellissimi screenshot del tuo software o codice dell’app. Quindi puoi utilizzare il componente risultante per condividere il tuo lavoro di codifica con collaboratori, amici o clienti. La parte migliore è che mantiene tutti i temi e i caratteri del codice VS Code esistenti. Il componente aggiuntivo inserisce semplicemente il codice in un bel layout che sembra professionale.
L’estensione viene fornita con una funzione di trascinamento per ridimensionare il contenitore o il frammento di codice. Devi solo tenere premuto e trascinare l’angolo in basso a destra. Altri comandi che puoi usare per controllare l’aspetto delle immagini sono polacode.shadow, polacode.target, polacode.backgroundColor, ecc.
GitLens — Estensione del codice VS
GitLens, un’estensione VS Code gratuita, aiuta semplicemente i programmatori a comprendere meglio i codici di programmazione. Puoi scoprire rapidamente perché, quando e chi ha modificato un blocco di codice o una riga di codice.
Inoltre, puoi anche rivedere la cronologia del codice per acquisire informazioni utili sul perché e come si è evoluto un pezzo di codice. Pertanto, i responsabili del progetto possono esplorare senza sforzo l’evoluzione o la storia di una base di codice.
L’estensione è disponibile anche come GitLens+. Ha due modalità di abbonamento. Puoi accedere con un account gratuito e condividere i dati con lo sviluppatore GitLens+ o aprire un account a pagamento. Puoi utilizzare l’account gratuito per i repository pubblici e l’account a pagamento per i repository privati.
Costo di importazione
Costo di importazione è un componente aggiuntivo di VS Code che consente di visualizzare la dimensione del file di una libreria di terze parti importata. Mostra il valore del costo di importazione non appena si importa la libreria nell’editor di codice VS.
Vedrai la dimensione della libreria in linea mentre digiti il codice. Per visualizzare le dimensioni del file di libreria importato, utilizza un webpack. Alcune caratteristiche degne di nota sono:
- Dimensioni della libreria per l’intero contenuto importato
- Visualizza dimensioni per l’importazione predefinita
- Compatibile con i linguaggi di programmazione Typescript e JavaScript.
L’add-on ha registrato più di 1 milione di installazioni.
Sentiero Intellisense
Di solito, è necessario gestire più file quando si lavora su un progetto di sviluppo di software o app. Quando si scrive un codice, è necessario inserire il nome del file così com’è dalla propria memoria. Ora, poiché i nomi dei file contengono trattini, ricordarli diventa un compito impegnativo. Qui puoi ricevere un aiuto rapido da Sentiero Intellisense.
È un’estensione che completa automaticamente i nomi dei file in una codebase. Lo strumento suggerisce immediatamente il file che stai cercando quando rileva le lettere iniziali. Può anche aiutarti a rendere visibili i file nascosti.
JavaScript Debugger (Notturno)
È basato su un protocollo di adattatore di debug (DAP). Debug del programma JavaScript. Lo strumento ti consente di eseguire il debug di componenti aggiuntivi di Chrome, Node.js, WebView2, Edge, VS Code e molti altri. Dalla versione 1.46 di VS Code, JavaScript Debugger è stato il componente aggiuntivo di debug predefinito. Microsoft sta inoltre implementando gradualmente lo strumento per Visual Studio IDE.
Questa estensione VS Code è uno strumento open source di Microsoft. Sei libero di usarlo per scopi di sviluppo commerciale o non commerciale. Lo strumento ha registrato finora oltre 600.000 installazioni.
Parole finali
Finora, hai scoperto alcune delle migliori estensioni di VS Code che devi utilizzare se ami lavorare su Microsoft Visual Studio Code. È un nome di spicco nell’ecosistema degli editor di codice open source. A seconda dei requisiti del tuo progetto, puoi installare una qualsiasi delle estensioni VS IDE precedenti.
Questo elenco definitivo delle migliori estensioni VS IDE ti aiuterà a risparmiare il tempo che avresti investito nella ricerca di questi strumenti. Ora puoi dedicare più tempo al tuo progetto poiché sai già quali estensioni sono buone.
Puoi anche controllare alcuni dei migliori IDE che ogni programmatore dovrebbe conoscere.