Visual Studio Code: le estensioni più utili

Ultimamente Visual Studio Code sta diventando il mio editor principale di lavoro per quanto riguarda lo sviluppo di applicazioni AngularJS o in generale applicazioni web.
Per ottimizzare i tempi di sviluppo e soprattutto arricchire l'editor di tante funzionalità, ho installato diverse estensioni che questo editor mette a disposizione.
Qua sotto potete trovare una lista di quelle che utilizzo io al momento.

1. HTML Snippet

Adatta per chi scrive tanto codice HTML e cerca velocità nella stesura delle pagine.
Molto semplice da usare in quanto basta scrivere il nome del tag che vogliamo andare ad inserire senza i simboli <> e premere tab.

Link: https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets
Comando: ext install html-snippets

2. HTML CSS Class Completion

Estensione utilissima per avere l'auto completamento delle classi CSS presenti nel vostro progetto web.
In automatico questa estensione fa una scansione dei vostri file CSS presenti nel workspace in modo da potervi proporre i nomi delle classi durante la scrittura del codice.
Per velocizzare il caricamento, utilizza una cache che può anche essere ricaricata a vostro piacimento con un apposito pulsante sulla barra di Visual Studio Code.

Link: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion 
Comando: ext install html-css-class-completion

3. View in Browser

Una semplice estensione che esegue il browser di default del vostro sistema operativo, lanciando il file che avete selezionato al momento.

Link: https://marketplace.visualstudio.com/items?itemName=qinjia.view-in-browser 
Comando: ext install view-in-browser

4. Debugger for Chrome

Estensione scritta da Microsoft stessa, permette il debug delle vostre applicazione web direttamente da dentro Visual Studio Code.
Permette funzionalità avanzate di debug come breakpoints, watches e ha anche una sua console di output.

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

[Update 01/11/2016]

Per chi invece di usare Chrome, volesse usare altri browser, ci sono altre estensioni che possono essere installate: Edge, Safari, Firefox

[/Update]

5. ESLint

Per chi usa quotidianamente JavaScript sa che la cosa in cui si perde più tempo è il debug e soprattutto trovare gli errori di sintassi nel proprio codice.
Con questa estensione invece possiamo vedere subito se ci sono errori prima di eseguire il codice.
Con le ultime versioni è stata anche introdotta la possibilità di abilitare un "fix" automatico di alcuni errori sul salvataggio del file.

Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint 
Comando: ext install vscode-eslint

6. jQuery Code Snippets

Questa estensione mette a disposizione oltre 130 snippet di codice jQuery.
Per utilizzarla è molto semplice: basta scrivere "jq" e selezionare lo snippet da utilizzare.

Link: https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets 
Comando: ext install jquerysnippets

7. Git History

Un client Git è già presente buit-in in Visual Studio Code fin dalle prime versioni. Questa estensione infatti non va a sostituire quello, che funziona molto bene, ma va ad aggiungere alcune funzionalità interessanti come ad esempio la history di un singolo file e una visualizzazione dei branch e della history del proprio progetto.
Per utilizzarlo sono presenti 3 nuovi comandi che si possono utilizzare direttamente dalla barra:

  • View Git History
  • View File History
  • View Line History

Link: https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory 
Comando: ext install githistory

8. C#

Credo che questa estensione non abbia bisogno di presentazioni.
Comunque installandola, viene aggiunto il supporto al linguaggio per eccellenza di Microsoft. Non solo un supporto, ma syntax highlighting, IntelliSense, Go To Defintion e tanto altro.

Link: https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp 
Comando: ext install csharp

9. vscode-icons

Il miglior set di icone per Visual Studio Code. Da qualche versione a questa parte dell'editor, hanno aggiunto un supporto migliorato ai temi e alla personalizzazione anche di questo aspetto non da sottovalutare per velocizzare il riconoscimento dei files.
Questo set è sicuramente il migliore.

Link: https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons 
Comando: ext install vscode-icons

10. beautify

Questa estensione internamente usa il servizio http://jsbeautifier.org/ per ottimizzare e rendere "più belli" i vostri file JavaScript, HTML, CSS e Json.
Può essere lanciato manualmente oppure, cambiando le impostazioni nel file di configurazione, può agire anche al salvataggio dei vostri files.

Link: https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify 
Comando: ext install beautify

[Update 09/11/2016]

11. Document This

Documentare il codice JavaScript è molto importante, sopratutto in progetti grandi e su cui lavorano più persone.
Questa estensione semplifica un po' la vita a noi sviluppatori che, di norma, non abbiamo voglia di fare questa attività (io per primo!).
Per usarla è molto semplice perchè basta usare degli shortcut da tastiera con il cursore all'interno di una funzione e l'estensione aggiunge in testa alla funzione la documentazione un template di navigazione compatibile con JSDoc (che se non conoscete vi consiglio di guardare).

Link: https://marketplace.visualstudio.com/items?itemName=joelday.docthis 
Comando: ext install docthis

[/Update]

[Update 17/11/2016]

12. AutoFileName

Questa estensione vi aggiunge una funzionalità molto utile durante lo sviluppo di pagine HTML.
Vi consente di ottenere la lista dei file presenti in una cartella mentre digitate un percorso relativo rispetto al file in cui vi trovate.
Praticamente non dovete ricordarvi a memoria il nome del file che volete includere. :)

Link: https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename 
Comando: ext install autofilename

[/Update]

Conclusioni

Questa è solo una prima lista delle estensioni che al momento utilizzo quotidianamente e che cercherò di aggiornare via via che ne scopro altre o che comunque sia reputerò interessanti.

Stay tuned!

Comments (2) -

  • Io aggiungerei:
    - ReactJS
    - React Native
    - NativeScript
    - JSON Tools
    - PowerShell
    - Debugger for IOS Web
    - Material-theme

Add comment

Loading