1
00:00:01,270 --> 00:00:05,030
‫-: Quindi questa sezione e il progetto del modulo del

2
00:00:05,030 --> 00:00:07,030
‫nodo sono ora sostanzialmente

3
00:00:07,030 --> 00:00:09,340
‫completati, ma in questo video volevo

4
00:00:09,340 --> 00:00:11,860
‫esaminare molto rapidamente la configurazione del mio

5
00:00:11,860 --> 00:00:15,683
‫codice VS e anche insieme a te impostare l'estensione Prettier.

6
00:00:17,320 --> 00:00:20,960
‫E quindi queste sono le estensioni che ho installato

7
00:00:20,960 --> 00:00:24,230
‫nel mio codice VS e non tutte saranno

8
00:00:24,230 --> 00:00:25,540
‫rilevanti per

9
00:00:25,540 --> 00:00:28,060
‫questo corso, ma ogni volta che

10
00:00:28,060 --> 00:00:31,600
‫c'è un'estensione rilevante la menzionerò quando sarà utile.

11
00:00:31,600 --> 00:00:35,180
‫Ad esempio questo. env qui sarà utile per

12
00:00:35,180 --> 00:00:39,520
‫evidenziare le variabili ambientali in un file . n file.

13
00:00:39,520 --> 00:00:42,560
‫Quindi esaminiamo rapidamente alcuni di essi.

14
00:00:42,560 --> 00:00:46,310
‫Ad esempio ESLint è utile per trovare bug nel nostro codice

15
00:00:46,310 --> 00:00:49,320
‫e in realtà configureremo ESLint con node un po'

16
00:00:49,320 --> 00:00:51,163
‫più avanti in un'altra sezione.

17
00:00:52,460 --> 00:00:54,830
‫Abbiamo l'anteprima delle immagini che è una piccola

18
00:00:54,830 --> 00:00:57,250
‫estensione molto carina per visualizzare in anteprima le immagini.

19
00:00:57,250 --> 00:01:01,510
‫E forse hai notato che quando stavamo facendo questo, ad esempio,

20
00:01:01,510 --> 00:01:02,373
‫l'esempio

21
00:01:03,210 --> 00:01:06,510
‫qui vedi che qui sul lato sinistro mostra

22
00:01:06,510 --> 00:01:10,140
‫tutte le immagini che includiamo in un sito web.

23
00:01:10,140 --> 00:01:12,123
‫Quindi in questo esempio è questo.

24
00:01:13,850 --> 00:01:18,170
‫Va bene, quindi solo qualcosa di piccolo che ho trovato molto utile.

25
00:01:18,170 --> 00:01:20,150
‫Cos'altro abbiamo qui?

26
00:01:20,150 --> 00:01:22,550
‫Abbiamo Prettier e quindi questo è

27
00:01:22,550 --> 00:01:25,400
‫quello che voglio configurare con te in questo

28
00:01:25,400 --> 00:01:27,760
‫video, ma per ora esaminiamone qualcun

29
00:01:27,760 --> 00:01:28,930
‫altro qui.

30
00:01:28,930 --> 00:01:32,400
‫Quindi Pug è un linguaggio che useremo in seguito

31
00:01:32,400 --> 00:01:33,860
‫per costruire

32
00:01:33,860 --> 00:01:36,620
‫modelli e quindi è utile avere questa

33
00:01:36,620 --> 00:01:39,090
‫estensione di abbellimento anche per quello.

34
00:01:39,090 --> 00:01:43,680
‫Poi ho anche TabNine, che a volte fa qualche

35
00:01:43,680 --> 00:01:46,010
‫bel completamento automatico magico.

36
00:01:46,010 --> 00:01:48,150
‫Poi ho anche TODO Highlight,

37
00:01:48,150 --> 00:01:50,060
‫che è molto utile per

38
00:01:50,060 --> 00:01:51,510
‫fare questo tipo di

39
00:01:51,510 --> 00:01:52,870
‫magia qui.

40
00:01:52,870 --> 00:01:54,320
‫Ad esempio quando

41
00:01:55,300 --> 00:01:57,970
‫ho TODO, lo evidenzierà in questo colore verde

