1
00:00:01,270 --> 00:00:05,030
‫-: Portanto, esta seção e o projeto de forma de

2
00:00:05,030 --> 00:00:07,030
‫nó agora estão basicamente

3
00:00:07,030 --> 00:00:09,340
‫concluídos, mas neste vídeo eu queria

4
00:00:09,340 --> 00:00:11,860
‫revisar rapidamente minha configuração de código

5
00:00:11,860 --> 00:00:15,683
‫VS e também junto com você configurar a extensão Prettier.

6
00:00:17,320 --> 00:00:20,960
‫Portanto, essas são as extensões que instalei no meu

7
00:00:20,960 --> 00:00:24,230
‫código do VS e nem todas serão relevantes

8
00:00:24,230 --> 00:00:25,540
‫para este curso,

9
00:00:25,540 --> 00:00:28,060
‫mas sempre que houver uma extensão

10
00:00:28,060 --> 00:00:31,600
‫relevante, irei mencioná-la no momento em que for útil.

11
00:00:31,600 --> 00:00:35,180
‫Por exemplo, isso. A extensão env aqui será

12
00:00:35,180 --> 00:00:39,520
‫útil para destacar as variáveis ambientais em a. n arquivo.

13
00:00:39,520 --> 00:00:42,560
‫Então, vamos examinar rapidamente alguns deles.

14
00:00:42,560 --> 00:00:46,310
‫Por exemplo, o ESLint é útil para encontrar bugs em nosso código e,

15
00:00:46,310 --> 00:00:49,320
‫na verdade, vamos configurar o ESLint com o node um

16
00:00:49,320 --> 00:00:51,163
‫pouco mais tarde, em outra seção.

17
00:00:52,460 --> 00:00:54,830
‫Temos a pré-visualização da imagem, que é uma

18
00:00:54,830 --> 00:00:57,250
‫pequena extensão muito boa para as imagens de pré-visualização.

19
00:00:57,250 --> 00:01:01,510
‫E talvez você tenha percebido que quando estávamos fazendo isso, por

20
00:01:01,510 --> 00:01:02,373
‫exemplo, o

21
00:01:03,210 --> 00:01:06,510
‫exemplo aqui você vê que aqui do lado

22
00:01:06,510 --> 00:01:10,140
‫esquerdo mostra todas as imagens que incluímos em um site.

23
00:01:10,140 --> 00:01:12,123
‫Portanto, neste exemplo é este.

24
00:01:13,850 --> 00:01:18,170
‫Tudo bem, então apenas algo pequeno que achei muito útil.

25
00:01:18,170 --> 00:01:20,150
‫O que mais temos aqui?

26
00:01:20,150 --> 00:01:22,550
‫Temos o mais bonito e este é

27
00:01:22,550 --> 00:01:25,400
‫o que eu quero configurar com você neste

28
00:01:25,400 --> 00:01:27,760
‫vídeo, mas por enquanto vamos revisar alguns

29
00:01:27,760 --> 00:01:28,930
‫outros aqui.

30
00:01:28,930 --> 00:01:32,400
‫Pug é uma linguagem que usaremos mais tarde

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

32
00:01:33,860 --> 00:01:36,620
‫modelos e, portanto, é útil ter essa

33
00:01:36,620 --> 00:01:39,090
‫extensão de embelezamento para ela também.

34
00:01:39,090 --> 00:01:43,680
‫Então eu também tenho TabNine, que às vezes faz um

35
00:01:43,680 --> 00:01:46,010
‫bom complemento automático mágico.

36
00:01:46,010 --> 00:01:48,150
‫Também tenho TODO Highlight, que

37
00:01:48,150 --> 00:01:50,060
‫é muito útil para fazer

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

39
00:01:51,510 --> 00:01:52,870
‫mágica aqui.

40
00:01:52,870 --> 00:01:54,320
‫Por exemplo, quando

41
00:01:55,300 --> 00:01:57,970
‫eu tenho TODO, ele vai realçar nesta cor

42
00:01:57,970 --> 00:01:59,810
‫verde ou se eu escrever

43
00:01:59,810 --> 00:02:01,410
‫BUG assim ele vai ficar

44
00:02:01,410 --> 00:02:03,010
‫vermelho ou FIXME e

45
00:02:03,010 --> 00:02:05,900
‫eu tenho todos os tipos dessas palavras-chave aqui que

46
00:02:05,900 --> 00:02:07,680
‫tenho que encontrar as cores

47
00:02:07,680 --> 00:02:10,140
‫diferentes para torná-las visíveis no meu código.

