‫-: Prima di passare alla
‫sezione successiva e a mongoDB, voglio mostrarti come
‫impostare eslint insieme a più grazioso in vs codice
‫per migliorare la qualità del nostro codice.
‫Ora, se non stai utilizzando
‫vs code, o se hai già qualche
‫tipo di linter nel tuo flusso di lavoro, contrassegna questa lezione
‫come completata e vai alla sezione successiva.
‫Ma se non conosci es
‫Lint e vuoi migliorare la qualità
‫del tuo codice, iniziamo con questo video.
‫Quindi es Lint è fondamentalmente un programma
‫che scansiona costantemente il nostro codice
‫e trova potenziali errori
‫di codifica o semplicemente cattive pratiche di codifica che ritiene sbagliate.
‫È molto, molto configurabile in modo che
‫possiamo davvero adattarlo alle nostre esigenze
‫e abitudini di codifica.
‫Ora possiamo anche usare es Lint per la formattazione del codice,
‫ma continueremo a usare più
‫carini che abbiamo già impostato in precedenza per questo.
‫Quindi imposteremo l'intera cosa in
‫modo che più carino sia ancora il formattatore di codice
‫principale ma basato su alcune regole es
‫Lint che definiremo.
‫E quindi tutto ciò che es Lint farà
‫per noi sarà evidenziare gli errori.
‫Ma so che tutto questo
‫suona probabilmente più confuso di qualsiasi altra cosa.
‫E quindi configuriamolo ora.
‫Quindi la prima cosa che voglio
‫che tu faccia è installare l'estensione es Lint per vs Code.
‫Quindi vieni qui e cerca es Lint.
‫Va bene?
‫E l'ho già
‫installato, ma sembra così.
‫E quindi tutto ciò che devi
‫fare è andare avanti e installarlo, e quindi probabilmente ricaricare questa finestra.
‫E se non hai ancora impostato Prettier, vai
‫avanti e fallo anche quello.
‫Quindi con questa estensione
‫qui, ma questa l'abbiamo già
‫fatta nella prima sezione se l'hai seguita con me.
‫Successivamente, abbiamo bisogno di installare un mucchio di dipendenze
‫di sviluppo, quindi rendiamo questo qui molto più
‫grande e andiamo all'altro nostro terminale qui.
‫E quindi diciamo, npm install e dobbiamo anche installare es
‫Lint in modo più carino come pacchetti npm.
‫Va bene?
‫Quindi è Lint e più
‫carino, e probabilmente questa è ora
‫la prima volta in
‫cui stiamo effettivamente installando più pacchetti contemporaneamente.
‫E quindi è molto semplice, scriviamo semplicemente tutti
‫questi pacchetti tutti nello stesso comando.
‫Va bene?
‫Ma con questi due siamo in realtà tutt'altro che pronti.
‫Quindi il prossimo è es Lint config più carino
‫e questo disabiliterà la formattazione per es Lint,
‫perché ricorda, vogliamo che sia più carino formattare il nostro codice.
‫Successivamente abbiamo es Lint plugin più carino
‫e questo consentirà a
‫es Lint di mostrare errori di formattazione mentre
‫digitiamo, di nuovo, usando più carino.
‫Va bene?
‫E tutto questo è ovviamente molto confuso
‫e ho avuto bisogno di molto tempo per capirlo.
‫E quindi questa è davvero solo una ricetta
‫che devi seguire qui.
‫Va bene?
‫Quindi non si tratta
‫di capire cosa sto facendo qui,
‫tutto ciò che devi fare è seguire
‫questa ricetta e funzionerà per questo progetto, e nei progetti
‫futuri tutto ciò che devi fare
‫è andare al file dot json del tuo pacchetto e
‫copia quella configurazione e installala nel tuo prossimo progetto.
‫Perché in realtà, tutti
‫questi pacchetti devono essere installati localmente.
‫Non funzionerebbe se provassimo a
‫farlo a livello globale.
‫Bene?
‫Ad ogni modo, ora abbiamo bisogno di una buona guida di stile per i
‫lavori che possiamo seguire.
‫E ci sono molte guide di stile
‫là fuori, ma la
‫più popolare è probabilmente la guida di stile di airbnb.
‫E quindi, in realtà, c'è una
‫configurazione es Lint che possiamo usare per
‫questo, che è su npm, e si chiama eslint config airbnb.
‫Ok, il prossimo passo è il nodo plugin eslint e questo
‫aggiungerà un paio di regole eslint specifiche
‫solo per nodejs, ok?
‫Quindi fondamentalmente per trovare alcuni
‫errori che potremmo fare durante la scrittura del codice nodejs.
‫E ora, finalmente, abbiamo bisogno di altri tre plugin eslint che
‫sono necessari solo per far funzionare effettivamente la
‫guida allo stile di airbnb.
‫Quindi quella guida di stile, dipende un po' da questi.
‫Quindi eslint plugin, import, eslint,
‫plugin,
‫jsx,
‫a11y,
‫e
‫vedo che
‫ho un errore qui.
‫E infine eslint,
‫plugin, reagisci.
‫Anche se non stiamo scrivendo nel codice di reazione qui,
‫abbiamo ancora bisogno di questo perché la
‫guida allo stile di airbnb dipende da questo.
‫Quindi questi sono tutti i pacchetti,
‫spero di averli scritti correttamente.
‫E ora dobbiamo salvarli come dipendenze dev,
‫quindi salva dev e ora
‫premi invio e incrocia le dita che tutto funzionerà qui.
‫Quindi, sembra che sia andata così.
‫Diamo un'occhiata al nostro pacchetto
‫dot json e, infatti, qui abbiamo tutti questi pacchetti.
‫Grande.
‫Ora il prossimo passo è che abbiamo
‫bisogno di file di configurazione sia per più belli che per es lint, giusto?
‫E abbiamo già creato quello più carino prima
‫ed è già nel nostro progetto qui.
‫Così è questo, e tutto ciò
‫che ho fatto qui è stato dire che voglio sempre la citazione singola.
‫Va bene?
‫E l'altro è il file di configurazione per es lint,
‫e di nuovo è già nei file di
‫avvio perché non abbiamo davvero bisogno di
‫perdere tempo semplicemente per scrivere
‫questo terribile file di configurazione, giusto?
‫Quindi il file
‫è già scritto, esaminiamolo molto velocemente.
‫Quindi qui abbiamo
‫affermato che vogliamo usare la
‫guida allo stile di airbnb,
‫e anche più carina, e anche il plugin del nodo, ok?
‫Ora esl int riguarda le regole di codifica e
‫ci sono molte molte regole che es
‫lint cerca di farci rispettare.
‫Ma possiamo effettivamente cambiare
‫quelli che vogliamo usare, uno per uno.
‫E possiamo disattivarli completamente o
‫semplicemente mostrare un avviso invece di mostrare un errore.
‫Ad esempio, una regola è che eslint
‫non vuole che usiamo console dot log nel nostro
‫codice, quindi ogni volta per impostazione predefinita ci darà
‫un errore quando usiamo
‫console dot log.
‫Ma invece di mostrarmi
‫un errore, lo configuro in modo che mi mostri solo
‫un avviso, ecco perché abbiamo avvertito.
‫Potrei anche disattivarlo
‫completamente cancellando, come ho fatto
‫con molte di queste altre regole.
‫Quindi, per esempio, qui in questo prossimo
‫che dice che ogni
‫funzione dovrebbe sempre restituire qualcosa, ok?
‫E a volte, abbiamo semplicemente una funzione che
‫non lo fa, quindi avevo bisogno di disattivare completamente questa regola.
‫O infine, abbiamo anche, per
‫esempio, questa regola qui, che dice che
‫non dovrebbe mai esserci una variabile che dichiariamo ma non usiamo.
‫Questo in realtà cattura molti bug,
‫quindi lo lascio come errore qui, ma
‫ho anche creato alcune eccezioni.
‫Quindi, queste quattro eccezioni qui che sono
‫le variabili tipiche che
‫abbiamo in express,
‫quindi nei nostri gestori in express, ma che non usiamo sempre.
‫Destra?
‫E quindi non voglio che questi vengano contrassegnati come
‫errori ogni volta che ho, ad
‫esempio, una variabile req in una funzione, ma non la uso.
‫Va bene?
‫Quindi puoi dare un'occhiata a queste altre regole
‫qui e decidere quale
‫ti piace e quale no.
‫Quindi queste sono le regole che hanno senso per
‫me, ma ovviamente potrebbe essere diverso per te.
‫Andiamo rapidamente al sito Web di eslint per
‫dare un'occhiata a tutte le
‫cose che puoi configurare.
‫Quindi es lint, allora qui hai della documentazione e alcune istruzioni su
‫come puoi configurarlo, ma tutto ciò che voglio
‫davvero mostrarti
‫sono tutte queste diverse regole.
‫Quindi li hai tutti
‫qui dentro e quindi vedi, ce ne sono davvero
‫un sacco, un sacco, di quelli che puoi configurare, ok?
‫Quindi dai un'occhiata a questo, ma
‫in realtà è più semplice configurare semplicemente questo es lint ogni volta che
‫ricevi un nuovo errore nel tuo codice.
‫Va bene?
‫Quindi lascia che te lo
‫mostri, in modo che ora possiamo vederlo in pratica.
‫Quindi andiamo al file del nostro server qui e
‫creiamo semplicemente del codice qui
‫che va contro alcune regole es.
‫Quindi, ad esempio, definire una variabile qui, in questo modo,
‫e quindi assegnarle qualcos'altro.
‫Va bene, quindi sappiamo che x è una costante
‫e quindi non dovrebbe essere riassegnata.
‫Quindi, se diamo questo
‫ora assegnato, dovremmo effettivamente vedere un errore.
‫E beh, non l'abbiamo fatto, quindi vado avanti e
‫chiudo la finestra, e poi la riapro.
‫Quindi fallo anche tu
‫e, si spera, funzionerà per allora.
‫Ok, e quindi in realtà vediamo i nostri errori qui
‫ora contrassegnati in rosso.
‫Quindi, veniamo ora a questa scheda dei problemi.
‫Fammi alzare un po',
‫così qui vediamo tutti gli errori che abbiamo.
‫Quindi, partendo dalla prima,
‫ci si aspettava una riga vuota dopo
‫l'istruzione richiesta non seguita da un'altra richiesta.
‫Quindi fondamentalmente quello che
‫mi sta dicendo è che vuole questi requisiti
‫qui in alto e poi, una riga vuota e poi così.
‫E così, l'errore scompare.
‫Va bene?
‫E quindi questo tipo di applica uno standard di codifica più gradevole.
‫Successivamente abbiamo x viene assegnato e un valore non viene mai utilizzato.
‫E così è che
‫nessuna variabile inutilizzata che ho menzionato prima.
‫Quindi, questo qui.
‫Va bene?
‫E quindi questo è un errore, ma potrei anche disattivarlo
‫solo per mostrarti come cambierebbe.
‫Quindi l'ho salvato e quindi ora quell'errore è sparito.
‫Quindi vedi che non è più contrassegnato in rosso.
‫Ma in realtà voglio che questo sia un
‫errore, quindi scrivo errore, gli do un salvataggio e il nostro errore è tornato.
‫Vedete, è dichiarato ma non è mai usato.
‫E poi, qui x è costante.
‫Quindi abbiamo davvero fatto un errore
‫qui, che era quello
‫di riassegnare una costante, e questo non è consentito,
‫quindi liberiamoci di questo e poi l'errore scompare.
‫Abbiamo ancora questo perché il valore non è
‫mai stato utilizzato.
‫Scriviamo velocemente x più due e ora non c'è più.
‫Ma abbiamo il prossimo errore, fondamentalmente
‫semplicemente perché abbiamo questo
‫codice seduto qui intorno non assegnato a nulla.
‫Quindi, diciamo solo che const y è uguale a questo
‫ma ovviamente y viene assegnato ma mai utilizzato, e quindi stiamo
‫entrando in questo ciclo qui.
‫Ma, comunque, questo era solo per dimostrartelo.
‫E allora vediamo ora l'avvertimento finale.
‫E quindi questa è la console senza, giusto?
‫Quindi ricorda che in realtà ne ho parlato prima ed
‫è verde perché è un avvertimento.
‫Quindi, di nuovo, potrei spegnerlo e quindi il
‫mio problema scomparirebbe, quindi il codice sembrerebbe
‫normale ora.
‫Ma in realtà voglio che eslint mi avverta di questo,
‫perché non è una buona pratica
‫avere troppi log della console più avanti nella produzione.
‫Va bene, adesso è tornato.
‫E in realtà vs code mi avverte anche che
‫c'è un avviso verde qui in
‫questo file.
‫Quindi forse l'hai notato prima,
‫ma se inseriamo un
‫errore qui, in realtà diventerà rosso.
‫Va bene?
‫Quindi ora è rosso e abbiamo due problemi lì dentro.
‫E questo è davvero molto utile per identificare
‫i problemi in tutti questi file.
‫Va bene, liberiamocene.
‫E quindi, in realtà, è così.
‫Quindi spero che abbia funzionato anche per
‫te se hai qualche errore, quindi prova a installare
‫semplicemente gli stessi pacchetti che ho fatto io.
‫Quindi tutto questo qui, e ricorda che è
‫così che lo fai.
‫Quindi, ad esempio, se vuoi
‫eslint cinque, dì semplicemente npm I eslint alle cinque.
‫Ad esempio, puoi anche fare cinque punti 16 punti 0 solo
‫per assicurarti che tutto sia lo stesso.
‫E in tal caso, tutto dovrebbe funzionare proprio
‫come ha fatto qui per me.
‫Ottimo, quindi questo è stato un altro
‫passo importante nel tuo viaggio per diventare uno sviluppatore.
‫Perché, credetemi, è davvero importante
‫disporre di code linting in atto come lo avete ora.
‫Quindi, di nuovo, per il tuo
‫prossimo progetto vai avanti, copia queste dipendenze nel file
‫json del tuo pacchetto dot e quindi
‫installale tutte contemporaneamente.
‫E questo ti renderà la vita molto più semplice.
‫Quindi è così che faccio
‫sempre, e lo stesso ovviamente, con il più carino
‫rc e questo file di configurazione eslint.
‫Comunque, basta parlare per questo video.
‫Ora siamo finalmente pronti per
‫passare all'importantissima sezione mongodb.