42
00:01:57,970 --> 00:01:59,810
‫o se scrivo BUG in

43
00:01:59,810 --> 00:02:01,410
‫questo modo diventerà rosso

44
00:02:01,410 --> 00:02:03,010
‫o FIXME e ho

45
00:02:03,010 --> 00:02:05,900
‫tutti i tipi di queste parole chiave qui

46
00:02:05,900 --> 00:02:07,680
‫che devo trovare i diversi

47
00:02:07,680 --> 00:02:10,140
‫colori per renderle visibili nel mio codice

48
00:02:10,140 --> 00:02:13,120
‫E compare anche qui in questa

49
00:02:13,120 --> 00:02:14,690
‫barra di scorrimento.

50
00:02:14,690 --> 00:02:16,310
‫Se li avessi in

51
00:02:16,310 --> 00:02:18,660
‫linee diverse, vedresti che i tre colori

52
00:02:18,660 --> 00:02:20,570
‫sono ora qui da questa

53
00:02:20,570 --> 00:02:22,613
‫parte e questo è incredibilmente utile.

54
00:02:24,950 --> 00:02:25,940
‫Va bene.

55
00:02:25,940 --> 00:02:27,530
‫E poi ovviamente il

56
00:02:27,530 --> 00:02:28,970
‫tema del

57
00:02:28,970 --> 00:02:30,790
‫mio codice VS, che è

58
00:02:30,790 --> 00:02:33,070
‫Oceanic Next, quindi ricevo questa domanda

59
00:02:33,070 --> 00:02:35,350
‫tutto il tempo e quindi invece

60
00:02:35,350 --> 00:02:38,100
‫di chiederlo bene ecco la risposta per questo.

61
00:02:38,100 --> 00:02:39,180
‫Va bene.

62
00:02:39,180 --> 00:02:40,160
‫Ma

63
00:02:40,160 --> 00:02:42,690
‫ora dove si trova?

64
00:02:42,690 --> 00:02:44,500
‫Quindi più bella questa

65
00:02:44,500 --> 00:02:46,860
‫è un'estensione molto bella che può

66
00:02:46,860 --> 00:02:48,840
‫formattare automaticamente il codice, non

67
00:02:48,840 --> 00:02:50,390
‫importa se JavaScript

68
00:02:50,390 --> 00:02:51,860
‫o CSS o

69
00:02:51,860 --> 00:02:53,170
‫persino HTML.

70
00:02:53,170 --> 00:02:55,810
‫Con questa estensione non dobbiamo più

71
00:02:55,810 --> 00:02:57,380
‫preoccuparci della formattazione.

72
00:02:57,380 --> 00:02:59,690
‫Ed è in realtà molto

73
00:02:59,690 --> 00:03:02,140
‫supponente, quindi segue una serie di

74
00:03:02,140 --> 00:03:05,840
‫regole molto rigide con solo una piccola configurazione possibile.

75
00:03:05,840 --> 00:03:08,210
‫Ma in questo caso di formattazione del

76
00:03:08,210 --> 00:03:10,720
‫codice, in realtà è molto bello quando qualcun

77
00:03:10,720 --> 00:03:13,030
‫altro prende queste decisioni per te.

78
00:03:13,030 --> 00:03:17,150
‫Quindi questa è una cosa in meno di cui dobbiamo preoccuparci.

79
00:03:17,150 --> 00:03:19,410
‫Ok, quindi il nostro codice si

80
00:03:19,410 --> 00:03:21,910
‫formatterà automaticamente senza che noi dobbiamo fare

81
00:03:21,910 --> 00:03:24,373
‫nulla o preoccuparci di un certo stile.

82
00:03:25,480 --> 00:03:26,313
‫Va bene?

83
00:03:26,313 --> 00:03:27,530
‫Quindi, se

84
00:03:27,530 --> 00:03:30,450
‫vuoi provarlo, vai avanti e installalo ora qui.

85
00:03:30,450 --> 00:03:33,150
‫Probabilmente hai un pulsante di installazione.

86
00:03:33,150 --> 00:03:36,480
‫Io, ovviamente, l'ho già installato.