48
00:02:10,140 --> 00:02:13,120
‫E até aparece aqui nesta barra

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

50
00:02:14,690 --> 00:02:16,310
‫Se eu tivesse isso

51
00:02:16,310 --> 00:02:18,660
‫em linhas diferentes, você veria que as

52
00:02:18,660 --> 00:02:20,570
‫três cores estão agora aqui neste

53
00:02:20,570 --> 00:02:22,613
‫lado e isso é incrivelmente útil.

54
00:02:24,950 --> 00:02:25,940
‫Tudo bem.

55
00:02:25,940 --> 00:02:27,530
‫E, claro, meu tema

56
00:02:27,530 --> 00:02:28,970
‫de código

57
00:02:28,970 --> 00:02:30,790
‫VS, que é Oceanic

58
00:02:30,790 --> 00:02:33,070
‫Next, ouço essa pergunta o tempo

59
00:02:33,070 --> 00:02:35,350
‫todo e, em vez de perguntar

60
00:02:35,350 --> 00:02:38,100
‫bem, aqui está a resposta para ela.

61
00:02:38,100 --> 00:02:39,180
‫Tudo bem.

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

63
00:02:40,160 --> 00:02:42,690
‫agora sobre onde está?

64
00:02:42,690 --> 00:02:44,500
‫Mais bonita, esta é

65
00:02:44,500 --> 00:02:46,860
‫uma extensão muito boa que

66
00:02:46,860 --> 00:02:48,840
‫pode formatar código automaticamente, não

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

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

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

70
00:02:53,170 --> 00:02:55,810
‫Com esta extensão, não precisamos mais nos

71
00:02:55,810 --> 00:02:57,380
‫preocupar com a formatação.

72
00:02:57,380 --> 00:02:59,690
‫E, na verdade, é muito

73
00:02:59,690 --> 00:03:02,140
‫opinativo, por isso segue um conjunto

74
00:03:02,140 --> 00:03:05,840
‫de regras muito estrito, com apenas uma pequena configuração possível.

75
00:03:05,840 --> 00:03:08,210
‫Mas, neste caso de formatação de código,

76
00:03:08,210 --> 00:03:10,720
‫é realmente muito bom quando outra pessoa

77
00:03:10,720 --> 00:03:13,030
‫toma essas decisões por você.

78
00:03:13,030 --> 00:03:17,150
‫Então, isso é uma coisa a menos com que temos que nos preocupar em fazer.

79
00:03:17,150 --> 00:03:19,410
‫Ok, então nosso código será formatado

80
00:03:19,410 --> 00:03:21,910
‫automaticamente sem que tenhamos que fazer nada

81
00:03:21,910 --> 00:03:24,373
‫ou nos preocupar com um determinado estilo.

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

83
00:03:26,313 --> 00:03:27,530
‫Portanto, se você

84
00:03:27,530 --> 00:03:30,450
‫quiser experimentar, vá em frente e instale-o agora aqui.

85
00:03:30,450 --> 00:03:33,150
‫Provavelmente você tem um botão de instalação.

86
00:03:33,150 --> 00:03:36,480
‫Eu, claro, já o instalei.

87
00:03:36,480 --> 00:03:39,730
‫Em seguida, o que você precisa fazer para obter todo o

88
00:03:39,730 --> 00:03:41,020
‫poder desta extensão

89
00:03:41,020 --> 00:03:42,930
‫é ir para as suas configurações

90
00:03:42,930 --> 00:03:45,003
‫e, em seguida, ativar Formatar ao salvar.

91
00:03:46,170 --> 00:03:47,390
‫Portanto, basta

92
00:03:47,390 --> 00:03:51,010
‫pesquisar por formato e, em seguida, Formatar ao salvar.

93
00:03:51,010 --> 00:03:53,780
‫Portanto, sempre que salvamos um arquivo

94
00:03:53,780 --> 00:03:57,600
‫agora, ele usará automaticamente o Prettier para formatar nosso código.

95
00:03:57,600 --> 00:03:59,250
‫Então, instalamos o Prettier.

96
00:03:59,250 --> 00:04:01,200
‫Habilitamos Formatar ao Salvar.

97
00:04:01,200 --> 00:04:04,040
‫E agora podemos configurar o mais bonito um pouco.

98
00:04:04,040 --> 00:04:04,873
‫Novamente,

99
00:04:04,873 --> 00:04:06,920
‫como mencionei, é muito opinativo.

100
00:04:06,920 --> 00:04:09,490
‫Portanto, não há muitas coisas que possamos

