1
00:00:01,270 --> 00:00:05,030
‫-: Entonces, esta sección y el proyecto del formulario de

2
00:00:05,030 --> 00:00:07,030
‫nodo ahora están básicamente

3
00:00:07,030 --> 00:00:09,340
‫completados, pero en este video quería

4
00:00:09,340 --> 00:00:11,860
‫repasar muy rápidamente la configuración de mi

5
00:00:11,860 --> 00:00:15,683
‫código VS y también, junto con usted, configurar la extensión Prettier.

6
00:00:17,320 --> 00:00:20,960
‫Y estas son las extensiones que he instalado en

7
00:00:20,960 --> 00:00:24,230
‫mi código VS y no todas van a

8
00:00:24,230 --> 00:00:25,540
‫ser relevantes

9
00:00:25,540 --> 00:00:28,060
‫para este curso, pero siempre que

10
00:00:28,060 --> 00:00:31,600
‫haya una extensión relevante la mencionaré cuando sea útil.

11
00:00:31,600 --> 00:00:35,180
‫Por ejemplo esto. La extensión env aquí será

12
00:00:35,180 --> 00:00:39,520
‫útil para resaltar las variables ambientales en a. n archivo.

13
00:00:39,520 --> 00:00:42,560
‫Así que repasemos rápidamente algunos de ellos.

14
00:00:42,560 --> 00:00:46,310
‫Por ejemplo, ESLint es útil para encontrar errores en nuestro código y, de

15
00:00:46,310 --> 00:00:49,320
‫hecho, vamos a configurar ESLint con el nodo un poco

16
00:00:49,320 --> 00:00:51,163
‫más adelante en otra sección.

17
00:00:52,460 --> 00:00:54,830
‫Tenemos una vista previa de imágenes, que es una pequeña

18
00:00:54,830 --> 00:00:57,250
‫extensión muy agradable para obtener una vista previa de las imágenes.

19
00:00:57,250 --> 00:01:01,510
‫Y quizás hayas notado que cuando estábamos haciendo esto, por ejemplo,

20
00:01:01,510 --> 00:01:02,373
‫la muestra

21
00:01:03,210 --> 00:01:06,510
‫aquí ves que aquí en el lado izquierdo

22
00:01:06,510 --> 00:01:10,140
‫muestra todas las imágenes que incluimos en un sitio web.

23
00:01:10,140 --> 00:01:12,123
‫Entonces en este ejemplo es este.

24
00:01:13,850 --> 00:01:18,170
‫Muy bien, solo algo pequeño que encontré muy útil.

25
00:01:18,170 --> 00:01:20,150
‫¿Qué más tenemos aquí?

26
00:01:20,150 --> 00:01:22,550
‫Tenemos Prettier y este es

27
00:01:22,550 --> 00:01:25,400
‫el que quiero configurar contigo en este

28
00:01:25,400 --> 00:01:27,760
‫video, pero por ahora repasemos

29
00:01:27,760 --> 00:01:28,930
‫otro aquí.

30
00:01:28,930 --> 00:01:32,400
‫Entonces, Pug es un lenguaje que usaremos más adelante

31
00:01:32,400 --> 00:01:33,860
‫para crear plantillas,

32
00:01:33,860 --> 00:01:36,620
‫por lo que es útil tener esta

33
00:01:36,620 --> 00:01:39,090
‫extensión de embellecimiento para esa también.

34
00:01:39,090 --> 00:01:43,680
‫Luego también tengo TabNine, que a veces hace

35
00:01:43,680 --> 00:01:46,010
‫un buen autocompletador mágico.

36
00:01:46,010 --> 00:01:48,150
‫Luego también tengo TODO Highlight,

37
00:01:48,150 --> 00:01:50,060
‫que es muy útil para

38
00:01:50,060 --> 00:01:51,510
‫hacer este tipo de

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

40
00:01:52,870 --> 00:01:54,320
‫Por ejemplo cuando

