VS Code para Iniciantes

se você está começando a programação agora uma das principais coisas que você precisa é de uma ideia ou ambientes de desenvolvimento integrado para que você possa criar executar e testar os seus códigos Sem sofrimento e aí que entra o vs code hoje vou abordar tudo que você iniciante precisa saber sobre ele desde a instalação configuração e até dicas e truques que vão te ajudar a ter maior produtividade enquanto estiver rodando Então fique até o final para você não perder nada eu sou Roger Santos Bora pro vídeo o visual Studio code mais conhecido como vs code

é um editor de código envolvido pela Microsoft e ele é uma ferramenta poderosa que combina a simplicidade no editor de texto com que há de mais moderno inteiro de funcionalidades para desenvolvimento de software ele não apenas é gratuito e de código aberto mas também oferece uma série de características que facilitam a sua vida como desenvolvedor como destacamento de sintaxe e conclusão automática de código integração com Git e uma vasta quantidade de tensões que pode ser adicionadas para personalizar sua experiência aí de codificação aliás são essas intenções aí que fazem com que o vs code seja

a escolha da maioria dos desenvolvedores pois isso permite que você consiga configurar e personalizar code para praticamente qualquer Lin de programação ou tecnologia que você esteja trabalhando instalar o vscold a super simples ele roda no Windows roda no Mac roda no Linux e roda até na web se você preferir e para baixar o vscode é só você visitar o site oficial aqui code.orstudio.com/downloads que já separa aqui pelo Centro nacional que você tá utilizando então se você tem o sistema operacional Windows você abaixo do Windows aqui se você tem Linux Você pode baixar ele para Debby

Ubuntu também pode baixar para Red Heads Fedora Suzy ou qualquer outra distrito se você tiver utilizando e também para Mac né No meu caso aqui eu tô no Mac Mas qualquer outra sem profissional que você tiver utilizando a instalação é super parecida assim não tem segredo não tem mágica tá é só você baixar o arquivo next next next finish e tá instalado tá vamos baixar ele pra Mac aqui e aí com ele instalado basta você abrir o arquivo aqui que o vs code já vai estar funcionando como vocês podem ver aqui mas antes a gente

começar a explorar esse code aqui eu quero mostrar para vocês também rapidamente aqui a versão web que nós temos pra vocês essa versão vs Cold ponto deve Você pode pesquisar aqui ou buscar no Google começar esse link aqui tá E essa versão web que ela pode ser uma versão conveniente aí para você fazer edições rápidas quando você tá usando o computador aí sei lá que não tem o vscold mas para você ter uma experiência completa do vs code aí eu recomendo que você utilize ele instalado tá porque ele tem mais recursos aí ele é mais

completo do que essa versão web Tá bom então Voltamos para o nosso vs code aqui né com ele instalado basta você dar dois cliques ali no ícone do vsco Code e que o universo code É esse aqui e ele vai abrir uma tela parecida com essa Pode ser que ele esteja com essa Barrinha aberta e alguns textos aqui Dependendo da forma que você está abrindo mas é algo muito similar isso tá então com ele aberto agora a gente vai fazer algumas configurações aí para que você possa começar a utilizar ele para codificar tá bom o

primeiro deixa eu mostrar para vocês como a interface do vscol tá primeiro nós temos aqui a nossa aba de atividades logo que você instala ele vai ter o Explorer vai ter sorte vai ter um certo controle aqui e também vai ter o extensions acho que todas essas outras aqui são com base de extensões que eu instalei tá pode ser que tu venha mais ou venha menos aqui dependendo como você instalou aí tá bom mas aqui onde você navega por exemplo Explorer Onde estão os arquivos A lupinha onde você faz a busca né você faz pesquisa

de arqu pode alterar códigos etc aqui a integração conguite nós não vamos ver o Git agora mas você também pode integrar o teu Git né conectando seja no githubit Lab qualquer ferramenta de direcionamento de código que você tiver utilizando com o Git é direto no teu vsco code aqui você tem a parte de the bug né para você conseguir depurar né e executar o teu código testar ele ter uma execução para descobrir problemas e temos aqui aba de extensões também aqui que aba onde nós vamos instalar diversos intenções para configurar e personalizar o vscold o

