8 potenti estensioni di codice di Visual Studio per sviluppatori front-end

Sebbene Microsoft abbia rilasciato la prima versione stabile di Visual Studio Code, il suo potente editor di codice solo pochi mesi fa, a marzo 2016, ha già molte estensioni disponibili che possono portare l'esperienza di codifica a un livello superiore. Il estensioni ufficiali del codice di Visual Studio sono ospitati nel marketplace di Visual Studio, molti dei quali possono essere di grande aiuto per gli sviluppatori web.

Per questo post, ho testato un sacco di estensioni VS Code relative allo sviluppo front-end e ho creato un elenco di quelle che ho trovato di più intuitivo, facile da usare e conveniente. Non è una lista definitiva da tutti. Prenditi il tempo di esplorare il mercato per te stesso e vedere cos'altro ti può offrire, soprattutto perché molte grandi estensioni devono ancora venire.

Come installare VS Code Extensions

L'installazione di un'estensione è piuttosto semplice in Visual Studio Code, come è possibile fallo nell'editor di codice. Nel mercato del codice VS ogni estensione ha una sua pagina e puoi trovare il comando per installare l'estensione specificata in cima a questa pagina.

Il comando inizia sempre con il installazione ext termine. Per installare un'estensione, solo stampa CTRL + P all'interno di VS Code per avviare il pannello Quick Open, copia-incolla questo comando in esso, e infine riavvia l'editor di codice per far funzionare la nuova estensione.

8 Potenti estensioni di codice di Visual Studio

Frammenti HTML

Se si desidera scrivere spesso codice HTML in Visual Studio, l'estensione Snippet HTML può essere uno strumento utile, in quanto tale aggiunge un supporto elaborato per HTML. Sebbene VS Code abbia supporto di base per HTML, come ad esempio colorazione della sintassi, l'estensione Snippet HTML ne sa molto di più.

Probabilmente la caratteristica più utile di questa estensione è quella quando inizi a digitare il nome di un tag HTML (senza la parentesi angolare di partenza), frammenti HTML rapidamente mostra una lista delle opzioni disponibili con una breve informazione su ciascuna.

Quando fai clic sull'elemento di cui hai bisogno, Snippet HTML aggiunge il tag HTML5 completo con le sue proprietà più comuni. Ad esempio, se desideri aggiungere un link (tag di ancoraggio) al tuo documento, digita semplicemente un un in VS Code, scegli l'opzione giusta nella finestra popup e i frammenti HTML inseriranno il necessario snippet nel tuo editor senza problemi.

Anche l'autore di questa estensione presta attenzione a rimuovere elementi deprecati, quindi se si desidera utilizzare un tag HTML che non è possibile trovare nell'elenco popup, vale la pena verificare se è ancora valido o meno.
Completamento della classe CSS HTML

Il completamento della classe CSS HTML può essere un'estensione utile se è necessario utilizzarne molti Classi CSS nel tuo progetto. Succede spesso a noi sviluppatori, che siamo non del tutto sicuro del nome esatto di una classe, ma si trova solo nella parte posteriore della nostra mente come conoscenza passiva.

Questa estensione intelligente offre una soluzione a questo problema, in quanto tale recupera i nomi di tutte le classi CSS nello spazio di lavoro corrente e visualizza un elenco su di essi.

Diciamo che vuoi creare un sito usando Zurb Foundation e vuoi usare la piccola griglia. Non ricordi come le classi abbiano un nome preciso, ma sai che hanno nomi semantici.

Con il completamento della classe CSS HTML devi solo iniziare a digitare la parola piccolo, e le opzioni disponibili appaiono sullo schermo in una volta, in modo da poter selezionare facilmente quello che ti serve.
Visualizza nel browser

View in Browser è un'estensione semplice ma potente per Visual Studio Code. Può facilitare lo sviluppo front-end permettendoti di farlo dare una rapida occhiata al risultato del tuo lavoro nel browser durante la codifica. È possibile aprire il file HTML nel browser predefinito direttamente da VS Code premendo il tasto CTRL + F1 scorciatoia da tastiera.

