Configurando o EsLint e Prettier - Parte 02 - Primeiros Passos no Javascript

[Música] Fala mestre beleza no vídeo de hoje a gente vai estar falando aqui sobre o Primer vai ser um continuação do vídeo anterior onde a gente falou sobre a s20 esse vídeo que a gente vai estar falando sobre o Peter e vai no final ali na finalização né usar aí as duas ferramentas em conjunto Tá certo então antes da gente ir para o vídeo Eu gostaria de pedir que você deixa o like aí no vídeo se inscreva no canal né que também cliquem no Sininho para o YouTube te manter sempre atualizado aí dos nossos conteúdos

e para que você também consiga contribuir com a nossa comunidade através do seu joinha e também da sua inscrição tá certo aqui embaixo também vai estar todas as os links das redes aí da Mestres para que você consiga nos acompanhar em todas as plataformas e se manter sempre atualizado aí do conteúdo que a gente está produzindo Tá certo então aqui quem fala é o Jansen e vamos lá para mais um conteúdo agora eu vou tá falando aqui sobre o trailer certo e ele é uma ferramenta que ela é usada muito aí para personal não personalizar

mas para corrigir o nosso código ou formatar o nosso código tá então nós temos o s20 que força a gente a seguir um padrão e nós temos o Twitter que formata esse código para gente que aplica padrões enfim ele é um cara que vai fazer esse trabalho chato aí de formatação na maioria dos casos para a gente tá então o que que a gente vai fazer aqui o brilho ele é um pouco mais simples né que a gente só precisa vir aqui na parte de extensões e pesquisar por trilha tá aqui eu vou clicar em

habilitar ele vai instalar aqui essa extensão no meu visual Studio e cumprir cumprir instalado a gente vai precisar também fazer a instalação de uma extensão tá de um pacote porque o que que acontece o s20 ele força para ele ele fala Tem algo muitos padrões que o s20 por padrão né ele já obriga a gente a seguir e o preder também tem muitos padrões que ele já segue então geralmente causa Muita confusão a gente ficar tentando configurar um padrão no freezer e aquele padrão no trailer já tá configurado no s20 E aí o trailer manda

corrigir o s20 fala que não tá errado que o brilho fez então começa a virar uma bagunça e tem um próprio plugin é uma extensão feita realmente para corrigir para evitar esses problemas então se eu vir eu deixei aberto aqui a documentação do Thriller tá o site do primer.io e abrindo aqui a gente pode clicar aqui nessa parte de instalar né Install pleader e ele perde né Para a gente instalar o priver como dependência também do nosso projeto tá então o prinder ele a gente consegue acessar ele pela linha de comando também então se eu

quiser executar o freezer no meu projeto inteiro eu vou conseguir e por enquanto a gente não viu perder mas quando vocês verem vocês vão entender o porquê isso aqui também é útil Tá mas enfim eu vou instalar o Twitter aqui no meu projeto eu vou copiar o comando aqui do site oficial vou vir aqui no meu terminal vou colar né dou um enter aqui para ele instalar enquanto ele instala a gente vai ver aqui nessa parte onde ele fala de integração com os líderes né a integração com o s20 e é que ele fala que

a gente se você usa é excelente para a gente instalar aqui o s20 confling prender né que é para fazer os dois se ficarem de boa de boa aí um com o outro então clicando aqui nesse link ele já vai abrir aqui o github né a fonte aqui do reposto dessa extensão e tem aqui também o comando de instalação né do s20 confiar então eu vou copiar ele aqui certo vou voltar aqui do versus code aqui já instalou o freezer né seu olhar aqui no nosso pack de Jason o prinder tá aqui também e eu

vou instalar o s20 com fim de prea que é essa outra opção aí certo já instalou também bem rapidinho e depois de instalado a gente vai vir aqui no nosso arquivo de configuração do s20 e pedir para ele estender as configurações do pride então basicamente é vir aqui no arquivo s20 RC ponto Jason é aqui tem o comando extende né que esse estender é quando nós temos um conjunto de configurações e eu quero aplicar tudo no meu projeto então eu entendo ele tá estendendo aqui estando né que foi aquele estilo Que Nós escolhemos nesse caso

aqui a gente vai definir aqui uma lista né de valores né então primeiro eu vou estender o Standard e aqui eu passo um vidro passando o líder então ele vai estender estanda de pilha as configurações né do standard e do Twitter tem sempre que ficar aqui por último tá então quando a gente tiver trabalhando com react com reactinete nós temos também todos os plugins as configurações do s20 para Essas tecnologias né para esses frameworks e a gente só vem adicionando essas opções de extensão aqui certo então feito isso a gente já tem aqui o preater

