bom no vídeo de hoje a gente vai tá falando aqui sobre configuração do s20 né configuração do trailer que são extensões aí do visual Studio coisa são ferramentas que a gente usa no dia a dia no desenvolvimento e a gente vai falar que também um pouco sobre personalização da própria idn do próprio visual Studio code tá então antes da gente partir para aula eu gostaria de pedir que você deixa um like aí no vídeo você se inscreva no canal e também clique no Sininho para o YouTube manter você sempre atualizado e para você também contribuir
com a nossa comunidade certo aqui quem fala é o Jansen e vamos lá que o mundo do código nos aguarde [Música] bom então como eu falei na introdução né Nós vamos fazer o uso aqui de s20 e prett né Logo no início que a gente já vai começar com esses dois e no finalzinho da aula a gente vai falar sobre o personalização tá então eu tô aqui com o meu navegado aberto eu já estou aqui no site do es link tá e o é excelente né Sempre que a gente tá desenvolvendo é tem muitas regras
muitas práticas muitos padrões que são definidos ou pela comunidade ou pelo time que a gente tá trabalhando e esses padrões eles devem ser forçados ou o melhor eles devem ser seguidos né e ferramentas que são conhecidas aí como linkrges né e o mais famoso entre eles é o s20 são ferramentas aí que vão fazer esse trabalho para gente né a gente vai fazer uma configuração de um estilo de código de padrões de código e essas ferramentas Elas irão sempre tá verificando e Tendo certeza que todo o código que está sendo escrito ou todo o código
que está sendo salvo em um repositório ele segue ali aqueles padrões tá então esse link é a ferramenta que vai estar fazendo isso para a gente certo então eu tô aqui como meu visual atitude code aberto tá E esse episódio de code aqui é tá do jeito que a gente deixou na aula passada né Eu só apaguei aqui alguns arquivos que tinham aqui adicionei esse arquivo do fara code que a gente vai entender melhor mas para o final mas o importante é que é o Packet ponto Jason certo que lembrando é aquele arquivo que diz
o que é o que que é qual a versão a descrição Quem é o autor qual licença é e as dependências do nosso projeto tá então Pet português é o arquivo que vai estar sempre aí no nosso ambiente de desenvolvimento quando a gente tá trabalhando com node certo então com esse cara aqui a gente vai começar a fazer a instalação do es-20 tá então eu vou voltar aqui no navegador e aqui no site do s20 a gente pode clicar aqui né ou clicar aqui em Box né Para a gente já abrir aqui a parte da
documentação e aqui na nessa parte lateral esquerda né Nós temos aqui a parte de configuração e enfim pré-requisitos tem aqui a parte do quick start que tem toda aqui um tutorial para a gente tá iniciando tá e a gente vai fazer isso aqui no nosso projeto e olhando aqui né os requisitos o s20 a gente precisa ter o note que foi o que a gente fez na aula passada certo então voltando aqui no visual atitude code eu vou abrir o terminal certo o meu terminal aqui nessa aula já configurei né para usar o Power Shell
mas a gente vai ver isso aqui também mais para o final tá E no terminal no power Shell e isso aqui Depende se você tá no Linux ou no Mac o terminal você vai abrir aqui o Terminal Integrado né clicando aqui terminar o novo terminal ele vai abrir aqui um terminal para que você digite comando tá então o primeiro comando que a gente vai rodar aqui é usando o próprio npm certo npm expliquei na aula passada que é o gerenciador de pacotes do note né então eu vou usar o npm install o comando aqui install
para instalar um pacote e qual o pacote é esse é o pacote es link certo e esse pacote s20 ele vai ser uma dependência do meu projeto né o meu projeto vai usar o s20 só que o s20 ele só vai ser usado em desenvolvimento né esse link ele não vai ser um pacote essencial para o meu projeto funcionar então ele é uma dependência de desenvolvimento a gente pode usar que a save traço deve certo então executando Esse comando aqui ele vai fazer a instalação do pacote s20 como dependência de desenvolvimento para esse meu projeto
tá então aqui ele vai fazer instalação e vai instalar nessa pasta vai criar né essa pasta no de módulos que é onde o node vai instalar os módulos né o nome que já é bem claro vai instalar os pacotes que aquele meu projeto depende tá então ele já criou aqui para mim a pasta com alguns com alguns diretórios já aqui dentro né algumas coisas interessante que mas nós já temos aqui é esse link certo então com esse link instalado ele vai ser usado aí para para fazer todo aquele trabalho de verificação do nosso código tá
então agora que a gente instalou nós vamos executar que outro comando que é o npx certo esse comando esse npx né é o note pega SUS que ele vai executar comandos ele vai executar pacotes projetos não projeto é uma palavra meio ruim aqui né mas ele vai executar para mim algum comando de algum pacote que está instalado aqui na minha máquina No meu caso eu tenho o s20 certo foi o pacote que eu acabei de instalar então npx ele vai executar os scripts do es link certo e aqui eu vou passar a flag-inite certo então
aqui eu estou basicamente indicando para o note para que seja executado né o a inicialização do s20 para esse meu projeto certo então executando isso aqui ele vai me fazer agora algumas perguntas certo então ele aqui tem algum questionário né todo que que ele vai fazer para a gente configurar realmente o nosso cslide Então a primeira pergunta que ele faz é como a gente gostaria de usar o s20 né se é para verificar sintaxe de código se é para verificar sentax e encontrar problemas ou se é para verificar assim táxi e encontrar problemas e forçar
né um estilo de código eu gosto sempre quelecionar essa terceira opção é que eu tô usando a setinhas tá para a setinha do teclado para navegar aqui e eu vou selecionar essa opção essa terceira opção certo e aqui ele pergunta quais tipos de módulo o nosso projeto usa a gente não falou ainda de módulos a gente não falou ainda mais detalhes sobre o JavaScript mas aqui a gente vai usar o JavaScript moles né que é o importe Xport que é uma notação mais recente aí do JavaScript tá então que JavaScript mode eu seleciono com o
enter tal seleciono o escolho com a setinha e dou um enter aqui para ele selecionar aqueles a perguntando qual Framework meu projeto usa né se é o reaction ouviu É no meu caso aqui no nosso caso aqui a gente não usa nenhum desses frameworks ainda então eu vou selecionar nenhum né o nosso projeto usa tapescript não a gente não usa tá escrito ainda e ele pergunta onde o nosso código é executado nesse caso aqui o nosso código vai ser executado nobral no note tá então eu vou marcar o node e desmarcar o browser aqui eu
para marcar espaço tá pressiona espaço e ele vai marcar ali de verde né o note e vou desmarcar o browser certo então selecionado noite pressionante e aquele pergunta se eu quero usar um guia de estilo Popular né E esse que eles chamam de Style guide seria aí os padrões ou seja as configurações já para o s20 para que esse projeto meu siga tá então eu posso escolher para usar um Style guide Popular ou eu posso responder questões sobre o meu estilo né para que a gente consiga descrever melhor como que é o estilo de código
e ele criar uma configuração personalizada nesse caso aqui eu vou pegar uma stylegade Popular certo e nesse caso aqui ele tem nós temos aqui quatro opções né o airbnb Standard o Google ou x ou eu vou usar aqui o Standard que é o padrão o padrão estante é padrão né que é o mais básico aí do é esse link certo vou escolher isso aqui e ele pergunta como que eu quero salvar em qual formato eu quero salvar o arquivo de configurações porque todas essas perguntas aqui que a gente respondeu vai gerar um arquivo de configurações
eu vou salvar ele aqui no formato Jason tá E aqui ele vai verificar as dependências ele tá baseado nas minhas respostas né ele viu o que que precisa instalar esses pacotes né é excelente plugin é esse link de conflix enfim todos esses pacotes aqui eu vou dar um enter aqui que sim né pode instalar esses pacotes no meu projeto e ele pergunta qual o gerenciador de pacote eu quero usar por enquanto a gente só conhece o npm Né não foi falado ainda de arnel Então vamos selecionar aqui o npm para ser usado para instalar esses
pacotes E aí ele vai fazer essa instalação desses pacotes no meu projeto como dependências de desenvolvimento já tá aqui as dependências então eu posso eu vou reduzir aqui o terminal a gente pode ver aqui que foi instalado né Essas dependências do s20 E aí com isso aqui instalado a gente pode ver que apareceu que também um arquivo ponto es lente RC ponto do Jason né que é o arquivo de configurações que foi gerado certo então uma vez instalado o s20 o pacote e feita essa configuração agora a gente precisa dar extensão tá então aqui no
visual de code nós temos aqui essa abastenções né na esquerda que é na aba onde a gente consegue ver e instalar extensões aqui no nosso Resort code tá eu tenho muitas extensões instaladas nesse caso aqui todas elas estão desabilitadas por conta do vídeo e quem vai buscar por esse link certo e tem a primeira opção aqui né pslite uma extensão com 27 milhões de downloads Então essa extensão muito popular e que a gente no meu caso eu vou clicar aqui em habilitar né enable mas no seu caso aí vai ser installer para você instalar essa
extensão porque eu já tenho instalada né Eu só desabilitei por conta aí do vídeo Mas beleza ele vai habilitar ele vai instalar né instalar e habilitar essa extensão aí para você e aí feito isso né feito o espaço agora nós já temos o s20 configurado no nosso projeto E aí para a gente ver isso funcionando nós vamos criar aqui um novo arquivo né eu posso eu clico aqui nessa aba esquerda né Clica com o botão direito novo arquivo no nosso caso aqui eu fiz eu fiz para essa aula eu fiz essa configuração de workspace né
que é uma configuração que você consegue criar ambientes de trabalho com configurações diferentes tá então no seu caso você não vai ter nenhum workspace configurado aí e a diferença aqui é só que eu consigo né na verdade aqui ele eu adicionei no meu ambiente de trabalho esse diretório YouTube no seu caso né quando você iniciou o visual Studio code que a gente fez na aula passada você provavelmente é iniciou via terminal né que foi o exemplo que eu dei mas aqui a gente pode clicar em arquivo né e criar abrir um arquivo ou abrir uma
pasta né um diretório E aí o visual Studio code vai usar aquele diretório ali para criar e para ler os arquivos dele tá no meu caso aqui eu tô usando o diretório YouTube que eu tinha criado para usar aqui como exemplo na aula tá então com esse diretório aberto né caso você não tenha aberto ainda no diretório Você vai clicar aqui em arquivo né e Abrir pasta abrir folder Abrir diretório caso você não tenha o diretório você cria um lá no seu explorador de arquivos e abra ele aqui né E aí com esse cara aberto
a gente consegue né clicar aqui com o botão direito novo arquivo e eu vou dar um nome desse artigo de index.js certo é um arquivo JavaScript que a gente agora a gente pode escrever algum código aqui né então eu vou fazer o seguinte eu vou criar aqui um constante uma constante chamada nome vai receber aqui meu nome João certo e se eu coloco mais aqui em cima a gente já vê que tá dando erro né E esse erro ele vem do s20 tá então no s20 né aqui a gente tem até um link para se
a gente clicar ele vai abrir lá no navegador né pergunta que se eu quero abrir clique em Open ele vai abrir na documentação do s20 o que que é aquela regra que eu estou quebrando né O que que ela significa o que que eu tenho que fazer para corrigir tá então no nosso caso aqui é a regra de aspas né que foi quebrada aqui porque segundo essa configuração do s20 standard né Que Nós escolhemos é as aspas precisam ser sempre aspas simples né então tudo lembrando é tudo isso é configurado né tudo isso a gente
pode configurar e ele vai sempre seguir esse padrão né então ele tá reclamando aqui também ó que eu preciso né dar um New Line ou seja deixar sempre uma linha embaixo Branca né e vazia e aqui ele tá falando né que o a variável nome ela não está sendo usada Então tá dando esse erro aqui né então enfim tem muitas regras muitas coisas que a gente vai descobrindo né eu não vou ficar aqui falando todas as regras que tem que a gente vai descobrindo de acordo a gente foi desenvolvendo tá então com essas regras definidas
eu posso por exemplo pegar aqui ó o nome na verdade eu vou dar esse exemplo mais para frente né quando a gente chegar no freezer Mas seria a parte de configuração né que aqui no arquivo de configuração nós temos aqui o rules né que é onde a gente pode personalizar as regras né criar as minhas próprias regras de como eu quero as coisas tá então a gente consegue fazer por aqui e toda essa referência tá aqui na documentação certo de como configurar Então beleza é feito isso aqui é feita essa instalação do s20 tem só
mais um passo que não é excelente que nós podemos criar aqui um novo arquivo chamado ponto é excelente ignore certo e aqui nesse arquivo eu vou listar todos os arquivos ou diretórios que eu quero que seja ignorados pelo s20 então que o seu digitar index.js e salvar vai parar de dar erro aqui no meu arquivo index JS porque ele está sendo ignorado pelo ps20 tá então a gente tem essa possibilidade também de aplicar o s20 somente nos diretórios que nos interessa Beleza então feito isso com esse link agora eu vou tá falando aqui sobre o
trilha Então esse vídeo vou finalizar ele por aqui porque a gravação ficou realmente muito grande e a gente vai dividir em dois vídeos né esse vídeo aqui vai ser a configuração do s20 e no próximo vídeo A gente vai estar falando sobre a parte do trailer e finalizando a configuração de ambos Tá certo então para esse vídeo aqui vai ser isso tá 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]