101
00:04:09,490 --> 00:04:12,310
‫mudar, mas algumas coisas que podemos realmente mudar.

102
00:04:12,310 --> 00:04:14,303
‫Agora poderíamos fazer isso aqui,

103
00:04:15,500 --> 00:04:17,330
‫diretamente no código do VS,

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

105
00:04:18,300 --> 00:04:22,760
‫vez disso, o que também podemos fazer é definir um arquivo de configuração.

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

107
00:04:23,593 --> 00:04:26,460
‫E acho isso realmente melhor de fazer.

108
00:04:26,460 --> 00:04:30,400
‫Portanto, em vez de usar o código VS para definir

109
00:04:30,400 --> 00:04:33,000
‫as configurações, podemos usar uma configuração Prettier,

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

111
00:04:36,040 --> 00:04:37,970
‫é chamada de Prettier RC.

112
00:04:37,970 --> 00:04:41,021
‫Tudo bem, então tem ponto então

113
00:04:41,021 --> 00:04:42,570
‫rc mais bonito.

114
00:04:42,570 --> 00:04:44,740
‫Em seguida, abrimos as

115
00:04:44,740 --> 00:04:47,770
‫chaves e, aqui, podemos definir algumas configurações.

116
00:04:47,770 --> 00:04:50,250
‫E acho melhor fazer assim porque então

117
00:04:50,250 --> 00:04:52,240
‫posso mudar as configurações

118
00:04:52,240 --> 00:04:54,290
‫de um projeto para outro.

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

120
00:04:55,540 --> 00:04:58,070
‫mais importante, torna mais fácil para

121
00:04:58,070 --> 00:05:02,000
‫vários desenvolvedores, todos na mesma equipe, usarem a mesma configuração.

122
00:05:02,000 --> 00:05:05,610
‫Ok, então isso pode ser muito útil nas equipes.

123
00:05:05,610 --> 00:05:09,220
‫Ainda mais útil do que quando você está apenas trabalhando por conta própria.

124
00:05:09,220 --> 00:05:12,490
‫Agora, a única configuração que eu realmente quero alterar aqui é

125
00:05:12,490 --> 00:05:14,003
‫chamada de aspas simples.

126
00:05:16,120 --> 00:05:19,350
‫Então, na verdade, o Prettier já tem

127
00:05:19,350 --> 00:05:23,220
‫esse preenchimento automático embutido e sabe que single significa

128
00:05:23,220 --> 00:05:24,653
‫aspas simples.

129
00:05:25,530 --> 00:05:28,490
‫E o padrão é falso, mas quero defini-lo como verdadeiro.

130
00:05:28,490 --> 00:05:31,720
‫E então o que isso vai fazer é que

131
00:05:31,720 --> 00:05:35,360
‫todas as minhas aspas mudarão de aspas duplas para aspas simples, certo?

132
00:05:35,360 --> 00:05:37,750
‫Então salvei e aqui está

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

134
00:05:40,550 --> 00:05:45,330
‫E agora vamos ver se há aspas duplas aqui e acho

135
00:05:45,330 --> 00:05:46,600
‫que não,

136
00:05:46,600 --> 00:05:50,710
‫porque usei as aspas simples de maneira bastante consistente.

137
00:05:50,710 --> 00:05:55,110
‫Mas vamos colocar algumas aspas em algum lugar aqui e agora

138
00:05:56,030 --> 00:05:57,670
‫vou salvá-lo e

139
00:05:57,670 --> 00:05:59,750
‫dar uma olhada no que acontece.

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

141
00:06:00,583 --> 00:06:04,500
‫Primeiro, você viu que muitas coisas mudaram aqui e

142
00:06:04,500 --> 00:06:07,870
‫nosso código meio que pulou por

143
00:06:07,870 --> 00:06:12,100
‫aqui, mas é aqui que eu coloquei as aspas simples.

144
00:06:12,100 --> 00:06:15,063
‫Então você vê que eles voltaram a ser as aspas duplas.

145
00:06:16,210 --> 00:06:18,640
‫Agora, todo esse código pulando provavelmente

146
00:06:18,640 --> 00:06:21,490
‫foi porque em algum ponto eu tinha várias linhas.

147
00:06:21,490 --> 00:06:23,430
‫E o mais bonito não permite isso.

148
00:06:23,430 --> 00:06:26,760
‫Portanto, se eu tiver algo assim e

149
00:06:26,760 --> 00:06:30,450
‫salvá-lo, o Prettier permitirá apenas uma linha em branco.