instalado e configurado junto com o é excelente e agora que a coisa que a gente vai ver a mágica acontecendo porque o que que eu vou fazer eu vou definir aqui alguns eu vou criar aqui né alguns erros não erros mas eu vou eu vou deixar aqui que esse meu código bem bagunçado E aí depois que esse código estiver bem bagunçado eu vou pedir o s20 para ele formatar escolhe para mim então o que que eu vou fazer eu vou definir aqui basicamente um monte de código definir um monte de variável né Então conte nome

conte sobrenome vai ser igual a sobrenome né vou criar aqui uma função teste nessa função aqui ela dá um console log Hello enfim várias coisas aqui e depois eu faço isso e salvo o arquivo ele vai ficar aqui todo bagunçado né então o que que eu vou fazer não contra o shift p e vou digitar aqui formate documento né formate só já aparece né formate documentos ou então é no seu caso seria um coma de shift banner no Mac ou então você pode clicar aqui com o botão direito tem aqui ó formate documento certo clicando

aqui ele vai perguntar né com o que que eu quero formatar No meu caso eu vou formatar comprimir certo e aí quando eu clico Olha só ele já fez toda essa formatação aqui para mim tá ele nesse caso aqui nele só quebrou a linha colocou um ponto e vírgula no final para fazer essa correção se eu tivesse escrito por exemplo o meu nome com aspas simples se tivesse escrito meu nome com aspas simples aqui ele não deu erro porque eu estou no meu excelente eu estou estendendo o brilho né se eu apago isso aqui salvo

ele vai voltar a dar alguns erros aqui né que seriam no caso o erro tava dando era que as as aspas né tem que ser tem que ser simples no standard mas no prider ele aceita tanta aspas simples quanto aspas duplas então não nutrir mas quando a gente Estendeu aqui o thriller ele removeu essa regra então eu posso criar uma regra que em roads Na verdade essa regra da aspa ela é específica tá ela é específica do prett porque eu posso falar aqui por exemplo que no s20 eu vou querer as aspas duplas mas aí

no trailer sempre que eu formatar Na verdade eu posso falar que eu quero ácido simples e não perder tempo que eu formatar ele vai colocar aspas duplas então vai ficar uma contradição aí nessas informações porque eu consigo também configurar o Trader para ele ter alguns comportamentos específicos na hora de formatar o código tá então se a gente voltar aqui no Browser eu consigo vir aqui em integration que é uma parte aqui do configuração na verdade não é nem nessa aba aqui que eu quero eu quero vir aqui ó no próprio site aqui na esquerda nós

temos aqui ó configuration Fire para eles criar um arquivo de configuração né do do creeder Então tem um exemplo aqui em Jason esse arquivo de configuração o nome dele né é RC né ponto brilha ele RC então se eu volto aqui no projeto eu vou criar um arquivo aqui na raiz novo arquivorc.jay né e com esse arquivo aqui eu vou colar aquela configuração que eu colei eu vou colar aquela configuração que eu copiei tá então aqui eu vou falar aqui single Coach por exemplo é falso então aqui eu tô falando para o Peter que todas

as aspas Elas serão duplas né é esse semi seria o semicolor que é o ponto e vírgula no final né das Linhas né que ele adiciona por padrão eu vou deixar aqui falso né já tá salvo o table with que é quando ele vai formatar né ele vai fazer o tab aqui eu quero qual a largura desse teb né eu vou deixar aqui dois e esse trailer em coma é sempre ter uma vírgula no final é quando a gente está definindo por exemplo esse objeto aqui ele adicionaria uma vírgula aqui no final tá é coisa

padrãozinho besta aí do tá então salvando isso aqui se eu voltar aqui no meu arquivo JavaScript né botão direito formatar documento com escolher o kriller ele já vai formatar seguindo as regras que eu defini aqui no Arquivo ele RC português tá então recapitulando O plugin que nós instalamos que nós estamos estendendo ele desabilita algumas regras que não entraram em conflito com o nosso brilho tá e as regras do peeling a gente pode ver aqui no site oficial na documentação oficial Tá certo então feito isso agora que agora a gente vai automatizar tudo porque agora a