87
00:03:36,480 --> 00:03:39,730
‫Successivamente, ciò che devi fare per ottenere tutta la potenza

88
00:03:39,730 --> 00:03:41,020
‫di questa estensione

89
00:03:41,020 --> 00:03:42,930
‫è andare alle tue impostazioni

90
00:03:42,930 --> 00:03:45,003
‫e quindi attivare Formatta al salvataggio.

91
00:03:46,170 --> 00:03:47,390
‫Quindi cerca

92
00:03:47,390 --> 00:03:51,010
‫il formato e poi Formatta su Salva.

93
00:03:51,010 --> 00:03:53,780
‫Quindi, ogni volta che salviamo un

94
00:03:53,780 --> 00:03:57,600
‫file ora, utilizzerà automaticamente Prettier per formattare il nostro codice.

95
00:03:57,600 --> 00:03:59,250
‫Così abbiamo installato Prettyer.

96
00:03:59,250 --> 00:04:01,200
‫Abbiamo abilitato la formattazione al salvataggio.

97
00:04:01,200 --> 00:04:04,040
‫E ora possiamo configurare un po' Pretty.

98
00:04:04,040 --> 00:04:04,873
‫Ancora una

99
00:04:04,873 --> 00:04:06,920
‫volta, come ho detto, è molto supponente.

100
00:04:06,920 --> 00:04:09,490
‫Quindi non ci sono molte cose che

101
00:04:09,490 --> 00:04:12,310
‫possiamo cambiare, ma alcune cose che possiamo davvero cambiare.

102
00:04:12,310 --> 00:04:14,303
‫Ora potremmo farlo qui, proprio

103
00:04:15,500 --> 00:04:17,330
‫nel codice VS, ma

104
00:04:17,330 --> 00:04:18,300
‫invece

105
00:04:18,300 --> 00:04:22,760
‫quello che possiamo anche fare è definire un file di configurazione.

106
00:04:22,760 --> 00:04:23,593
‫Va bene?

107
00:04:23,593 --> 00:04:26,460
‫E trovo che in realtà sia meglio farlo.

108
00:04:26,460 --> 00:04:30,400
‫Quindi, invece di usare il codice VS per definire le

109
00:04:30,400 --> 00:04:33,000
‫impostazioni, possiamo usare una configurazione più

110
00:04:33,000 --> 00:04:33,833
‫carina,

111
00:04:36,040 --> 00:04:37,970
‫che si chiama Prettier RC.

112
00:04:37,970 --> 00:04:41,021
‫Va bene, quindi ha un punto e poi

113
00:04:41,021 --> 00:04:42,570
‫un rc più carino.

114
00:04:42,570 --> 00:04:44,740
‫Quindi apriamo le parentesi graffe

115
00:04:44,740 --> 00:04:47,770
‫e poi qui possiamo definire alcune impostazioni.

116
00:04:47,770 --> 00:04:50,250
‫E trovo che sia meglio farlo così

117
00:04:50,250 --> 00:04:52,240
‫perché poi posso cambiare

118
00:04:52,240 --> 00:04:54,290
‫le configurazioni da un progetto all'altro.

119
00:04:54,290 --> 00:04:55,540
‫E, cosa

120
00:04:55,540 --> 00:04:58,070
‫ancora più importante, rende più facile per

121
00:04:58,070 --> 00:05:02,000
‫più sviluppatori tutti nello stesso team utilizzare la stessa configurazione.

122
00:05:02,000 --> 00:05:05,610
‫Ok, quindi può essere molto molto utile nelle squadre.

123
00:05:05,610 --> 00:05:09,220
‫Ancora più utile di quando lavori da solo.

124
00:05:09,220 --> 00:05:12,490
‫Ora l'unica impostazione che voglio effettivamente cambiare qui si

125
00:05:12,490 --> 00:05:14,003
‫chiama apice singolo.

126
00:05:16,120 --> 00:05:19,350
‫Quindi in realtà Prettier ha già integrato

127
00:05:19,350 --> 00:05:23,220
‫questo completamento automatico e quindi sa che single significherà

128
00:05:23,220 --> 00:05:24,653
‫singola citazione.

129
00:05:25,530 --> 00:05:28,490
‫E l'impostazione predefinita è false, ma voglio impostarlo su true.

