‫-: Antes de passar para
‫a próxima seção e mongoDB, quero mostrar a você
‫como configurar o eslint junto com o código vs mais
‫bonito para melhorar a qualidade do código.
‫Agora, se você não estiver usando
‫o código vs, ou se já tiver algum
‫tipo de linter em seu fluxo de trabalho, marque esta palestra como
‫concluída e vá direto para a próxima seção.
‫Mas se você é novo
‫no es Lint e deseja melhorar a
‫qualidade do código, vamos começar com este vídeo.
‫Portanto, es Lint é basicamente um programa que
‫verifica constantemente nosso código e encontra
‫erros de codificação em
‫potencial ou simplesmente práticas de codificação ruins que ele pensa estarem erradas.
‫É muito, muito configurável para que
‫possamos realmente ajustá-lo às nossas necessidades
‫e hábitos de codificação.
‫Agora também podemos usar es Lint para formatação de
‫código, mas continuaremos usando
‫mais bonito que já configuramos anteriormente para isso.
‫Portanto, vamos configurar tudo isso de
‫forma que mais bonito ainda seja o formatador de código principal,
‫mas com base em algumas regras do Lint
‫que iremos definir.
‫E então tudo o que es Lint fará
‫por nós é destacar os erros.
‫Mas eu sei que tudo
‫isso provavelmente parece mais confuso do que qualquer outra coisa.
‫E então vamos configurar isso agora.
‫Portanto, a primeira coisa que quero
‫que você faça é instalar a extensão es Lint para vs Code.
‫Então venha aqui e procure por es Lint.
‫OK?
‫E eu já
‫tenho instalado, mas é assim.
‫Portanto, tudo o que
‫você precisa fazer é instalá-lo e, provavelmente, recarregar esta janela.
‫E se você ainda não configurou o Prettier, vá
‫em frente e faça esse também.
‫Então, com essa
‫extensão aqui, mas essa já
‫fizemos na primeira seção, se você seguiu comigo.
‫Em seguida, precisamos instalar um monte de dependências de desenvolvimento,
‫então vamos realmente tornar isso aqui muito maior e
‫ir para o nosso outro terminal aqui.
‫E então vamos dizer, npm install e também precisamos instalar o es
‫Lint em um pacote mais bonito que o npm.
‫OK?
‫Então é mais fino e
‫bonito, e provavelmente esta é a
‫primeira vez que
‫estamos instalando vários pacotes ao mesmo tempo.
‫E isso é muito fácil, simplesmente escrevemos
‫todos esses pacotes no mesmo comando.
‫OK?
‫Mas com esses dois estamos longe de estar prontos.
‫Então o próximo é es Lint config mais bonito
‫e este vai desabilitar a formatação para
‫es Lint, porque lembre-se, queremos mais bonito para formatar nosso código.
‫Em seguida, temos o plugin es Lint mais
‫bonito e este permitirá que
‫es Lint mostre erros de formatação à medida
‫que digitamos, novamente, usando mais bonito.
‫OK?
‫E tudo isso é claro, muito confuso
‫e precisei de muito tempo para descobrir isso.
‫E esta realmente é apenas uma receita que
‫você precisa seguir aqui.
‫OK?
‫Portanto, não se trata de
‫entender o que estou fazendo aqui,
‫tudo que você precisa fazer é seguir
‫esta receita, e então funcionará para este projeto, e em
‫projetos futuros tudo que você precisa fazer
‫é ir para o arquivo dot json do seu pacote e
‫copie essa configuração e instale-a em seu próximo projeto.
‫Porque, na verdade, todos
‫esses pacotes devem ser instalados localmente.
‫Não funcionaria se tentássemos
‫fazer isso globalmente.
‫Tudo bem?
‫De qualquer forma, precisamos agora de um guia de estilo de bom
‫trabalho que possamos seguir.
‫E existem muitos guias de estilo
‫por aí, mas o
‫mais popular é provavelmente o guia de estilo do airbnb.
‫E então, na verdade, há uma
‫configuração es Lint que podemos usar para isso,
‫que está em npm, e é chamada de eslint config airbnb.
‫Ok, a seguir, temos o nó do plug-in eslint, e isso
‫adicionará algumas regras específicas do eslint apenas
‫para o nodejs, certo?
‫Então, basicamente, para encontrar alguns
‫erros que podemos estar cometendo ao escrever o código nodejs.
‫E agora, finalmente, precisamos de três outros plug-ins eslint que
‫são necessários apenas para fazer o guia de
‫estilo do airbnb realmente funcionar.
‫Então esse guia de estilo depende disso.
‫Portanto, eslint plugin, import, eslint,
‫plugin,
‫jsx,
‫a11y,
‫e
‫vejo que
‫há um erro aqui.
‫E finalmente eslint,
‫plugin, react.
‫Mesmo que não estejamos escrevendo no código react
‫aqui, ainda precisamos deste porque o
‫guia de estilo do airbnb depende disso.
‫Portanto, estes são todos os pacotes, espero
‫que os tenha escrito corretamente.
‫E agora precisamos salvá-los como dependências de
‫dev, então salve dev e agora
‫aperte return, e cruze os dedos para que tudo funcione aqui.
‫Então, parece que sim.
‫Vamos dar uma olhada em nosso
‫pacote dot json e, de fato, aqui temos todos esses pacotes.
‫Excelente.
‫Agora, a próxima etapa é que
‫precisamos de arquivos de configuração tanto para mais bonito quanto para es lint, certo?
‫E já criamos aquele para mais bonito antes
‫e já está no nosso projeto aqui.
‫Esse também é, e tudo
‫que fiz aqui foi dizer que sempre quero a aspa simples.
‫OK?
‫E o outro é o arquivo de configuração para
‫es lint, e novamente já está nos arquivos
‫de inicialização porque realmente não precisamos perder
‫tempo apenas para escrever
‫esse arquivo de configuração terrível, certo?
‫Assim, o arquivo
‫já está escrito, vamos examiná-lo rapidamente.
‫Então aqui afirmamos
‫que queremos usar o guia
‫de estilo do airbnb,
‫e também mais bonito, e também o plugin de nó, ok?
‫Agora, esl int trata de regras de codificação
‫e existem muitas regras que es lint
‫tenta impor a nós.
‫Mas podemos realmente mudar
‫aqueles que queremos usar, um por um.
‫E podemos desligá-los completamente ou
‫apenas mostrar um aviso em vez de mostrar um erro.
‫Por exemplo, uma regra é que o eslint
‫não deseja que usemos log de pontos do console em nosso
‫código e, portanto, a cada vez, por padrão, haverá um
‫erro quando usarmos log de
‫pontos do console.
‫Mas em vez de me
‫mostrar um erro, eu o configuro para que apenas me mostre
‫um aviso, é por isso que avisamos.
‫Eu também poderia
‫desligá-lo completamente escrevendo, como
‫fiz com muitas dessas outras regras.
‫Então, por exemplo, aqui neste próximo que
‫diz que toda e qualquer
‫função deve sempre retornar algo, ok?
‫E, às vezes, simplesmente temos uma função
‫que não funciona, então precisei desativar essa regra completamente.
‫Ou, finalmente, também temos, por
‫exemplo, esta regra aqui, que diz que
‫nunca deve haver uma variável que declaramos, mas não usamos.
‫Na verdade, isso detecta muitos bugs,
‫então deixo como um erro aqui, mas
‫também criei algumas exceções.
‫Então, essas quatro exceções aqui são as
‫variáveis típicas que temos
‫em express,
‫em nossos manipuladores em express, mas que nem sempre usamos.
‫Direito?
‫E, portanto, não quero que sejam marcados como erros
‫cada vez que tenho, por
‫exemplo, uma variável req em uma função, mas não a uso.
‫OK?
‫Portanto, você pode dar uma olhada nessas outras regras
‫aqui e decidir qual
‫você gosta e qual não.
‫Essas são as regras que fazem sentido para mim, mas
‫é claro que podem ser diferentes para você.
‫Vamos rapidamente ao site eslint para dar uma
‫olhada em todas as coisas
‫que você pode configurar.
‫Então es lint, então aqui você tem alguma documentação e algumas instruções sobre como
‫você pode configurá-lo, mas tudo que eu realmente
‫quero mostrar a
‫você são todas essas regras diferentes.
‫Então, você tem
‫todos eles aqui e vê, há uma
‫tonelada deles que você pode configurar, certo?
‫Portanto, dê uma olhada nisso, mas
‫na verdade é mais fácil simplesmente configurar este es lint sempre que você
‫receber um novo erro em seu código.
‫OK?
‫Deixe-me mostrar isso a
‫você, para que possamos ver na prática.
‫Então, vamos para o nosso arquivo do servidor aqui e
‫simplesmente criar algum código aqui
‫que vai contra algumas regras es.
‫Então, por exemplo, definir uma variável aqui, como esta, e então atribuir
‫outra coisa a ela.
‫Tudo bem, então sabemos que x é uma constante
‫e, portanto, não deve ser reatribuído.
‫Portanto, se dermos isso
‫agora atribuído, deveremos realmente ver um erro.
‫E bem, não fizemos, então vou fechar
‫a janela e abri-la novamente.
‫Portanto, faça isso também
‫e, com sorte, estará funcionando até lá.
‫Ok, na verdade nós vemos nossos erros aqui
‫agora marcados em vermelho.
‫Então, chegamos agora a esta guia de problemas.
‫Deixe-me mover um pouco para
‫cima, e aqui vemos todos os erros que temos.
‫Portanto, começando com o
‫primeiro, esperava-se uma linha vazia após a
‫instrução required não seguida por outra require.
‫Então, basicamente o que
‫está me dizendo é que ele quer isso
‫requer aqui no topo e depois, uma linha vazia e depois assim.
‫E assim, o erro desaparece.
‫OK?
‫E assim, isso impõe um padrão de codificação mais agradável.
‫Em seguida, temos x é atribuído e um valor nunca usado.
‫E isso é que não
‫há variáveis não utilizadas que mencionei antes.
‫Então, este aqui.
‫OK?
‫E isso é um erro, mas eu também poderia desligá-lo
‫apenas para mostrar como isso mudaria.
‫Então, eu o salvei e agora esse erro desapareceu.
‫Então você vê que não está mais marcado em vermelho.
‫Mas, na verdade, eu quero que
‫isso seja um erro, então escrevo erro, salvo e nosso erro volta.
‫Veja, é declarado, mas nunca usado.
‫E então, aqui x é constante.
‫Então realmente cometemos um erro
‫aqui, que era reatribuir
‫uma constante, e isso não é permitido, então vamos
‫nos livrar disso e aí o erro desaparece.
‫Ainda temos este porque o valor nunca
‫foi usado.
‫Vamos escrever rapidamente x mais dois e agora acabou.
‫Mas temos o próximo erro, basicamente
‫porque simplesmente temos esse
‫código parado aqui, não atribuído a nada.
‫Então, vamos apenas dizer que const y é igual a
‫este, mas é claro que y é atribuído, mas nunca usado, e por
‫isso estamos entrando neste loop aqui.
‫Mas, de qualquer maneira, isso foi apenas para demonstrar isso a você.
‫E então vamos ver agora o aviso final.
‫E então esse não é o console, certo?
‫Portanto, lembre-se de que já falei sobre isso antes e
‫é verde porque é um aviso.
‫Então, novamente, eu poderia desligá-lo e meu
‫problema desapareceria, para que o código parecesse
‫normal agora.
‫Mas, na verdade, quero que o eslint me avise sobre
‫isso, porque não é uma boa
‫prática ter muitos logs de console posteriormente na produção.
‫Tudo bem, então ele está de volta agora.
‫E, na verdade, o código vs também me avisa
‫que há um aviso verde aqui
‫neste arquivo.
‫Talvez você tenha percebido isso antes,
‫mas se colocarmos um
‫erro aqui, na verdade ele ficará vermelho.
‫OK?
‫Agora está vermelho e temos dois problemas aí.
‫E isso é realmente útil para identificar
‫problemas em todos esses arquivos.
‫Tudo bem, vamos nos livrar disso.
‫E então, na verdade, é isso.
‫Portanto, espero que tenha funcionado para
‫você também. Se ocorrer algum erro, tente simplesmente
‫instalar os mesmos pacotes que eu instalei.
‫Então, tudo isso aqui, e lembre-se de que é
‫assim que você faz.
‫Por exemplo, se você
‫quiser eslint cinco, diga npm I eslint às cinco.
‫Por exemplo, você pode até ir cinco ponto 16 ponto 0 apenas
‫para ter certeza de que tudo é o mesmo.
‫E, nesse caso, tudo deve funcionar exatamente
‫como funcionou aqui para mim.
‫Ótimo, então este foi mais um passo
‫importante em sua jornada para se tornar um desenvolvedor.
‫Porque, acredite em mim, é
‫muito importante ter code linting como você tem agora.
‫Então, novamente, para seu próximo projeto,
‫vá em frente, copie essas dependências em seu arquivo
‫de ponto json do pacote e instale-as todas
‫ao mesmo tempo.
‫E isso tornará sua vida muito mais fácil.
‫Então é assim que eu
‫sempre faço, e o mesmo, é claro, com o rc
‫mais bonito e esse arquivo de configuração eslint.
‫Enfim, chega de conversa para este vídeo.
‫Agora estamos finalmente prontos para passar para
‫a seção mongodb muito importante.