41
00:01:55,300 --> 00:01:57,970
‫tengo TODO, lo resaltará en este color

42
00:01:57,970 --> 00:01:59,810
‫verde o si escribo BUG

43
00:01:59,810 --> 00:02:01,410
‫así se pondrá rojo

44
00:02:01,410 --> 00:02:03,010
‫o FIXME y tengo

45
00:02:03,010 --> 00:02:05,900
‫todo tipo de estas palabras clave aquí que

46
00:02:05,900 --> 00:02:07,680
‫tengo que buscar los diferentes

47
00:02:07,680 --> 00:02:10,140
‫colores para hacerlas visibles en mi código.

48
00:02:10,140 --> 00:02:13,120
‫E incluso aparece aquí en esta

49
00:02:13,120 --> 00:02:14,690
‫barra de desplazamiento.

50
00:02:14,690 --> 00:02:16,310
‫Si tuviera estos en

51
00:02:16,310 --> 00:02:18,660
‫diferentes líneas, entonces vería que los tres

52
00:02:18,660 --> 00:02:20,570
‫colores están ahora aquí en este

53
00:02:20,570 --> 00:02:22,613
‫lado y esto es increíblemente útil.

54
00:02:24,950 --> 00:02:25,940
‫Está bien.

55
00:02:25,940 --> 00:02:27,530
‫Y luego, por supuesto,

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

57
00:02:28,970 --> 00:02:30,790
‫código VS, que es Oceanic

58
00:02:30,790 --> 00:02:33,070
‫Next, así que recibo esta pregunta todo

59
00:02:33,070 --> 00:02:35,350
‫el tiempo y, en lugar de

60
00:02:35,350 --> 00:02:38,100
‫preguntarla bien, aquí está la respuesta para eso.

61
00:02:38,100 --> 00:02:39,180
‫Está bien.

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

63
00:02:40,160 --> 00:02:42,690
‫ahora, ¿dónde está?

64
00:02:42,690 --> 00:02:44,500
‫Así que más bonita, esta

65
00:02:44,500 --> 00:02:46,860
‫es una extensión muy agradable que

66
00:02:46,860 --> 00:02:48,840
‫puede formatear el código automáticamente,

67
00:02:48,840 --> 00:02:50,390
‫sin importar si es

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

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

70
00:02:53,170 --> 00:02:55,810
‫Con esta extensión ya no tenemos que

71
00:02:55,810 --> 00:02:57,380
‫preocuparnos por el formato.

72
00:02:57,380 --> 00:02:59,690
‫Y en realidad es muy

73
00:02:59,690 --> 00:03:02,140
‫obstinado, por lo que sigue un conjunto

74
00:03:02,140 --> 00:03:05,840
‫de reglas muy estricto con solo una pequeña configuración posible.

75
00:03:05,840 --> 00:03:08,210
‫Pero en este caso de formateo de

76
00:03:08,210 --> 00:03:10,720
‫código, en realidad es muy bueno cuando alguien

77
00:03:10,720 --> 00:03:13,030
‫más toma estas decisiones por usted.

78
00:03:13,030 --> 00:03:17,150
‫Así que esa es una cosa menos de la que tenemos que preocuparnos.

79
00:03:17,150 --> 00:03:19,410
‫De acuerdo, nuestro código se

80
00:03:19,410 --> 00:03:21,910
‫formateará automáticamente sin que tengamos que hacer

81
00:03:21,910 --> 00:03:24,373
‫nada o preocuparnos por un estilo determinado.

82
00:03:25,480 --> 00:03:26,313
‫¿Okey?

83
00:03:26,313 --> 00:03:27,530
‫Entonces, si

84
00:03:27,530 --> 00:03:30,450
‫desea probarlo, continúe e instálelo ahora aquí.

85
00:03:30,450 --> 00:03:33,150
‫Probablemente tengas un botón de instalación.

86
00:03:33,150 --> 00:03:36,480
‫Yo, por supuesto, ya lo tengo instalado.