130
00:05:28,490 --> 00:05:31,720
‫E quindi quello che farà è che tutte

131
00:05:31,720 --> 00:05:35,360
‫le mie virgolette cambieranno da virgolette doppie a virgolette singole, ok?

132
00:05:35,360 --> 00:05:37,750
‫Quindi l'ho salvato ed ecco il

133
00:05:37,750 --> 00:05:40,550
‫nostro indice. js.

134
00:05:40,550 --> 00:05:45,330
‫E ora vediamo se ci sono virgolette qui e penso che

135
00:05:45,330 --> 00:05:46,600
‫non lo

136
00:05:46,600 --> 00:05:50,710
‫siano perché ho usato abbastanza costantemente le virgolette singole comunque.

137
00:05:50,710 --> 00:05:55,110
‫Ma mettiamo solo alcune virgolette da qualche parte qui e ora

138
00:05:56,030 --> 00:05:57,670
‫farò un salvataggio

139
00:05:57,670 --> 00:05:59,750
‫e darò un'occhiata a cosa succede.

140
00:05:59,750 --> 00:06:00,583
‫Whoa.

141
00:06:00,583 --> 00:06:04,500
‫Quindi prima di tutto hai visto che molte cose sono

142
00:06:04,500 --> 00:06:07,870
‫cambiate qui e quindi il nostro codice è

143
00:06:07,870 --> 00:06:12,100
‫saltato qui intorno, ma è qui che avevo le virgolette singole.

144
00:06:12,100 --> 00:06:15,063
‫Quindi vedi che tornano ad essere le doppie virgolette.

145
00:06:16,210 --> 00:06:18,640
‫Ora tutto questo codice che saltava era

146
00:06:18,640 --> 00:06:21,490
‫probabilmente perché a un certo punto avevo più righe.

147
00:06:21,490 --> 00:06:23,430
‫E Prettyer non lo permette.

148
00:06:23,430 --> 00:06:26,760
‫Quindi, se ho qualcosa di simile e gli

149
00:06:26,760 --> 00:06:30,450
‫do un salvataggio, Prettier consentirà solo una riga vuota.

150
00:06:30,450 --> 00:06:34,030
‫E in realtà questo è stato per me il cambiamento più

151
00:06:34,030 --> 00:06:36,760
‫difficile di tutta la formattazione che fa Prettier.

152
00:06:36,760 --> 00:06:38,310
‫E non è

153
00:06:38,310 --> 00:06:40,600
‫configurabile, quindi purtroppo non possiamo cambiarlo.

154
00:06:40,600 --> 00:06:43,010
‫Perché a volte mi piace avere più righe, ma

155
00:06:43,010 --> 00:06:45,020
‫con Prettyer questo non è possibile.

156
00:06:45,020 --> 00:06:47,550
‫Posso fare qualcosa del genere e

157
00:06:47,550 --> 00:06:50,190
‫poi funzionerà, ma è solo una soluzione.

158
00:06:50,190 --> 00:06:54,160
‫Ma ancora con questo problema preferisco davvero usare Prettyer.

159
00:06:54,160 --> 00:06:57,420
‫Ancora una volta perché toglie il pensiero alla

160
00:06:57,420 --> 00:06:58,343
‫formattazione.

161
00:06:59,500 --> 00:07:03,120
‫Ad esempio, qualcos'altro che ho fatto qui è stato questo.

162
00:07:03,120 --> 00:07:05,980
‫Quindi, ogni volta che viene superato un certo numero

163
00:07:05,980 --> 00:07:07,130
‫di caratteri in

164
00:07:07,130 --> 00:07:10,080
‫una riga, troverà un buon modo per suddividere il

165
00:07:10,080 --> 00:07:11,600
‫codice in più righe.

166
00:07:11,600 --> 00:07:13,890
‫E quindi è quello che ha fatto qui.

167
00:07:13,890 --> 00:07:15,773
‫Vediamo cos'altro abbiamo qui.

168
00:07:16,900 --> 00:07:17,960
‫Beh, penso

169
00:07:17,960 --> 00:07:21,390
‫che forse, oltre a questo cambiamento, abbiamo semplicemente