nosso uso no dia a dia tá bom e tem outras Abas aqui mas cada uma dessas aqui específica e extensões que eu instalei tá são específicas do meu ambiente de desenvolvimento temos a sábado meio aqui que você tá vendo aqui que ela não tem nada mas basicamente aqui onde você vai escrever todo o código de qualquer linguagem que você for trabalhar tá então você vai passar a maior parte do seu tempo aqui dentro dessa telinha aqui codificando e navegando entre arquivos diferentes aqui você pode abrir aqui uma Tita enquanto barra um aqui que esse arquivo

que eu acabei de criar dando dois cliques nele aqui tá Além disso eu tenho também essa aba aqui embaixo onde eu posso ver problemas de bug terminal é bem importante na maioria das linguagens você vai utilizar o terminal para executar comandos aqui você conecta direto ou seja no prompt do prompt de comando do Windows ou no Dash ou no terminal direto do do Linux do Mac tá bom E também temos aqui a abinha superior aqui igual qualquer programa que você instalar né então não tem Fire Edith selection View mas aí vai caber a vocês explorar

cada uma dessas opções que tem ali em cima não é nada muito diferente dos outros programas que você já utiliza tá Lembra que eu te falei que o scood personalizável com ele Você pode trocar as cores Fontes tamanhos etc Além disso ele também permite que você mude o tema de acordo com a sua preferência eu pessoalmente eu gosto muito do tema Drácula vamos instalar esse tema aqui agora existem diversos outros temas tá Eu particularmente gosto muito do Drácula porque primeiro pela estética que ela é bem agradável e ele é mais suave para os olhos ali

se você vai ficar muito tempo qualificando Acho que é bem legal pra utilizar pra instalar ele aqui basta você vir aqui dentro e procurar por Drácula oficial e ele vai trazer esse tema aqui ó você é bom você ver esse selinho que esse selinho vê que ele é certificado pela própria Microsoft tá então você vai ver que ele já tá instalado né então no teu caso basta você instalar ele e ele já vai funcionar com o tema Drácula tá bom E como eu falei existe em diversos outros temas aí você pode até dar uma pesquisada

Mas você vê que tem uma infinidade de temas diferentes aí que você pode personalizar aí o TVs code para deixar a tua cara tá Eu gosto bastante desse outra coisa interessante do vs code é que ele permite que você personalize o layout da janelas que você tá utilizando o teu ambiente de trabalho tá isso vai seguir as suas necessidades específicas Eu gosto bastante de dividir que eu tô com monitor um pouco menor mas com monitor ultrawide Eu gosto bastante de dividir em duas janelas aqui então você pode arrastar ele dividir ela aqui e jogar para

cá ó então ele divide em duas janelas pode ser que eu tenha uma janela por exemplo mostrando o meu código e outra mostrando o Live preview né que a parte o HTML sendo escrito e mostrando o meu site como tá ficando Ou posso partilhar um qualquer outra ferramenta Eu posso também mudar ele para baixo para cima para baixo aqui ó dividir na horizontal na vertical posso também esconder a bala lateral aqui posso esconder o nosso terminal aqui embaixo posso abrir e fechar também aqui o preview né que aqui nesse caso teria que arrastar o previu

para cá mas posso esconder ele aqui e posso personalizar da forma que eu quiser aqui o meu vs code também tá bom vou deixar para vocês explorarem isso também bom feito isso agora você conhece básico ali do vs code como que a estrutura como que ele funciona vamos instalar algumas extensões nele para deixar ele mais poderoso né então como eu falei para vocês O que torna o vscold tão poderoso Realmente são as extensões que existem extensões para Praticamente tudo que você possa imaginar tá elas permite que você adicione aí uma enorme variedade de funcionalidade no

seu ambiente de desenvolvimento e aí como nós já vimos aqui na extensão Drácula vai você encontrar extensões novo Scott é super simples você vem nessa caixinha aqui com a caixinha pulando fora aqui e ele vai abrir essa aba e basta você Pesquisar pelo nome da extensão que você quer e assim ele também já vai trazer algumas recomendadas algumas que ele já deu no meu caso as minhas já instaladas e eu posso pesquisar por outras não estão instaladas ainda e instalando dentro do meu SS code tá E é assim que você escolhe uma extensão que você

quer instalar basta você clicar no install aqui se ele precisar reiniciar ou ter vergonha vai fazer isso sozinho ou vai pedir para você se ele pode reiniciar e ele fecha e abre ele já vai estar funcionando a atenção eu não vou instalar essa aqui do Firefox porque eu não uso Firefox tá só peguei ela aqui para mostrar para vocês e assim dependendo da linguagem de programação com vocês estavam utilizando existem extensões que podem ser especialmente úteis tá por exemplo a primeira script ali nós temos esse link temos o TW pra parte nós temos o Python