87
00:03:36,480 --> 00:03:39,730
‫A continuación, lo que debe hacer para obtener todo el

88
00:03:39,730 --> 00:03:41,020
‫poder de esta

89
00:03:41,020 --> 00:03:42,930
‫extensión es ir a su configuración

90
00:03:42,930 --> 00:03:45,003
‫y luego activar Formatear al guardar.

91
00:03:46,170 --> 00:03:47,390
‫Así que

92
00:03:47,390 --> 00:03:51,010
‫busque el formato y luego Formatee en Guardar.

93
00:03:51,010 --> 00:03:53,780
‫Entonces, cada vez que guardemos un

94
00:03:53,780 --> 00:03:57,600
‫archivo ahora, automáticamente usará Prettier para formatear nuestro código.

95
00:03:57,600 --> 00:03:59,250
‫Así que instalamos Prettier.

96
00:03:59,250 --> 00:04:01,200
‫Activamos Formatear en Guardar.

97
00:04:01,200 --> 00:04:04,040
‫Y ahora podemos configurar un poco más Prettier.

98
00:04:04,040 --> 00:04:04,873
‫Una vez

99
00:04:04,873 --> 00:04:06,920
‫más, como mencioné, es muy obstinado.

100
00:04:06,920 --> 00:04:09,490
‫Así que no hay muchas cosas que

101
00:04:09,490 --> 00:04:12,310
‫podamos cambiar, pero algunas cosas sí podemos cambiar.

102
00:04:12,310 --> 00:04:14,303
‫Ahora podríamos hacer eso aquí,

103
00:04:15,500 --> 00:04:17,330
‫directamente en el código

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

105
00:04:18,300 --> 00:04:22,760
‫lo que también podemos hacer es definir un archivo de configuración.

106
00:04:22,760 --> 00:04:23,593
‫¿Okey?

107
00:04:23,593 --> 00:04:26,460
‫Y me parece que es mejor hacerlo.

108
00:04:26,460 --> 00:04:30,400
‫Entonces, en lugar de usar el código VS para definir

109
00:04:30,400 --> 00:04:33,000
‫la configuración, podemos usar una configuración

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

111
00:04:36,040 --> 00:04:37,970
‫que se llama Prettier RC.

112
00:04:37,970 --> 00:04:41,021
‫Muy bien, tiene un punto y luego un

113
00:04:41,021 --> 00:04:42,570
‫rc más bonito.

114
00:04:42,570 --> 00:04:44,740
‫Luego abrimos las llaves

115
00:04:44,740 --> 00:04:47,770
‫y luego aquí podemos definir algunas configuraciones.

116
00:04:47,770 --> 00:04:50,250
‫Y me parece mejor hacerlo así porque

117
00:04:50,250 --> 00:04:52,240
‫entonces puedo cambiar configuraciones

118
00:04:52,240 --> 00:04:54,290
‫de un proyecto a otro.

119
00:04:54,290 --> 00:04:55,540
‫Y lo

120
00:04:55,540 --> 00:04:58,070
‫que es más importante, facilita que

121
00:04:58,070 --> 00:05:02,000
‫varios desarrolladores del mismo equipo utilicen la misma configuración.

122
00:05:02,000 --> 00:05:05,610
‫De acuerdo, eso puede ser muy útil para los equipos.

123
00:05:05,610 --> 00:05:09,220
‫Incluso más útil que cuando solo trabaja por su cuenta.

124
00:05:09,220 --> 00:05:12,490
‫Ahora, la única configuración que realmente quiero cambiar aquí

125
00:05:12,490 --> 00:05:14,003
‫se llama comillas simples.

126
00:05:16,120 --> 00:05:19,350
‫Entonces, en realidad, Prettier ya tiene esta función

127
00:05:19,350 --> 00:05:23,220
‫de autocompletar incorporada y, por lo tanto, sabe que simple

128
00:05:23,220 --> 00:05:24,653
‫significará comillas simples.