170
00:07:21,390 --> 00:07:24,270
‫insegnato che tutto è rimasto lo stesso.

171
00:07:24,270 --> 00:07:28,400
‫Ok, d'ora in poi in tutto il resto dei codici di

172
00:07:28,400 --> 00:07:29,233
‫questo

173
00:07:29,233 --> 00:07:33,360
‫corso, userò sempre questo file di configurazione di PrettierRC con

174
00:07:33,360 --> 00:07:35,333
‫il salvataggio automatico su true.

175
00:07:37,100 --> 00:07:38,290
‫Va bene.

176
00:07:38,290 --> 00:07:39,663
‫Un'altra cosa che

177
00:07:39,663 --> 00:07:42,820
‫non ho menzionato è che inserisce automaticamente i punti e

178
00:07:42,820 --> 00:07:45,090
‫virgola, quindi se vado avanti e cancello

179
00:07:45,090 --> 00:07:46,940
‫questo, e questo e questo.

180
00:07:46,940 --> 00:07:48,180
‫Dagli un salvataggio.

181
00:07:48,180 --> 00:07:50,020
‫Vedi che sono tornati.

182
00:07:50,020 --> 00:07:50,853
‫Va bene?

183
00:07:51,700 --> 00:07:53,170
‫Ora, se vuoi avere

184
00:07:53,170 --> 00:07:55,993
‫una panoramica di tutte le cose che puoi configurare

185
00:07:57,030 --> 00:08:00,623
‫con Prettier, beh, è molto semplice se scriviamo Prettier in Google.

186
00:08:05,720 --> 00:08:09,780
‫Quindi si posizionano come formattatori di codice supponenti.

187
00:08:09,780 --> 00:08:11,080
‫E come ti

188
00:08:12,000 --> 00:08:15,300
‫ho detto prima e quaggiù abbiamo le opzioni

189
00:08:15,300 --> 00:08:16,923
‫che possiamo effettivamente configurare.

190
00:08:18,340 --> 00:08:19,900
‫Quindi larghezza di stampa.

191
00:08:19,900 --> 00:08:20,950
‫La larghezza della scheda.

192
00:08:20,950 --> 00:08:24,300
‫Quindi, se sei una di queste persone che usa quattro

193
00:08:24,300 --> 00:08:27,630
‫larghezze, che in realtà ero fino a poco tempo fa,

194
00:08:27,630 --> 00:08:29,130
‫tipo un anno fa.

195
00:08:29,130 --> 00:08:32,960
‫Bene, allora puoi configurarlo usando la larghezza della scheda, quindi

196
00:08:32,960 --> 00:08:36,600
‫hai ad esempio le virgolette che abbiamo appena cambiato.

197
00:08:36,600 --> 00:08:39,850
‫Quindi una citazione singola lo mettiamo in vero e hai tutti

198
00:08:39,850 --> 00:08:41,440
‫i tipi di cose.

199
00:08:41,440 --> 00:08:44,400
‫Puoi effettivamente vederlo qui sul lato destro, ok?

200
00:08:44,400 --> 00:08:47,000
‫Ma ancora una volta, non c'è molta configurazione.

201
00:08:47,000 --> 00:08:50,273
‫Quindi la maggior parte delle cose non puoi davvero cambiare.

202
00:08:51,260 --> 00:08:55,890
‫Un'altra cosa che possiamo sperimentare è la larghezza della scheda.

203
00:08:55,890 --> 00:09:00,773
‫Quindi vediamo questo, penso che il valore predefinito sia 80.

204
00:09:04,040 --> 00:09:06,693
‫Impostiamolo a qualcosa come 120.

205
00:09:09,560 --> 00:09:10,393
‫E ho

206
00:09:10,393 --> 00:09:13,920
‫pensato che questo avrebbe cambiato questo pezzo di codice qui, quindi

207
00:09:13,920 --> 00:09:15,950
‫tornando a quello che avevamo prima,

208
00:09:15,950 --> 00:09:17,180
‫tutto in una riga.

209
00:09:17,180 --> 00:09:18,203
‫Solo per mostrarti.

