‫-: Quindi questa sezione e il progetto del modulo del
‫nodo sono ora sostanzialmente
‫completati, ma in questo video volevo
‫esaminare molto rapidamente la configurazione del mio
‫codice VS e anche insieme a te impostare l'estensione Prettier.
‫E quindi queste sono le estensioni che ho installato
‫nel mio codice VS e non tutte saranno
‫rilevanti per
‫questo corso, ma ogni volta che
‫c'è un'estensione rilevante la menzionerò quando sarà utile.
‫Ad esempio questo. env qui sarà utile per
‫evidenziare le variabili ambientali in un file . n file.
‫Quindi esaminiamo rapidamente alcuni di essi.
‫Ad esempio ESLint è utile per trovare bug nel nostro codice
‫e in realtà configureremo ESLint con node un po'
‫più avanti in un'altra sezione.
‫Abbiamo l'anteprima delle immagini che è una piccola
‫estensione molto carina per visualizzare in anteprima le immagini.
‫E forse hai notato che quando stavamo facendo questo, ad esempio,
‫l'esempio
‫qui vedi che qui sul lato sinistro mostra
‫tutte le immagini che includiamo in un sito web.
‫Quindi in questo esempio è questo.
‫Va bene, quindi solo qualcosa di piccolo che ho trovato molto utile.
‫Cos'altro abbiamo qui?
‫Abbiamo Prettier e quindi questo è
‫quello che voglio configurare con te in questo
‫video, ma per ora esaminiamone qualcun
‫altro qui.
‫Quindi Pug è un linguaggio che useremo in seguito
‫per costruire
‫modelli e quindi è utile avere questa
‫estensione di abbellimento anche per quello.
‫Poi ho anche TabNine, che a volte fa qualche
‫bel completamento automatico magico.
‫Poi ho anche TODO Highlight,
‫che è molto utile per
‫fare questo tipo di
‫magia qui.
‫Ad esempio quando
‫ho TODO, lo evidenzierà in questo colore verde
‫o se scrivo BUG in
‫questo modo diventerà rosso
‫o FIXME e ho
‫tutti i tipi di queste parole chiave qui
‫che devo trovare i diversi
‫colori per renderle visibili nel mio codice
‫E compare anche qui in questa
‫barra di scorrimento.
‫Se li avessi in
‫linee diverse, vedresti che i tre colori
‫sono ora qui da questa
‫parte e questo è incredibilmente utile.
‫Va bene.
‫E poi ovviamente il
‫tema del
‫mio codice VS, che è
‫Oceanic Next, quindi ricevo questa domanda
‫tutto il tempo e quindi invece
‫di chiederlo bene ecco la risposta per questo.
‫Va bene.
‫Ma
‫ora dove si trova?
‫Quindi più bella questa
‫è un'estensione molto bella che può
‫formattare automaticamente il codice, non
‫importa se JavaScript
‫o CSS o
‫persino HTML.
‫Con questa estensione non dobbiamo più
‫preoccuparci della formattazione.
‫Ed è in realtà molto
‫supponente, quindi segue una serie di
‫regole molto rigide con solo una piccola configurazione possibile.
‫Ma in questo caso di formattazione del
‫codice, in realtà è molto bello quando qualcun
‫altro prende queste decisioni per te.
‫Quindi questa è una cosa in meno di cui dobbiamo preoccuparci.
‫Ok, quindi il nostro codice si
‫formatterà automaticamente senza che noi dobbiamo fare
‫nulla o preoccuparci di un certo stile.
‫Va bene?
‫Quindi, se
‫vuoi provarlo, vai avanti e installalo ora qui.
‫Probabilmente hai un pulsante di installazione.
‫Io, ovviamente, l'ho già installato.
‫Successivamente, ciò che devi fare per ottenere tutta la potenza
‫di questa estensione
‫è andare alle tue impostazioni
‫e quindi attivare Formatta al salvataggio.
‫Quindi cerca
‫il formato e poi Formatta su Salva.
‫Quindi, ogni volta che salviamo un
‫file ora, utilizzerà automaticamente Prettier per formattare il nostro codice.
‫Così abbiamo installato Prettyer.
‫Abbiamo abilitato la formattazione al salvataggio.
‫E ora possiamo configurare un po' Pretty.
‫Ancora una
‫volta, come ho detto, è molto supponente.
‫Quindi non ci sono molte cose che
‫possiamo cambiare, ma alcune cose che possiamo davvero cambiare.
‫Ora potremmo farlo qui, proprio
‫nel codice VS, ma
‫invece
‫quello che possiamo anche fare è definire un file di configurazione.
‫Va bene?
‫E trovo che in realtà sia meglio farlo.
‫Quindi, invece di usare il codice VS per definire le
‫impostazioni, possiamo usare una configurazione più
‫carina,
‫che si chiama Prettier RC.
‫Va bene, quindi ha un punto e poi
‫un rc più carino.
‫Quindi apriamo le parentesi graffe
‫e poi qui possiamo definire alcune impostazioni.
‫E trovo che sia meglio farlo così
‫perché poi posso cambiare
‫le configurazioni da un progetto all'altro.
‫E, cosa
‫ancora più importante, rende più facile per
‫più sviluppatori tutti nello stesso team utilizzare la stessa configurazione.
‫Ok, quindi può essere molto molto utile nelle squadre.
‫Ancora più utile di quando lavori da solo.
‫Ora l'unica impostazione che voglio effettivamente cambiare qui si
‫chiama apice singolo.
‫Quindi in realtà Prettier ha già integrato
‫questo completamento automatico e quindi sa che single significherà
‫singola citazione.
‫E l'impostazione predefinita è false, ma voglio impostarlo su true.
‫E quindi quello che farà è che tutte
‫le mie virgolette cambieranno da virgolette doppie a virgolette singole, ok?
‫Quindi l'ho salvato ed ecco il
‫nostro indice. js.
‫E ora vediamo se ci sono virgolette qui e penso che
‫non lo
‫siano perché ho usato abbastanza costantemente le virgolette singole comunque.
‫Ma mettiamo solo alcune virgolette da qualche parte qui e ora
‫farò un salvataggio
‫e darò un'occhiata a cosa succede.
‫Whoa.
‫Quindi prima di tutto hai visto che molte cose sono
‫cambiate qui e quindi il nostro codice è
‫saltato qui intorno, ma è qui che avevo le virgolette singole.
‫Quindi vedi che tornano ad essere le doppie virgolette.
‫Ora tutto questo codice che saltava era
‫probabilmente perché a un certo punto avevo più righe.
‫E Prettyer non lo permette.
‫Quindi, se ho qualcosa di simile e gli
‫do un salvataggio, Prettier consentirà solo una riga vuota.
‫E in realtà questo è stato per me il cambiamento più
‫difficile di tutta la formattazione che fa Prettier.
‫E non è
‫configurabile, quindi purtroppo non possiamo cambiarlo.
‫Perché a volte mi piace avere più righe, ma
‫con Prettyer questo non è possibile.
‫Posso fare qualcosa del genere e
‫poi funzionerà, ma è solo una soluzione.
‫Ma ancora con questo problema preferisco davvero usare Prettyer.
‫Ancora una volta perché toglie il pensiero alla
‫formattazione.
‫Ad esempio, qualcos'altro che ho fatto qui è stato questo.
‫Quindi, ogni volta che viene superato un certo numero
‫di caratteri in
‫una riga, troverà un buon modo per suddividere il
‫codice in più righe.
‫E quindi è quello che ha fatto qui.
‫Vediamo cos'altro abbiamo qui.
‫Beh, penso
‫che forse, oltre a questo cambiamento, abbiamo semplicemente
‫insegnato che tutto è rimasto lo stesso.
‫Ok, d'ora in poi in tutto il resto dei codici di
‫questo
‫corso, userò sempre questo file di configurazione di PrettierRC con
‫il salvataggio automatico su true.
‫Va bene.
‫Un'altra cosa che
‫non ho menzionato è che inserisce automaticamente i punti e
‫virgola, quindi se vado avanti e cancello
‫questo, e questo e questo.
‫Dagli un salvataggio.
‫Vedi che sono tornati.
‫Va bene?
‫Ora, se vuoi avere
‫una panoramica di tutte le cose che puoi configurare
‫con Prettier, beh, è molto semplice se scriviamo Prettier in Google.
‫Quindi si posizionano come formattatori di codice supponenti.
‫E come ti
‫ho detto prima e quaggiù abbiamo le opzioni
‫che possiamo effettivamente configurare.
‫Quindi larghezza di stampa.
‫La larghezza della scheda.
‫Quindi, se sei una di queste persone che usa quattro
‫larghezze, che in realtà ero fino a poco tempo fa,
‫tipo un anno fa.
‫Bene, allora puoi configurarlo usando la larghezza della scheda, quindi
‫hai ad esempio le virgolette che abbiamo appena cambiato.
‫Quindi una citazione singola lo mettiamo in vero e hai tutti
‫i tipi di cose.
‫Puoi effettivamente vederlo qui sul lato destro, ok?
‫Ma ancora una volta, non c'è molta configurazione.
‫Quindi la maggior parte delle cose non puoi davvero cambiare.
‫Un'altra cosa che possiamo sperimentare è la larghezza della scheda.
‫Quindi vediamo questo, penso che il valore predefinito sia 80.
‫Impostiamolo a qualcosa come 120.
‫E ho
‫pensato che questo avrebbe cambiato questo pezzo di codice qui, quindi
‫tornando a quello che avevamo prima,
‫tutto in una riga.
‫Solo per mostrarti.
‫Ma forse la nostra linea è in realtà anche più lunga di così.
‫Quindi mettiamo qualcosa di veramente ridicolo qui come 200
‫e whoa!
‫Cosa sta succedendo qui?
‫Ah oh! Quindi vedi che in realtà ora
‫è cambiato in qualcosa di ancora più strano.
‫Ok, quindi non ho mai fatto solo una specie di esperimento.
‫Rimettilo a 120 e cosa
‫sta succedendo qui?
‫Fammi risolvere rapidamente questo problema.
‫E lo fa di nuovo, va bene.
‫Riportalo a 80 come
‫lo avevamo e ora sembra così.
‫O
‫si!
‫Oh mi dispiace.
‫Non è quello che volevo fare.
‫Ovviamente non volevo cambiare la larghezza della scheda
‫quando il mio valore predefinito è due.
‫Volevo cambiare la larghezza di stampa.
‫Quindi fondamentalmente quanto può essere larga una linea.
‫Oh, è stato davvero stupido.
‫Quindi ora è tornato alla normalità perché il valore predefinito è due.
‫Quindi sì, ora puoi vedere che in realtà
‫è tornato in una riga qui perché a questo punto siamo alla
‫colonna 96.
‫Come vedi qui sotto, il limite è 120.
‫E quindi non ha dovuto avvolgere questa riga
‫di codice nella seconda.
‫Va bene?
‫Ma in realtà mi piace questo limite di
‫80 e quindi lo rimetterò
‫qui e lo userò in futuro.
‫Quindi ho regolato l'impostazione predefinita, quindi lascia che me ne sbarazzi.
‫Dagli un salvataggio.
‫E così siamo tornati come prima.
‫Quindi, se pensi che
‫ti piaccia, per favore vai avanti e usalo proprio come faccio io.
‫Ma se no, beh, allora ignora tutto quello che ho
‫detto in questo video
‫e continua a fare nel modo più normale.
‫Quindi anche questo non è un problema.