Visual Studio Extensions

Iniziamo questa nuova serie intitolata “Visual Code Extensions Series” in cui in cercherò di proporvi le migliori estensioni per Visual Studio Code che mi permettono di essere più produttivo quotidiamente, automizzatizzando e snellendo alcuni processi.

Perchè Visual Studio Code? Beh, perchè è Free, Open Source e fruibile su qualsiasi piattaforma.

Ma anche statisticamente, VS Code è in forte crescita rispetto ai suoi competitor.

Statistica su scala mondiale nel periodo tra il 02-2018 e il 02-2019
(Sorgente: https://pypl.github.io/IDE.html)

Una delle parti più impressionanti di Visual Studio Code è la personalizzazione, specialmente tramite le estensioni. Se sei uno sviluppatore web, non sarai in grado di vivere senza installare queste estensioni (ve le consiglio davvero :-)).

1) Debugger per Chrome

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

Che ci crediate o meno, il debug di JavaScript significa molto più della semplice scrittura di istruzioni su console.log () (anche se è molto). Chrome ha funzioni integrate che rendono il debug un’esperienza molto migliore. Questa estensione ti offre tutte (o vicino a tutte) le funzionalità di debug all’interno del VS Code!

2) Javascript (ES6) Code Snippets

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

Questo è uno tra i miei preferiti.
Sono fermamente convinto che non sia necessario ridigitare lo stesso pezzo di codice più e più volte (inutile re-inventare la ruota no?)
Queste estensioni ti forniscono snippet per pezzi di codice scritti in JavaScript moderno (ES6).

Side note … se non stai utilizzando le funzionalità JavaScript di ES6, dovresti farlo!

3) Path Intellisense

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

Nei progetti di grandi dimensioni, ricordare nomi di file specifici e le directory in cui si trovano i file può diventare un lavoro oneroso e complicato.Questa estensione ti fornirà  una intellisense per questo. Quando inizi a digitare un percorso tra virgolette, otterrai un aiuto per le directory e i nomi dei file. Questo ti farà risparmiare molto tempo e sarai più produttivo :).

4) Live Server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Apporta modifiche nell’editor di codice, passa al browser e aggiorna per visualizzare le modifiche.
Questo è il ciclo infinito di uno sviluppatore, ma cosa succede se il tuo browser si aggiorna automaticamente ogni volta che apporti delle modifiche?
Ecco dove entra in gioco Live Server!
Esegue anche la tua app su un server localhost. Ci sono alcune cose che puoi testare solo quando esegui la tua app da un server, quindi questo è un grande vantaggio.

5) Browser Preview

https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

Adoro l’estensione Live Server (menzionata sopra), ma questa estensione fa un ulteriore passo avanti in termini di praticità. Ti dà un’anteprima live-reloading direttamente all’interno di VS Code. Non dovrai più collegarti al tuo browser per vedere una piccola modifica! Eccezionale davvero 🙂

6) Auto Rename Tag

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

Hai bisogno di rinominare un elemento in HTML?
Bene, con Auto Rinomina Tag, è sufficiente rinominare il tag di apertura o di chiusura e l’altro verrà rinominato automaticamente. Semplice ma efficace!

7) Polar Code

https://marketplace.visualstudio.com/items?itemName=pnp.polacode

Hai già visto qualche fantastico screen di codice in articoli o tweet? Bene, molto probabilmente venivano da Polacode. È super semplice da usare. Copia un pezzo di codice negli appunti, apri l’estensione, incolla il codice e fai clic per salvare l’immagine!

8) Bracket Pair Colorizor

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

Le parentesi sono una “piaga” per ogni sviluppatore. Con tonnellate di codice annidato, diventa quasi impossibile determinare quali parentesi corrispondono tra loro. Bracket Pair Colorizor (come ci si potrebbe aspettare) colora le parentesi corrispondenti per rendere il codice molto più leggibile.

Fidati, sarà una svolta per il tuo quotidiano di coding 🙂

9) ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Vuoi scrivere un codice migliore?
Vuoi una formattazione coerente per tutto il tuo team?
Installa ESLint.
Questa estensione può essere configurata per formattare automaticamente il codice e notificarti con errori/warning di linting.
VS Code, in particolare,  è anche perfettamente configurato per mostrarti questi errori / warning.

Consulta i documenti ESLint per maggiori informazioni.

10) Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Non perdere tempo a formattare il tuo codice. Non ce n’è bisogno! Prima ho citato ESLint che fornisce formattazione e linting. Se non hai bisogno della parte linting, allora vai con Prettier. È semplicissimo da configurare e può essere configurato per la formattazione automatica del codice al momento del salvataggio. Non preoccuparti mai più della formattazione!

11) Angular v7 Snippets

https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2