150
00:06:30,450 --> 00:06:34,030
‫E, na verdade, essa foi para mim a mudança mais difícil

151
00:06:34,030 --> 00:06:36,760
‫de toda a formatação que Prettier faz.

152
00:06:36,760 --> 00:06:38,310
‫E não é configurável,

153
00:06:38,310 --> 00:06:40,600
‫portanto, não podemos mudar isso, infelizmente.

154
00:06:40,600 --> 00:06:43,010
‫Porque às vezes eu gosto de ter várias linhas, mas

155
00:06:43,010 --> 00:06:45,020
‫com o Prettier isso simplesmente não é possível.

156
00:06:45,020 --> 00:06:47,550
‫Eu posso fazer algo assim e então

157
00:06:47,550 --> 00:06:50,190
‫vai funcionar, mas é apenas uma solução alternativa.

158
00:06:50,190 --> 00:06:54,160
‫Mas ainda com esse problema eu realmente prefiro usar o mais bonito.

159
00:06:54,160 --> 00:06:57,420
‫Novamente, porque tira o pensamento de formatação

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

161
00:06:59,500 --> 00:07:03,120
‫Por exemplo, outra coisa que fiz aqui foi isso.

162
00:07:03,120 --> 00:07:05,980
‫Portanto, sempre que um certo número de caracteres em

163
00:07:05,980 --> 00:07:07,130
‫uma linha for

164
00:07:07,130 --> 00:07:10,080
‫excedido, ele encontrará uma boa maneira de quebrar o

165
00:07:10,080 --> 00:07:11,600
‫código em várias linhas.

166
00:07:11,600 --> 00:07:13,890
‫E foi isso que aconteceu aqui.

167
00:07:13,890 --> 00:07:15,773
‫Vamos ver o que mais temos aqui.

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

169
00:07:17,960 --> 00:07:21,390
‫acho que talvez, além dessa mudança, nós apenas ensinamos

170
00:07:21,390 --> 00:07:24,270
‫que tudo meio que permaneceu o mesmo.

171
00:07:24,270 --> 00:07:28,400
‫Ok, e de agora em diante em todos os outros

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

173
00:07:29,233 --> 00:07:33,360
‫deste curso, sempre usarei este arquivo de configuração PrettierRC

174
00:07:33,360 --> 00:07:35,333
‫com salvamento automático em true.

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

176
00:07:38,290 --> 00:07:39,663
‫Outra coisa que

177
00:07:39,663 --> 00:07:42,820
‫não mencionei é que ele coloca automaticamente o ponto-e-vírgula,

178
00:07:42,820 --> 00:07:45,090
‫então se eu continuar e deletar este,

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

180
00:07:46,940 --> 00:07:48,180
‫Dê uma chance.

181
00:07:48,180 --> 00:07:50,020
‫Você vê que eles estão de volta.

182
00:07:50,020 --> 00:07:50,853
‫Tudo bem?

183
00:07:51,700 --> 00:07:53,170
‫Agora, se você deseja obter

184
00:07:53,170 --> 00:07:55,993
‫uma visão geral de todas as coisas que pode configurar

185
00:07:57,030 --> 00:08:00,623
‫com o Prettier, isso é muito simples se escrevermos o Prettier no Google.

186
00:08:05,720 --> 00:08:09,780
‫Portanto, eles se posicionam como formatadores de código opinativos.

187
00:08:09,780 --> 00:08:11,080
‫E como eu

188
00:08:12,000 --> 00:08:15,300
‫disse antes e aqui embaixo temos as opções

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

190
00:08:18,340 --> 00:08:19,900
‫Portanto, largura de impressão.

191
00:08:19,900 --> 00:08:20,950
‫A largura da guia.

192
00:08:20,950 --> 00:08:24,300
‫Então, se você é uma dessas pessoas que usa

193
00:08:24,300 --> 00:08:27,630
‫quatro larguras, o que eu era até recentemente, tipo

194
00:08:27,630 --> 00:08:29,130
‫um ano atrás.

195
00:08:29,130 --> 00:08:32,960
‫Bem, então você pode configurar isso usando a largura da tabulação, então

196
00:08:32,960 --> 00:08:36,600
‫você tem, por exemplo, as aspas que acabamos de alterar.

197
00:08:36,600 --> 00:08:39,850
‫Então, aspas simples colocamos como verdadeiro e você tem todos

198
00:08:39,850 --> 00:08:41,440
‫os tipos de coisas.

199
00:08:41,440 --> 00:08:44,400
‫Você pode realmente ver aqui do lado direito, ok?