e o Júpiter para Java nós temos o Lango de suporte para Java que foi desenvolvido pela red Hatch nós temos the Burger do Java e uma infinidade para cada uma das linguagens mesmo você vai encontrar coisas específicas como você pode ver alguns que eu tenho instalado aqui por exemplo eu uso muita coisa relacionado a a WS né a Amazon Web Services Então eu tenho ela aqui eu uso também toda a minha parte de containerização na integração do vscode com o docker Então dependendo o que tem inclusive que a extensão do docker Então dependendo da linguagem

que você está utilizando Realmente você vai precisar de extensões diferentes tá e dado que cada linguagem tem suas particularidade seria bastante benéfico aí que você busca tutoriais específicos para configurar o ambiente da linguagem na qual você está trabalhando ou senão você pode comentar aqui embaixo as intenções ou linguagens que você utiliza e quem sabe nós podemos fazer mais vídeos é específico sobre cada uma delas Mas além disso também Existem algumas aqui que eu recomendo independente da linguagem que você tiver trabalhando tá primeiramente é o Live Surfers Live Surfer Live preview sempre me confundo aqui tem

as duas tá lá nós temos a Live Surfers ela é muito utilizada Mas eu particularmente eu prefiro a Live preview porque é que eu prefiro Live de ouvido pela própria Microsoft quem desenvolveu o vscold então eu prefiro ela aqui o lance preview basicamente ele traz deixa eu abrir uma outra outro projeto aqui para mostrar para vocês Live preview ele traz um servidor web para você conseguir ver em tempo de execução Conforme você tá codificando o tempo de codificação você vê o resultado do que você tá fazendo né você pode fazer isso clicando nesse íconezinho aqui

do show preview ele já vai trazer aqui para você né o HTML está sendo criado por exemplo aqui vamos colocar aqui um H1 Olá já consegue ver o teu código sendo exibido aqui né pra web era bem útil essa extensão você pode também pegar esse endereço aqui e jogar no teu navegador que ele vai funcionar também então você consegue ver ele foi excluir também tá o segundo que eu recomendo é o Git Lens Eu até tenho ele instalado aqui ó só que ele não tá porque como esse código aqui não tá em nenhum repositório guitcho

mas se você for integrar com o Git o gentillaser bastante interessante porque ele te ajuda a identificar Quando foi feita por que que foi feita Qual foi a alteração que foi feita no código por linha aqui aqui na linha ele já vai dizer quando foi o último modificação quem fez essa modificação e relacionado ao que que era se ele tiver bem documentado Então ela é uma extensão que é bem útil também tá tem também o Color pic ele Eu Gosto bastante dela para quando eu tô trabalhando com CSS deixa eu abrir mesmo para vocês o

Color picker ele abre uma abinha aqui ó se você for ver aqui ó ele abre essa caixinha para que você possa selecionar uma cor que você deseja pro teu CSS sem você ter que ficar adivinhando Qual que é o hexadecimal ali você pode usar o Color pic para poder selecionar essa cor temos também o pritcher aqui o print ele não tem certeza se ele já vem eu acho que nas últimas versões da Escolha ele já tá vindo instalado no vs code tá porque ele é bem útil ele é um formatador de código aí que ajuda

a manter o código limpo e consistente bem útil para JavaScript CSS e as derivações deles tá então também recomendo que você instale ele e por último nós temos o vs Cold Pets vs Gold É isso mesmo do Anthony basicamente Ele arrumou um Company para você aqui você vai ter um petzinho aqui ó como você pode ver ó você vai ter um petzinho enquanto você tá rodando você tá rodando ele vai ficar andando lá e pra cá e tal você pode até configurar para você com o mouse e conseguir jogar a bolinha para ele buscar e

tem vários tipos de pets diferentes Esse é um dos uma das extensões que que ajuda na funcionalidade ali e tal não no final do dia não ajudam na você pode ficar melhor ou na agilidade do teu código mas deixa o teu estabilidade de codificação um pouco mais divertida tá e tem esse tem outros outras sensões que fazem isso também tá E além disso Vale lembrar você também que é uma boa prática você manter sempre as pessoas extensões atualizadas tá então sempre que possível eu deixo o meu para ele atualizar automaticamente então ele sempre tá com