129
00:05:25,530 --> 00:05:28,490
‫Y el valor predeterminado es falso, pero quiero establecerlo en verdadero.

130
00:05:28,490 --> 00:05:31,720
‫Entonces, lo que va a hacer es que todas

131
00:05:31,720 --> 00:05:35,360
‫mis comillas cambiarán de comillas dobles a comillas simples, ¿de acuerdo?

132
00:05:35,360 --> 00:05:37,750
‫Así que lo guardé y aquí

133
00:05:37,750 --> 00:05:40,550
‫está nuestro índice. js.

134
00:05:40,550 --> 00:05:45,330
‫Y ahora veamos si hay comillas dobles aquí y creo que no lo

135
00:05:45,330 --> 00:05:46,600
‫son porque de

136
00:05:46,600 --> 00:05:50,710
‫todos modos usé las comillas simples de manera bastante consistente.

137
00:05:50,710 --> 00:05:55,110
‫Pero pongamos algunas comillas dobles en algún lugar aquí y ahora lo

138
00:05:56,030 --> 00:05:57,670
‫guardaré y echaré

139
00:05:57,670 --> 00:05:59,750
‫un vistazo a lo que sucede.

140
00:05:59,750 --> 00:06:00,583
‫¡Vaya!

141
00:06:00,583 --> 00:06:04,500
‫Primero que nada, vieron que muchas cosas cambiaron aquí

142
00:06:04,500 --> 00:06:07,870
‫y nuestro código saltó por aquí,

143
00:06:07,870 --> 00:06:12,100
‫pero aquí es donde tenía las comillas simples aquí.

144
00:06:12,100 --> 00:06:15,063
‫Entonces ves que vuelven a ser las comillas dobles.

145
00:06:16,210 --> 00:06:18,640
‫Ahora, todo este código saltando probablemente se

146
00:06:18,640 --> 00:06:21,490
‫debió a que en algún momento tuve varias líneas.

147
00:06:21,490 --> 00:06:23,430
‫Y Prettier no lo permite.

148
00:06:23,430 --> 00:06:26,760
‫Entonces, si tengo algo como esto y

149
00:06:26,760 --> 00:06:30,450
‫lo guardo, Prettier solo permitirá una línea en blanco.

150
00:06:30,450 --> 00:06:34,030
‫Y de hecho, este fue para mí el cambio más difícil

151
00:06:34,030 --> 00:06:36,760
‫de todos los formatos que hace Prettier.

152
00:06:36,760 --> 00:06:38,310
‫Y no es configurable,

153
00:06:38,310 --> 00:06:40,600
‫por lo que no podemos cambiar eso, lamentablemente.

154
00:06:40,600 --> 00:06:43,010
‫Porque a veces me gusta tener varias líneas, pero

155
00:06:43,010 --> 00:06:45,020
‫con Prettier eso no es posible.

156
00:06:45,020 --> 00:06:47,550
‫Puedo hacer algo como esto y

157
00:06:47,550 --> 00:06:50,190
‫luego funcionará, pero es solo una solución.

158
00:06:50,190 --> 00:06:54,160
‫Pero aún con este problema, realmente prefiero usar Prettier.

159
00:06:54,160 --> 00:06:57,420
‫Nuevamente porque le quita la idea de

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

161
00:06:59,500 --> 00:07:03,120
‫Por ejemplo, otra cosa que hice aquí fue esto.

162
00:07:03,120 --> 00:07:05,980
‫Entonces, siempre que se exceda un cierto número

163
00:07:05,980 --> 00:07:07,130
‫de caracteres en

164
00:07:07,130 --> 00:07:10,080
‫una línea, encontrará una buena manera de dividir el

165
00:07:10,080 --> 00:07:11,600
‫código en varias líneas.

166
00:07:11,600 --> 00:07:13,890
‫Y eso es lo que hizo aquí.

167
00:07:13,890 --> 00:07:15,773
‫Veamos qué más tenemos aquí.

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

169
00:07:17,960 --> 00:07:21,390
‫creo que tal vez, además de este