210
00:09:19,100 --> 00:09:21,880
‫Ma forse la nostra linea è in realtà anche più lunga di così.

211
00:09:21,880 --> 00:09:25,460
‫Quindi mettiamo qualcosa di veramente ridicolo qui come 200

212
00:09:26,520 --> 00:09:27,460
‫e whoa!

213
00:09:27,460 --> 00:09:28,560
‫Cosa sta succedendo qui?

214
00:09:30,880 --> 00:09:34,650
‫Ah oh! Quindi vedi che in realtà ora

215
00:09:34,650 --> 00:09:36,840
‫è cambiato in qualcosa di ancora più strano.

216
00:09:36,840 --> 00:09:39,323
‫Ok, quindi non ho mai fatto solo una specie di esperimento.

217
00:09:40,820 --> 00:09:42,950
‫Rimettilo a 120 e cosa

218
00:09:42,950 --> 00:09:44,463
‫sta succedendo qui?

219
00:09:51,370 --> 00:09:52,923
‫Fammi risolvere rapidamente questo problema.

220
00:09:54,430 --> 00:09:56,800
‫E lo fa di nuovo, va bene.

221
00:09:56,800 --> 00:09:58,530
‫Riportalo a 80 come

222
00:10:00,310 --> 00:10:02,420
‫lo avevamo e ora sembra così.

223
00:10:02,420 --> 00:10:03,253
‫O

224
00:10:03,253 --> 00:10:04,086
‫si!

225
00:10:04,086 --> 00:10:04,919
‫Oh mi dispiace.

226
00:10:06,420 --> 00:10:07,740
‫Non è quello che volevo fare.

227
00:10:07,740 --> 00:10:10,133
‫Ovviamente non volevo cambiare la larghezza della scheda

228
00:10:10,133 --> 00:10:12,430
‫quando il mio valore predefinito è due.

229
00:10:12,430 --> 00:10:14,513
‫Volevo cambiare la larghezza di stampa.

230
00:10:15,690 --> 00:10:19,310
‫Quindi fondamentalmente quanto può essere larga una linea.

231
00:10:19,310 --> 00:10:21,283
‫Oh, è stato davvero stupido.

232
00:10:25,440 --> 00:10:28,883
‫Quindi ora è tornato alla normalità perché il valore predefinito è due.

233
00:10:31,220 --> 00:10:34,120
‫Quindi sì, ora puoi vedere che in realtà

234
00:10:34,120 --> 00:10:38,490
‫è tornato in una riga qui perché a questo punto siamo alla

235
00:10:38,490 --> 00:10:39,410
‫colonna 96.

236
00:10:39,410 --> 00:10:42,870
‫Come vedi qui sotto, il limite è 120.

237
00:10:42,870 --> 00:10:46,440
‫E quindi non ha dovuto avvolgere questa riga

238
00:10:46,440 --> 00:10:48,240
‫di codice nella seconda.

239
00:10:48,240 --> 00:10:49,073
‫Va bene?

240
00:10:49,073 --> 00:10:52,010
‫Ma in realtà mi piace questo limite di

241
00:10:52,010 --> 00:10:54,060
‫80 e quindi lo rimetterò

242
00:10:54,060 --> 00:10:56,320
‫qui e lo userò in futuro.

243
00:10:56,320 --> 00:10:59,493
‫Quindi ho regolato l'impostazione predefinita, quindi lascia che me ne sbarazzi.

244
00:11:00,870 --> 00:11:02,880
‫Dagli un salvataggio.

245
00:11:02,880 --> 00:11:06,230
‫E così siamo tornati come prima.

246
00:11:06,230 --> 00:11:07,780
‫Quindi, se pensi che

247
00:11:07,780 --> 00:11:11,550
‫ti piaccia, per favore vai avanti e usalo proprio come faccio io.

248
00:11:11,550 --> 00:11:14,930
‫Ma se no, beh, allora ignora tutto quello che ho

249
00:11:14,930 --> 00:11:16,590
‫detto in questo video

250
00:11:16,590 --> 00:11:19,260
‫e continua a fare nel modo più normale.

251
00:11:19,260 --> 00:11:20,943
‫Quindi anche questo non è un problema.