‫-: Portanto, esta seção e o projeto de forma de
‫nó agora estão basicamente
‫concluídos, mas neste vídeo eu queria
‫revisar rapidamente minha configuração de código
‫VS e também junto com você configurar a extensão Prettier.
‫Portanto, essas são as extensões que instalei no meu
‫código do VS e nem todas serão relevantes
‫para este curso,
‫mas sempre que houver uma extensão
‫relevante, irei mencioná-la no momento em que for útil.
‫Por exemplo, isso. A extensão env aqui será
‫útil para destacar as variáveis ambientais em a. n arquivo.
‫Então, vamos examinar rapidamente alguns deles.
‫Por exemplo, o ESLint é útil para encontrar bugs em nosso código e,
‫na verdade, vamos configurar o ESLint com o node um
‫pouco mais tarde, em outra seção.
‫Temos a pré-visualização da imagem, que é uma
‫pequena extensão muito boa para as imagens de pré-visualização.
‫E talvez você tenha percebido que quando estávamos fazendo isso, por
‫exemplo, o
‫exemplo aqui você vê que aqui do lado
‫esquerdo mostra todas as imagens que incluímos em um site.
‫Portanto, neste exemplo é este.
‫Tudo bem, então apenas algo pequeno que achei muito útil.
‫O que mais temos aqui?
‫Temos o mais bonito e este é
‫o que eu quero configurar com você neste
‫vídeo, mas por enquanto vamos revisar alguns
‫outros aqui.
‫Pug é uma linguagem que usaremos mais tarde
‫para construir
‫modelos e, portanto, é útil ter essa
‫extensão de embelezamento para ela também.
‫Então eu também tenho TabNine, que às vezes faz um
‫bom complemento automático mágico.
‫Também tenho TODO Highlight, que
‫é muito útil para fazer
‫esse tipo de
‫mágica aqui.
‫Por exemplo, quando
‫eu tenho TODO, ele vai realçar nesta cor
‫verde ou se eu escrever
‫BUG assim ele vai ficar
‫vermelho ou FIXME e
‫eu tenho todos os tipos dessas palavras-chave aqui que
‫tenho que encontrar as cores
‫diferentes para torná-las visíveis no meu código.
‫E até aparece aqui nesta barra
‫de rolagem.
‫Se eu tivesse isso
‫em linhas diferentes, você veria que as
‫três cores estão agora aqui neste
‫lado e isso é incrivelmente útil.
‫Tudo bem.
‫E, claro, meu tema
‫de código
‫VS, que é Oceanic
‫Next, ouço essa pergunta o tempo
‫todo e, em vez de perguntar
‫bem, aqui está a resposta para ela.
‫Tudo bem.
‫Mas
‫agora sobre onde está?
‫Mais bonita, esta é
‫uma extensão muito boa que
‫pode formatar código automaticamente, não
‫importa se JavaScript
‫ou CSS ou
‫mesmo HTML.
‫Com esta extensão, não precisamos mais nos
‫preocupar com a formatação.
‫E, na verdade, é muito
‫opinativo, por isso segue um conjunto
‫de regras muito estrito, com apenas uma pequena configuração possível.
‫Mas, neste caso de formatação de código,
‫é realmente muito bom quando outra pessoa
‫toma essas decisões por você.
‫Então, isso é uma coisa a menos com que temos que nos preocupar em fazer.
‫Ok, então nosso código será formatado
‫automaticamente sem que tenhamos que fazer nada
‫ou nos preocupar com um determinado estilo.
‫OK?
‫Portanto, se você
‫quiser experimentar, vá em frente e instale-o agora aqui.
‫Provavelmente você tem um botão de instalação.
‫Eu, claro, já o instalei.
‫Em seguida, o que você precisa fazer para obter todo o
‫poder desta extensão
‫é ir para as suas configurações
‫e, em seguida, ativar Formatar ao salvar.
‫Portanto, basta
‫pesquisar por formato e, em seguida, Formatar ao salvar.
‫Portanto, sempre que salvamos um arquivo
‫agora, ele usará automaticamente o Prettier para formatar nosso código.
‫Então, instalamos o Prettier.
‫Habilitamos Formatar ao Salvar.
‫E agora podemos configurar o mais bonito um pouco.
‫Novamente,
‫como mencionei, é muito opinativo.
‫Portanto, não há muitas coisas que possamos
‫mudar, mas algumas coisas que podemos realmente mudar.
‫Agora poderíamos fazer isso aqui,
‫diretamente no código do VS,
‫mas em
‫vez disso, o que também podemos fazer é definir um arquivo de configuração.
‫OK?
‫E acho isso realmente melhor de fazer.
‫Portanto, em vez de usar o código VS para definir
‫as configurações, podemos usar uma configuração Prettier,
‫que
‫é chamada de Prettier RC.
‫Tudo bem, então tem ponto então
‫rc mais bonito.
‫Em seguida, abrimos as
‫chaves e, aqui, podemos definir algumas configurações.
‫E acho melhor fazer assim porque então
‫posso mudar as configurações
‫de um projeto para outro.
‫E ainda
‫mais importante, torna mais fácil para
‫vários desenvolvedores, todos na mesma equipe, usarem a mesma configuração.
‫Ok, então isso pode ser muito útil nas equipes.
‫Ainda mais útil do que quando você está apenas trabalhando por conta própria.
‫Agora, a única configuração que eu realmente quero alterar aqui é
‫chamada de aspas simples.
‫Então, na verdade, o Prettier já tem
‫esse preenchimento automático embutido e sabe que single significa
‫aspas simples.
‫E o padrão é falso, mas quero defini-lo como verdadeiro.
‫E então o que isso vai fazer é que
‫todas as minhas aspas mudarão de aspas duplas para aspas simples, certo?
‫Então salvei e aqui está
‫nosso índice. js.
‫E agora vamos ver se há aspas duplas aqui e acho
‫que não,
‫porque usei as aspas simples de maneira bastante consistente.
‫Mas vamos colocar algumas aspas em algum lugar aqui e agora
‫vou salvá-lo e
‫dar uma olhada no que acontece.
‫Uau.
‫Primeiro, você viu que muitas coisas mudaram aqui e
‫nosso código meio que pulou por
‫aqui, mas é aqui que eu coloquei as aspas simples.
‫Então você vê que eles voltaram a ser as aspas duplas.
‫Agora, todo esse código pulando provavelmente
‫foi porque em algum ponto eu tinha várias linhas.
‫E o mais bonito não permite isso.
‫Portanto, se eu tiver algo assim e
‫salvá-lo, o Prettier permitirá apenas uma linha em branco.
‫E, na verdade, essa foi para mim a mudança mais difícil
‫de toda a formatação que Prettier faz.
‫E não é configurável,
‫portanto, não podemos mudar isso, infelizmente.
‫Porque às vezes eu gosto de ter várias linhas, mas
‫com o Prettier isso simplesmente não é possível.
‫Eu posso fazer algo assim e então
‫vai funcionar, mas é apenas uma solução alternativa.
‫Mas ainda com esse problema eu realmente prefiro usar o mais bonito.
‫Novamente, porque tira o pensamento de formatação
‫dele.
‫Por exemplo, outra coisa que fiz aqui foi isso.
‫Portanto, sempre que um certo número de caracteres em
‫uma linha for
‫excedido, ele encontrará uma boa maneira de quebrar o
‫código em várias linhas.
‫E foi isso que aconteceu aqui.
‫Vamos ver o que mais temos aqui.
‫Bem, eu
‫acho que talvez, além dessa mudança, nós apenas ensinamos
‫que tudo meio que permaneceu o mesmo.
‫Ok, e de agora em diante em todos os outros
‫códigos
‫deste curso, sempre usarei este arquivo de configuração PrettierRC
‫com salvamento automático em true.
‫OK.
‫Outra coisa que
‫não mencionei é que ele coloca automaticamente o ponto-e-vírgula,
‫então se eu continuar e deletar este,
‫e este e este aqui.
‫Dê uma chance.
‫Você vê que eles estão de volta.
‫Tudo bem?
‫Agora, se você deseja obter
‫uma visão geral de todas as coisas que pode configurar
‫com o Prettier, isso é muito simples se escrevermos o Prettier no Google.
‫Portanto, eles se posicionam como formatadores de código opinativos.
‫E como eu
‫disse antes e aqui embaixo temos as opções
‫que podemos realmente configurar.
‫Portanto, largura de impressão.
‫A largura da guia.
‫Então, se você é uma dessas pessoas que usa
‫quatro larguras, o que eu era até recentemente, tipo
‫um ano atrás.
‫Bem, então você pode configurar isso usando a largura da tabulação, então
‫você tem, por exemplo, as aspas que acabamos de alterar.
‫Então, aspas simples colocamos como verdadeiro e você tem todos
‫os tipos de coisas.
‫Você pode realmente ver aqui do lado direito, ok?
‫Mas, novamente, não é muita configuração.
‫Então, a maioria das coisas você realmente não pode mudar.
‫Outra coisa que podemos experimentar é a largura da guia.
‫Então, vamos ver este aqui, acho que o padrão é 80.
‫Vamos definir algo como 120.
‫E pensei
‫que isso mudaria esse trecho de código aqui, voltando
‫ao que tínhamos antes, tudo
‫em uma linha.
‫Só para te mostrar.
‫Mas talvez nossa linha seja ainda mais longa do que isso.
‫Então, vamos colocar algo realmente ridículo aqui como 200
‫e uau!
‫O que está acontecendo aqui?
‫Ah ho! Então você vê que agora
‫mudou para algo ainda mais estranho.
‫Ok, então eu nunca fiz apenas um tipo de experimento.
‫Coloque de volta em 120 e o
‫que está acontecendo aqui?
‫Deixe-me consertar isso rapidamente.
‫E faz de novo, certo.
‫Coloque de volta para
‫80 como tínhamos e agora fica assim.
‫Oh
‫sim!
‫Oh, me desculpe.
‫Não era isso que eu queria fazer.
‫Claro que eu não queria mudar a largura
‫da tabulação quando meu padrão é dois.
‫Eu queria mudar a largura de impressão.
‫Então, basicamente, a largura de uma linha pode ser.
‫Oh, isso foi realmente estúpido.
‫Portanto, agora está de volta ao normal porque o padrão é dois.
‫Então, sim, agora você pode ver que ele
‫realmente voltou para uma linha aqui porque neste ponto aqui estamos na
‫coluna 96.
‫Como você pode ver aqui embaixo, o limite é 120.
‫E assim não foi necessário quebrar essa linha
‫de código na segunda.
‫OK?
‫Mas, na verdade, gosto desse limite de 80
‫e vou colocá-lo de
‫volta aqui e usá-lo no futuro.
‫Então eu ajustei o padrão, então deixe-me simplesmente me livrar dele.
‫Dê uma chance.
‫E assim estamos de volta ao que era antes.
‫Portanto, se você acha
‫que gosta disso, vá em frente e use-o exatamente como eu.
‫Mas se não, bem, então simplesmente ignore tudo o que
‫eu disse neste vídeo
‫e continue fazendo da maneira mais normal.
‫Então isso também não é problema.