170
00:07:21,390 --> 00:07:24,270
‫cambio, enseñamos que todo sigue igual.

171
00:07:24,270 --> 00:07:28,400
‫De acuerdo, de ahora en adelante, en el resto de los

172
00:07:28,400 --> 00:07:29,233
‫códigos

173
00:07:29,233 --> 00:07:33,360
‫de este curso, siempre usaré este archivo de configuración de PrettierRC

174
00:07:33,360 --> 00:07:35,333
‫con guardado automático en verdadero.

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

176
00:07:38,290 --> 00:07:39,663
‫Otra cosa que

177
00:07:39,663 --> 00:07:42,820
‫no mencioné es que pone automáticamente el punto y coma,

178
00:07:42,820 --> 00:07:45,090
‫así que si sigo adelante y elimino

179
00:07:45,090 --> 00:07:46,940
‫este, y este, y este.

180
00:07:46,940 --> 00:07:48,180
‫Dale una oportunidad.

181
00:07:48,180 --> 00:07:50,020
‫Ves que han vuelto.

182
00:07:50,020 --> 00:07:50,853
‫¿Está bien?

183
00:07:51,700 --> 00:07:53,170
‫Ahora, si desea obtener

184
00:07:53,170 --> 00:07:55,993
‫una descripción general de todas las cosas que puede configurar

185
00:07:57,030 --> 00:08:00,623
‫con Prettier, bueno, eso es muy simple si escribimos Prettier en Google.

186
00:08:05,720 --> 00:08:09,780
‫Así que se posicionan como formateadores de código obstinados.

187
00:08:09,780 --> 00:08:11,080
‫Y como les

188
00:08:12,000 --> 00:08:15,300
‫dije antes y aquí abajo tenemos las opciones

189
00:08:15,300 --> 00:08:16,923
‫que realmente podemos configurar.

190
00:08:18,340 --> 00:08:19,900
‫Así que imprime el ancho.

191
00:08:19,900 --> 00:08:20,950
‫El ancho de la pestaña.

192
00:08:20,950 --> 00:08:24,300
‫Entonces, si eres una de estas personas que usa cuatro

193
00:08:24,300 --> 00:08:27,630
‫anchos, lo que yo era hasta hace poco, como

194
00:08:27,630 --> 00:08:29,130
‫hace un año.

195
00:08:29,130 --> 00:08:32,960
‫Bueno, entonces puede configurar eso usando el ancho de la pestaña,

196
00:08:32,960 --> 00:08:36,600
‫entonces tiene, por ejemplo, las comillas que acabamos de cambiar.

197
00:08:36,600 --> 00:08:39,850
‫Así que, entre comillas simples, lo hacemos realidad y tienes

198
00:08:39,850 --> 00:08:41,440
‫todo tipo de cosas.

199
00:08:41,440 --> 00:08:44,400
‫De hecho, puedes verlo aquí en el lado derecho, ¿de acuerdo?

200
00:08:44,400 --> 00:08:47,000
‫Pero de nuevo, no es mucha configuración.

201
00:08:47,000 --> 00:08:50,273
‫Así que la mayoría de las cosas no se pueden cambiar.

202
00:08:51,260 --> 00:08:55,890
‫Otra cosa con la que podemos experimentar es el ancho de la pestaña.

203
00:08:55,890 --> 00:09:00,773
‫Así que veamos este, creo que el valor predeterminado es 80.

204
00:09:04,040 --> 00:09:06,693
‫Pongámoslo en algo así como 120.

205
00:09:09,560 --> 00:09:10,393
‫Y pensé

206
00:09:10,393 --> 00:09:13,920
‫que esto cambiaría este fragmento de código aquí, volviendo a

207
00:09:13,920 --> 00:09:15,950
‫lo que teníamos antes, todo

208
00:09:15,950 --> 00:09:17,180
‫en una línea.

209
00:09:17,180 --> 00:09:18,203
‫Solo para mostrarte.