as versões novas às vezes ele pede para que eu reinicie o vscold só porque ele já instalou uma versão nova mas é legal você ver as opções que precisam ser instaladas aqui você pode fazer update nele pode desabilitar caso você não queira uma e você pode desinstalar o reinstalar alguma versão ou instalar Até uma versão específica caso você queira aqui das suas intenções e é isso aqui é tudo na aba das extensões tá aí a gente concluir aqui a aba de extensões eu quero falar sobre o emity Eu acho que o emity já vem junto

também ele já vem junto não é nem mais atenção o emitir ele é uma uma ferramenta que já vem integrada no vs code ele permite que você escreva HTML CSS ali ou outras linguagem de marcação de uma forma mais rápida usando abreviações que são expandidos pra tates de código completo como por exemplo aqui deixa eu abrir o código dele mostrar para vocês aqui deixar esse código vazio aqui eu só vou apagar aqui pra mostrar pra vocês se eu colocar aqui um exclamação e de um ted ele já vai montar para mim todo o meu minha

estrutura básica do HTML outras coisas que eu posso fazer aqui por exemplo são os aqui ó divi o l Li e eu quero que ele tenha cinco linhas a hora que eu dou o tab ele já monta para mim aqui ó divide dentro dela tem uma L dentro da L eu tenho cinco linhas então Isso facilita muito na escrita do código você ganha muito tempo tá então é bem legal vocês darem uma olhada também no mix ele já vem instalado Tem 99,9% de certeza que ele já vem com o teu vs code mas é legal

você dar uma olhada e entenderem todos esses nipts que ele te ajuda a escrever para que fique mais fácil você codificar e mais rápido para você desenvolver você ver aqui quanto tempo levaria pra nós escrevermos todo esse código aqui foi tão simples para fazer a mesma coisa com o nosso exclamação aqui beleza foi agora vamos falar aqui sobre como criar um projeto né ou abrir um projeto existente no vs code Você pode abrir ele direto pela pasta Mas eu particularmente eu prefiro vir aqui direto pelo vs code Então a primeira coisa que eu faço eu

venho abro a primeira escolha deixa eu fechar esse cara aqui primeiro esse povo está aberto aqui você pode ver que na nossa spoiler que tá vazio tá então vem aqui em faio e você pode vir aqui ou tem folder para você abrir um projeto E aí nesse caso você pode selecionar o projeto Pode criar projeto por exemplo posso criar uma nova pasta aqui projeto teste e aí eu dou um Open nessa pasta aqui ele vai abrir Vou confiar nele aqui ele vai abrir o nosso o nosso projeto aqui só que o Explorer ainda tá vazio

porque não tem no arquivo nele na sua criamos a pasta Vamos criar um arquivo dentro dele aqui para que você possa ver um index ponto HTML por exemplo e Aqui nós temos Já o nosso arquivo HTML que está sendo automaticamente salvo também vou mostrar isso para vocês mas ele tá conforme eu tô fazendo ele está sendo salvo dentro desse nosso projeto teste que é aquela pasta Que Nós criamos tá você pode fazer isso diretamente por aqui ou como eu falei direto pelo Windows tá então lá pelo Windows Você pode abrir a pasta botão direito e

abrir no code que ele vai abrir esse projeto da mesma forma também tá e pra projetores existentes é a mesma coisa você pode vir aqui direto no open folder e abrir a pasta com o projeto que já existe ou aqui nos recentes eu uso bastante recentes por exemplo aqui os últimos cursos que nós gravamos aqui até um spoiler pra vocês até mesmo CSS tá escrito projetos npm e muitos outros projetinhos ali que nós temos rodando então basta você clicar ali que ele já vai abrir o projeto pra você tá bom bom e assim para você

editar o código não tem segredo é que control c control V control x o mesmo os atalhos que você sabe copiar você vai colar que você já utiliza no teu código Tá mas o scode usa esses atalhos também com esteroides porque ele tem outras funções né outras funcionalidades dentro dele como por exemplo a edição de código multininha por exemplo aqui se nós pegarmos dentro desse HTML que apertarmos out shift e selecionarmos uma outra linha você vai ver que ele selecionou aqui as quatro linhas aqui e agora o que eu digitar aqui ele vai digitar nas

quatro Então você consegue editar mais de uma linha ao mesmo tempo tá essa é uma das outras funcionalidades que o vscou de trás tá ao shift ou option shift no caso do Mac tá vamos apagar as quadrinhos aqui e também existe uma forma de você pesquisar e alterar né o conteúdo de um arquivo seja ele dentro de um arquivo ou de forma Global vou mostrar os dois para você aqui também tá bom primeiramente o control F né o combo de F no Mac você vai fazer um finde aqui então vou procurar por document ele vai