Angular v7 Snippets di John Papa è stato installato più di 1.000.000 volte, rendendolo il migliore nella categoria snippet di JavaScript.I 42 snippets sono disponibili in tre categorie: TypeScript;  RxJS TypeScript (Reactive Extensions) e snippet HTML. Per inserire il codice shell per un nuovo componente, ad esempio, inizia a digitare “a-component” fino a quando non puoi selezionare il nome completo, e ottieni questo:

import { Component, OnInit } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'selector-name',
    templateUrl: 'name.component.html'
})

export class NameComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

Fantastico non credi ?! Risparmi un tempo indefinito nella costruzioni di componenti e non solo.

12) Vue-Snippets

https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets

Basato su vue.tmLanguage, questo pacchetto supporta: vue (.vue), HTML (.html), JavaScript (js), typescrpit (Ts) e il linguaggio pug (.pug).Il pacchetto include circa 82 snippet principalmente per le funzionalità JavaScript, HTML e il routing di Vue. Per raccogliere errori, ad esempio, si inizia a digitare la lettera “v” finché non si trova l’opzione VueConfigErrorHandler, che alla pressione di INVIO fornisce:

Vue.config.errorHandler = function (err, vm) {
    // handle error
}

Vue 2 Snippet è stato installato più di 500,00 volte e ha ottenuto una valutazione media di 4.9 / 5.

13) React Standard Style code snippets

https://marketplace.visualstudio.com/items?itemName=TimonVS.ReactSnippetsStandard

Fornisce una serie di snippet di codice per lo sviluppo React seguendo le linee guida delle ultime versioni di Javascript (ES6/7).Supporta i seguenti tipi di file: JavaScript (.js), TypeScript (.ts), JavaScript React (.jsx;), TypeScript React (.tsx) e JSX dopo aver installato l’estensione corrispondente Include 51 snippet, 29 dei quali sono dedicati ai prop types.

14) Angular2 Switcher

https://marketplace.visualstudio.com/items?itemName=infinity1207.angular2-switcher

Lo switcher ti consente di passare rapidamente da un file all’altro di un determinato componente. Supponiamo che tu sia nel file accordion.ts: con una semplice scorciatoia puoi ora passare a accordion.css o accordion.html. Abbastanza utile!

15) Ng Bootstrap Snippets

https://marketplace.visualstudio.com/items?itemName=ktriek.ng-bootstrap-snippets

Stai sviluppando un’app con bootstrap?Probabilmente stai usando la libreria ng-bootstrap allora. Se è così, questa extension con i suoi oltre 20 snippet può essere di grande aiuto per risparmiare tempo.Basta installarlo e digitare ngb e magiaaa 🙂

16) Peacock

https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

Ti sarà sicuramente capitato di lavorare con più instance aperte di VS; ti sarà capitato anche di andare in confusione perchè non riesci a trovare il progetto che ti serve.Ecco che il grande John Papa ha sviluppato Peacock, che mira a risolvere questa problematica consentendo di assegnare i colori della barra degli strumenti per un determinato progetto.  

17) Auto Rename Tag

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

Questa estensione è così semplice che è davvero sorprendente che non sia stata inclusa nella versione di default di Visual Code.Con l’estensione di seguito abilitata, puoi ora rinominare un tag in HTML e far rinominare il tag di chiusura in automatico: 

18) Angular Language Service

https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

L’estensione Angular Language Service è gestita direttamente dal team Angular e fornisce il completamento del codice e il supporto per la definizione di go-to all’interno di modelli HTML. Non dovrai più ricordarti come hai chiamato un particolare oggetto; iniziando a scriverlo tale estensione ti darà la funzionalità di autocompletamento e … il gioco è fatto.

19) Ionic 4 Snippets

https://marketplace.visualstudio.com/items?itemName=fivethree.vscode-ionic-snippets

Così come per l’estensione di Angular, Ionic 4 Snippet completerà per te i tag dei componenti nel tuo codice HTML e anche qualche snippet lato codice e CSS. Questo ti farà risparmiare un botto di tempo, evitando di consultare assiduamente la documentazione (ovviamente se li ricordi tutti i tag ben per te :D).Lavora anche con Ionic 3.

20) Code Spell Checker

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Questo è autoesplicativo ma estremamente utile: rileva errori di ortografia nei file di codice. Spesso trovo che questo aiuti a catturare bug non intenzionali facendo un refuso in un nome di variabile che TypeScript non catturerebbe altrimenti (come nei template).

Se hai altre estensioni che non ho menzionato, sarò ben lieto di accoglierle all’interno di questa lista. Commentate 🙂

Spero questo articolo sia stato utile. Se si, condividilo con i tuoi amici, colleghi o con chi ritieni che possa essere interessato.