gente vai configurar para sempre que eu salvar o arquivo Ou seja quando eu der aqui um control S né que é o que salva o arquivo ele vai formatar né seguindo as regras aí do freezer tá então para fazer isso é bem simples também porque eu vou basicamente digitar aqui a gente pode dar um control P na verdade contra o shift pena e digitar aqui 7 ou configurações ele vai abrir aqui Open musers settings ou então a gente clica aqui em arquivo preferências e sétimos né configurações ele vai abrir essa aba que de configurações no

caso aqui eu vou clicar em workspace porque eu estou trabalhando em um workspace separado né no seu caso ele vai ser em usuário mesmo você vai fazer uma configuração global para você o usuário e que você vai procurar por save certo e Aqui nós temos né o editor formate.safe então marcando essa caixinha sempre que eu salvar ele vai formatar e nós temos aqui também ó esse code Actions que a gente pode editar no arquivo Jason então se eu clicar aqui em Edite em arquivo direito ele vai abrir aqui para mim o arquivo de configuração em

formato Jason do meu no caso aqui do meu workspace né no seu caso Pode ser aí do seu usuário tá então esse aqui é aberto eu vou conseguir definir igual aqui ó formation Safe que foi a opção que eu marquei aqui já tá aqui como true né e o que eu quero que você adicione aí é essa opção aqui ó sorte pontofixal.s20 aqui no caso tá falso você vai colocar como truco também tá e o que é isso ele vai basicamente tentar corrigir alguns erros que o s20 vai dar tá então se o s20 der

um erro lá e o Twitter consegue corrigir o trailer vai fazer tá então entra até um pouco em contradição do que eu acabei de falar sobre o arquivo premierc ponto de eixo né Para a gente evitar que um entre em conflito com outro mas é uma opção bem útil tá e você poderia até abrir mão do arquivo preferc português ele fala e habilitando isso aqui né é fazer essa configuração só no arquivo é acidente RC ponto de eixo então salvando isso aqui tudo se eu volto aqui no meu arquivo JS eu vou dar um control

Z aqui para ele voltar é do jeito que tava antes e aqui se eu dou um control s para salvar ele não formatou tá E por que que ele não formatou porque antes disso eu tenho que clicar aqui com o botão direito se a gente clica aqui em formatar documento com né o formato de documento with nós temos aqui essa opção de configurar o formatador deter para esse tipo de arquivo Então a gente tem que clicar aqui e escolher o Pride Como formatar a dor padrão para os arquivos JavaScript E agora se eu dou um

Ctrl S ele formatou para mim tá então a gente tem que definir esse formatador padrão para todo tipo de arquivo né então que no caso de arquivo JavaScript o formato do padrão é agora o primeiro antes estava né o táxi script que é o padrão do visual Swift code se eu vir aqui no arquivo Jason Não é esse cliente RC botão direito formate documento já tá definido né como the for então se eu salvo de um control S ele já formatou para mim tá então a gente vai ter por exemplo no arquivo tá escrito a

gente vai ter que fazer a mesma coisa botão direito formatar com definir o formatador padrão e escolher o brilho e aí sim e isso tudo começa a funcionar Tá então que se eu definir aqui nas minhas regras agora eu vou definir a regra de né que seria das aspas né eu vou falar aqui no s20 que eu vou ter um erro na verdade que é uma lista né eu vou falar aqui que eu vou ter um erro quando a minha as minhas aspas não forem 5 né então se eu salvo isso aqui ele tá dando

erro né porque as aspas o que elas não são singles são aspas duplas e é que se eu salvo olha lá o problema que eu falei com vocês né da contradição porque o s20 formata para aspas simples mas o brilho formata de novo para aspas duplas tá então é esse problema aqui que a gente tem que evitar criando esses dois arquivos aqui e separando as configurações Tá certo então eu vou tirar Tá certo então eu vou tirar aqui a opção de coach né das regras do s20 Vou deixar só no arquivo para ele RC e

aqui nós já temos aí uma ide um ambiente de desenvolvimento configurado que já entende segue algumas regras de código e também nos ajuda na formatação automaticamente né Sempre que a gente salva então quando a gente começa a desenvolver fica muito prático muito bom sempre que você salvo o código se ajusta automaticamente e também nós temos todo esse monitoramento do s20 tá então para essa aula aqui é isso eu espero aí que eu tenha ajudado qualquer dúvida pode estar deixando um comentário logo abaixo e é isso aí muito obrigado e até a próxima [Música]