Visual Studio Code Extensions Series – 3° week 1

Visual Studio Code Extensions Series – 3° week

Benvenuti nella terza mini serie dedicata alle “extension” di Visual Studio Code.
Oggi sarò più verticale sulle 3 librerie/framework più in voga nel mondo del Front End: Angular (un pò in più per mia scelta personale :P), React e Vuejs.

Visual Studio Code Extensions Series – 3° week 2
Lavorando spesso con progetti basati su tali tecnologie, alcuni processi/flussi di lavoro sono ripetitivi e a lungo termine portano via tempo prezioso e una considerevole mole di errori (di battitura, di distrazione e così via).
Grazie ad alcune extension (che vi elencherò a breve) ho risolto questi problemi, rendendo lo sviluppo più smart e produttivo (e con meno errori)  :).

 

1) 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.

 

2) 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.

 

3) 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.

 

4) 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!

 

5) 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 🙂

 

Per questa settimana è tutto :-).
Ecco un veloce reminder sulle puntate precedenti (se nel caso avete voglia di rivederle o non avete avuto tempo di guardarle ancora):

 

Alla prossima settimana 🙂

Valerio Pisapia
Valerio Pisapia, 34 anni, laureato in Ingegneria Informatica all’Università di Napoli Federico II. Ha esperienza decennale nello sviluppo mobile e web in ambito internazionale. Fornisce training e mentoring per progetti di svariata natura. Founder di una startup IT in Svizzera che si occupa di consulenza specializzata in ambito Web.

Questo si chiuderà in 20 secondi

Translate »