210
00:09:19,100 --> 00:09:21,880
‫Pero tal vez nuestra línea sea incluso más larga que eso.

211
00:09:21,880 --> 00:09:25,460
‫Así que pongamos algo realmente ridículo aquí como 200

212
00:09:26,520 --> 00:09:27,460
‫y ¡guau!

213
00:09:27,460 --> 00:09:28,560
‫¿Que esta pasando aqui?

214
00:09:30,880 --> 00:09:34,650
‫¡Ah ho! Entonces ves que en realidad ahora

215
00:09:34,650 --> 00:09:36,840
‫se ha cambiado a algo aún más extraño.

216
00:09:36,840 --> 00:09:39,323
‫De acuerdo, nunca hice una especie de experimento.

217
00:09:40,820 --> 00:09:42,950
‫Vuelva a ponerlo en 120 y

218
00:09:42,950 --> 00:09:44,463
‫¿qué está pasando aquí?

219
00:09:51,370 --> 00:09:52,923
‫Déjame arreglar esto rápidamente.

220
00:09:54,430 --> 00:09:56,800
‫Y lo vuelve a hacer, de acuerdo.

221
00:09:56,800 --> 00:09:58,530
‫Póngalo de nuevo a 80

222
00:10:00,310 --> 00:10:02,420
‫como lo teníamos y ahora se ve así.

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

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

225
00:10:04,086 --> 00:10:04,919
‫Oh lo siento.

226
00:10:06,420 --> 00:10:07,740
‫Eso no es lo que quería hacer.

227
00:10:07,740 --> 00:10:10,133
‫Por supuesto, no quería cambiar el ancho de la

228
00:10:10,133 --> 00:10:12,430
‫pestaña cuando mi valor predeterminado es dos.

229
00:10:12,430 --> 00:10:14,513
‫Quería cambiar el ancho de impresión.

230
00:10:15,690 --> 00:10:19,310
‫Entonces, básicamente, qué tan ancha puede ser una línea.

231
00:10:19,310 --> 00:10:21,283
‫Oh, eso fue realmente estúpido.

232
00:10:25,440 --> 00:10:28,883
‫Así que ahora ha vuelto a la normalidad porque el valor predeterminado es dos.

233
00:10:31,220 --> 00:10:34,120
‫Así que sí, ahora puede ver que en realidad volvió

234
00:10:34,120 --> 00:10:38,490
‫a estar en una línea aquí porque en este punto aquí estamos en la

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

236
00:10:39,410 --> 00:10:42,870
‫Como ve aquí abajo, el límite es 120.

237
00:10:42,870 --> 00:10:46,440
‫Y así no tuvo que envolver esta línea de

238
00:10:46,440 --> 00:10:48,240
‫código en la segunda.

239
00:10:48,240 --> 00:10:49,073
‫¿Okey?

240
00:10:49,073 --> 00:10:52,010
‫Pero en realidad me gusta este límite de 80,

241
00:10:52,010 --> 00:10:54,060
‫así que lo volveré a poner

242
00:10:54,060 --> 00:10:56,320
‫aquí y lo usaré en el futuro.

243
00:10:56,320 --> 00:10:59,493
‫Así que ajusté el valor predeterminado, así que déjame deshacerme de él.

244
00:11:00,870 --> 00:11:02,880
‫Dale una oportunidad.

245
00:11:02,880 --> 00:11:06,230
‫Y así volvemos a ser como antes.

246
00:11:06,230 --> 00:11:07,780
‫Entonces, si crees

247
00:11:07,780 --> 00:11:11,550
‫que te gusta esto, adelante y úsalo como yo.

248
00:11:11,550 --> 00:11:14,930
‫Pero si no, bueno, simplemente ignora todo lo que dije

249
00:11:14,930 --> 00:11:16,590
‫en este video y

250
00:11:16,590 --> 00:11:19,260
‫sigue haciéndolo de la manera más normal.

251
00:11:19,260 --> 00:11:20,943
‫Así que tampoco hay problema.