200
00:08:44,400 --> 00:08:47,000
‫Mas, novamente, não é muita configuração.

201
00:08:47,000 --> 00:08:50,273
‫Então, a maioria das coisas você realmente não pode mudar.

202
00:08:51,260 --> 00:08:55,890
‫Outra coisa que podemos experimentar é a largura da guia.

203
00:08:55,890 --> 00:09:00,773
‫Então, vamos ver este aqui, acho que o padrão é 80.

204
00:09:04,040 --> 00:09:06,693
‫Vamos definir algo como 120.

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

206
00:09:10,393 --> 00:09:13,920
‫que isso mudaria esse trecho de código aqui, voltando

207
00:09:13,920 --> 00:09:15,950
‫ao que tínhamos antes, tudo

208
00:09:15,950 --> 00:09:17,180
‫em uma linha.

209
00:09:17,180 --> 00:09:18,203
‫Só para te mostrar.

210
00:09:19,100 --> 00:09:21,880
‫Mas talvez nossa linha seja ainda mais longa do que isso.

211
00:09:21,880 --> 00:09:25,460
‫Então, vamos colocar algo realmente ridículo aqui como 200

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

213
00:09:27,460 --> 00:09:28,560
‫O que está acontecendo aqui?

214
00:09:30,880 --> 00:09:34,650
‫Ah ho! Então você vê que agora

215
00:09:34,650 --> 00:09:36,840
‫mudou para algo ainda mais estranho.

216
00:09:36,840 --> 00:09:39,323
‫Ok, então eu nunca fiz apenas um tipo de experimento.

217
00:09:40,820 --> 00:09:42,950
‫Coloque de volta em 120 e o

218
00:09:42,950 --> 00:09:44,463
‫que está acontecendo aqui?

219
00:09:51,370 --> 00:09:52,923
‫Deixe-me consertar isso rapidamente.

220
00:09:54,430 --> 00:09:56,800
‫E faz de novo, certo.

221
00:09:56,800 --> 00:09:58,530
‫Coloque de volta para

222
00:10:00,310 --> 00:10:02,420
‫80 como tínhamos e agora fica assim.

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

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

225
00:10:04,086 --> 00:10:04,919
‫Oh, me desculpe.

226
00:10:06,420 --> 00:10:07,740
‫Não era isso que eu queria fazer.

227
00:10:07,740 --> 00:10:10,133
‫Claro que eu não queria mudar a largura

228
00:10:10,133 --> 00:10:12,430
‫da tabulação quando meu padrão é dois.

229
00:10:12,430 --> 00:10:14,513
‫Eu queria mudar a largura de impressão.

230
00:10:15,690 --> 00:10:19,310
‫Então, basicamente, a largura de uma linha pode ser.

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

232
00:10:25,440 --> 00:10:28,883
‫Portanto, agora está de volta ao normal porque o padrão é dois.

233
00:10:31,220 --> 00:10:34,120
‫Então, sim, agora você pode ver que ele

234
00:10:34,120 --> 00:10:38,490
‫realmente voltou para uma linha aqui porque neste ponto aqui estamos na

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

236
00:10:39,410 --> 00:10:42,870
‫Como você pode ver aqui embaixo, o limite é 120.

237
00:10:42,870 --> 00:10:46,440
‫E assim não foi necessário quebrar essa linha

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

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

240
00:10:49,073 --> 00:10:52,010
‫Mas, na verdade, gosto desse limite de 80

241
00:10:52,010 --> 00:10:54,060
‫e vou colocá-lo de

242
00:10:54,060 --> 00:10:56,320
‫volta aqui e usá-lo no futuro.

243
00:10:56,320 --> 00:10:59,493
‫Então eu ajustei o padrão, então deixe-me simplesmente me livrar dele.

244
00:11:00,870 --> 00:11:02,880
‫Dê uma chance.

245
00:11:02,880 --> 00:11:06,230
‫E assim estamos de volta ao que era antes.

246
00:11:06,230 --> 00:11:07,780
‫Portanto, se você acha

247
00:11:07,780 --> 00:11:11,550
‫que gosta disso, vá em frente e use-o exatamente como eu.

248
00:11:11,550 --> 00:11:14,930
‫Mas se não, bem, então simplesmente ignore tudo o que

249
00:11:14,930 --> 00:11:16,590
‫eu disse neste vídeo

250
00:11:16,590 --> 00:11:19,260
‫e continue fazendo da maneira mais normal.

251
00:11:19,260 --> 00:11:20,943
‫Então isso também não é problema.