achar aqui ó e aí eu posso só buscar nele aqui ou eu posso fazer o replace por Roger aqui por exemplo e eu faço o replace desse conteúdo aqui ele alterou o conteúdo aqui para mim então você precisa entender do arquivo ou eu posso e pelo Explorer vindo direto aqui pelo pesquisado aqui na luvinha ou utilizando atalho que é o que é o control shift f contra o shift F ele abre diretamente essa barra aqui e eu posso pesquisar aqui por exemplo o Roger ele já vai trazer como só tenho esse arquivo ele vai mostrar

aqui mas se eu tivesse mais arquivos que tivessem Roger aqui ele está todos os arquivos eu poderia ir aí em cada um dos arquivos ou terá manualmente ou também fazer o replace né trocar uma informação por outra e tal dentro do meu código tá bom nesse caso aqui é grande diferença aqui usando Ctrl F ou como um F você busca no arquivo e o contra o shift F você faz a busca Global quem todos os arquivos que estão dentro do teu projeto tá bom bom agora que vocês já conhecem é fundo como utilizar o vs

code ali praticamente as ferramentas básicas dele eu quero compartilhar com vocês algumas dicas de truques aí que pode levar a tua experiência conversa com o de ir pra outro nível começando pelos atalhos tá Primeiro contra o p você pode selecionar um arquivo para abrir nesse caso aqui ele já trouxe como só tem esse arquivo ele traz aqui mas aqui eu posso buscar e abrir arquivos de forma mais rápida sem ter que ficar navegando numa estrutura complicada que é uma estrutura complexa de arquivos tá tem também contra o shift ele abre a paleta de comandos que

aqui eu consigo configurar tudo dentro do meu vs code todas as configurações que eu que eu utilizo eu consigo fazer por essa paleta de comandos aqui tenho também o alt no meu caso eu acho que é óbvio é o alt setinha para baixo e para cima eu consigo mudar um código de posição aqui ó vamos escrever aqui ó Roger Out para baixo para cima eu consigo mudar a linha posso utilizar também o control D no Mac Command D para selecionar a linha então eu coloco exatamente onde eu quero que ele selecione ele seleciona tudo então

coloquei em cima do Head ele vai selecionar todo o Red porque no meio do R aqui ele coloca seleciona todo R coloquei no meio do charsete ele seleciona todo chat pra eu facilitar não copiar alterar o que eu precisar fazer tá bom E também o comando que vocês mais me pedem aqui nos comentários que é como comentar e diz comentar várias linhas ao mesmo tempo tá vamos lá comentar várias linhas contra o KC ou control k u para nos comentar essa funciona tanto no Windows quanto no Mac e eu acredito que também funciona no Linux

também E aí nós temos também um atalho dele que é uma única tecla para comentar esses comentários no Mac é Command de barra eu comento esse código no Windows eu tô no Mac aqui no Windows se eu não me engano coma de ponto é contra o ponto tá então no Mac comum de barra no Windows contra o ponto a mesma tecla pra você comentar todos os códigos várias linhas que você selecionou aqui tá bom E além disso tem uma configuração aqui que eu recomendo a minha o meu já tá habilitado aqui mas eu recomendo fortemente

que você habilite essa opção aqui você vem no File aqui em Alto save ou alto salvar automaticamente eu acho que em português se eu não me engano tá então eu gosto muito de deixar ela habilitado que com isso evita que eu esqueça de salvar arquivos e fique lá batendo cabeça testando um código que eu não salvei tá isso acontece já aconteceu muitas vezes com outros editores que eu utilizava ou até mesmo antes de utilizar o outro save dentro do vsco Code Então vem Cássio Então a gente vai habilitado A bit aqui pra saber se o

teu habilitado ou não você vai escrever seu código se ele ficar uma bolinha branca aqui porque ele não tá salvando automaticamente tá então aqui eu terminei esse código ele já salvou para mim tá e se você achou esse vídeo útil aí por favor não esqueça de se inscrever em nosso canal aí deixar um like isso nos ajuda aí alcançar mais pessoas e continuar criando conteúdos como esse E agora tem dois vídeos aqui na tela Escolhe um deles e continua assistindo os vídeos do canal e é isso aí abraço pessoal e Happy code