Notare che Visualizza nel browser supporta solo HTML, quindi se vuoi vedere il tuo sito devi avere il file HTML aperto. tu non può accedere direttamente al browser da un file CSS o JavaScript.
Debugger per Chrome

Debugger per Chrome è stato creato da Microsoft stessa ed è attualmente la quarta estensione di codice di Visual Studio scaricata più frequentemente.

Debugger per Chrome rende possibile eseguire il debug di JavaScript in Google Chrome senza lasciare l'editor di codice. Ciò significa che non è necessario lavorare con il transpiled JavaScript che vede il browser, ma è possibile eseguire il debug direttamente dai file di origine originali. Guarda questa demo per vedere come funziona.

L'estensione ha tutte le funzionalità necessarie per un debugger decente, come ad esempio impostazione del punto di interruzione, visione variabile, stepping, un comoda console di debug, e molti altri (vedi l'elenco delle caratteristiche della prima versione).

Per utilizzare questa estensione devi avviare Chrome con debug remoto abilitato, e impostare un adeguato launch.json file. Quest'ultimo potrebbe richiedere un po 'di tempo, ma puoi trovare istruzioni dettagliate su GitHub su come farlo correttamente.
JSHint

L'estensione JSHint di Visual Studio Code integra il popolare linter di JSHint JavaScript nell'editor di codice, quindi è possibile essere informato sui propri errori non appena li commetti. Per impostazione predefinita, l'estensione JSHint utilizza le opzioni predefinite del linter che è possibile personalizzare con l'aiuto di un file di configurazione.

L'uso di questa estensione è abbastanza semplice, poiché JSHint contrassegna gli errori con il rosso e le notifiche con una sottolineatura verde. Se desideri maggiori informazioni sui problemi, passa con il mouse sulle parti sottolineate e JSHint invierà un'etichetta con la descrizione del problema in una sola volta.
Frammenti di codice jQuery

jQuery Code Snippet può velocizzare notevolmente lo sviluppo front-end in Visual Studio Code, poiché consente di scrivere rapidamente jQuery senza errori di sintassi di base. Frammenti di codice jQuery attualmente ha in giro 130 snippet disponibili puoi invocare digitando il trigger giusto.

Tutti i frammenti di jQuery, ma uno inizia con JQ prefisso. L'unica eccezione è il func innescalo inserisce una funzione anonima nell'editor.

Questa comoda estensione è un aiuto utile quando non si è completamente sicuri della sintassi corretta e si vuole risparmiare tempo per controllare la documentazione. Rende anche più semplice scorrere rapidamente le opzioni disponibili.
pergolato

L'estensione Bower VS Code può rendere più intuitivo il flusso di lavoro di sviluppo Web integrando il gestore di pacchetti Bower in Visual Studio Code.

Se metti questa estensione in uso tu non devi passare avanti e indietro tra il terminale e l'editor, ma è possibile eseguire facilmente le attività di gestione dei pacchetti direttamente all'interno del codice di Visual Studio.

L'estensione Bower ti guida attraverso la creazione dei tuoi progetti bower.json file, ed è anche possibile installare, disinstallare, cercare, aggiornare pacchetti, gestire la cache ed eseguire molte altre attività con esso (vedere l'elenco completo delle funzionalità).

Puoi accedere ai comandi relativi a Bower avviando la palette dei comandi premendo F1, digitando “pergolato” nella barra di inserimento, facendo clic su “pergolato” opzione nell'elenco a discesa visualizzato e selezionando il comando Bower appropriato.
Storia Git

Git History rende possibile seguire le modifiche di un progetto Git all'interno del codice di Visual Studio. Questa estensione è particolarmente utile quando si desidera contribuire a un progetto Github più grande e bisogno di un modo per verificare rapidamente le modifiche apportate da altri sviluppatori.

Con l'estensione Git History installata puoi guarda la storia di un intero file o a linea particolare dentro di esso. Puoi anche confronta le versioni precedenti dello stesso file.

Puoi accedere ai comandi relativi a Git History se digiti la parola “Idiota” nella palette dei comandi (F1), scegliere “Idiota” all'interno dell'elenco a discesa e infine seleziona il comando che ti serve. Nota che è necessario aprire il file di cui vuoi vedere la cronologia prima di poter eseguire qualsiasi azione su di essa.