Como usar o VS CODE para programar? Guia COMPLETO e RÁPIDO!

Esse é o vs code um editor de texto criado pela Microsoft usado mundialmente por diversos e diversos programadores e programadoras nele é possível escrever editar códigos e também utilizar de várias ferramentas para facilitar o desenvolvimento e nesse vídeo eu vou mostrar para vocês como utilizá-lo passo a passo e lembrando que se você ainda não tem ele baixado basta você pegar no Google vs code você entra no primeiro link oficial e lá em cima vai ter opção de download você escolhe qual sistema operacional você vai utilizar para poder baixar E aí é next next next aquele aquela instalação bem padrão então bora entender como ele [Música] funciona e antes da gente ir pra parte técnica para falar do vs code eu sei que se Você clicou e está aqui nesse vídeo você provavelmente quer começar na área de programação na área de TI e sinceramente pessoal essa é uma área que tem um leque imenso de opções para você trabalhar desde desenvolvimento de software até segurança cibernética até Inteligência Artificial Eu por exemplo trabalho muito com front end né que é a parte visual quando a gente cria um site Mas você pode trabalhar com a tecnologia com o que você achar mais legal com o que mais te mover a única coisa que eu te falo é aprenda a estudar procure conteúdo organizado e atualizado para poder se basear por exemplo eu sei que na ebac existem vários cursos aí da área de TI como por exemplo Engenheiro frontend nesse curso que você entende qual tecnologia você tem que estudar para poder trabalhar nessa área quais tecnologias e não vai ser de forma jogada que nem aqui no YouTube acaba sendo um pouco né Por mais que eu t de criar diversos e diversos vídeos sobre o tema Eu sei que vocês ainda T que se achar tem que entender qual ver antes de outro num curso assim você já consegue ter tudo de forma organizada eles tem vários outros cursos também como desenvolvedor fsac com Java desenvolvedor fusac com python e também ter I do zero ao pro eu vou deixar o link aqui na descrição tem C de desconto também e o QR Code caso você já queira dar uma olhada aí em todas as opções que eles têm de educação eles possuem garantia de emprego em alguns cursos Então vale a pena dar uma olhada também tem parcelamento até 24 vezes e tutoria individual o que realmente é um grande diferencial pro seu aprendizado é muito legal não deixa de [Música] conferir na primeira vez que abrimos o vs code Muito provavelmente você vai se deparar com essa imagem então a gente vê aqui que tem uma aba aberta chamada Welcome E aí tem algumas opções para você poder clicar Então nesse start né para começar a gente pode criar um novo arquivo a gente pode abrir uma nova pasta e é isso que a gente vai fazer porque na prática normalmente você vai ter dentro de uma pasta todos os arquivos do seu projeto Então vamos lá eu vou clicar pra gente abrir uma pasta no meu caso eu não tenho nenhuma pasta então eu vou criar uma nova pasta mas se você já tiver você pode abrir a sua pasta do projetinho Vou colocar aqui esse nome mesmo mesmo clicamos em criar E aí abrir o vs code já vai carregar a nossa página aqui o que que vai acontecer aqui basicamente na nossa página de Welcome não mudou nada mas no canto esquerdo a gente já consegue ver o nome da nossa pasta projetinho Então ela já está aberta aqui no Nossa plataforma do vscode Vamos então criar o primeiro arquivo dentro dessa pasta eu vou clicar nesse simbolozinho do arquivo com o maizinho ou a gente poderia clicar em new file também enfim vamos criar o nosso primeiro arquivo dentro da nossa pastinha eu vou dar o nome de script PJS por quê porque vai ser um arquivo da linguagem JavaScript se você não sabe JavaScript tudo bem Eu tô só criando como exemplo para vocês entenderem como como utilizar o vs code então eu começo a escrever o meu código e olha só que legal eu já eu escrevi errado ali na primeira linha Mas ele já traz automaticamente Qual palavra eu quero utilizar e de fato eu tava tentando escrever console então basta você dar um e ele já vai completar para você eu posso pôr aqui o ponto log e se você quiser alguma das opções embaixo você vai mudando aqui com o teclado mesmo com a setinha para cima e para baixo mas no caso é o primeiro E aí você vai escrevendo o seu código isso é muito legal esse atalho e é uma ferramenta chamada int licens ele já vem com o vs code Beleza eu vou escrever aqui o resto do meu código Hello Word que para quem não sabe o que eu estou fazendo nesse código é imprimindo a frase hello world no meu com console vamos salvar o arquivo Eu normalmente salvo com o Command s mesmo ou control s e para visualizar esse resultado né JavaScript eu preciso abrir o console o terminal então eu vou aqui em cima na opção terminal e clico em new terminal ele vai abrir para mim aqui embaixo o terminal para poder executar cada linguagem de programação Muito provavelmente você vai ter que instalar algumas ferramentas diferentes Então você quer trabalhar com o Python você vai ter que instalar o Python você vai ter que tá lá algum gerenciador de arquivos isso daí é mais um conhecimento que você vai ter que ter na hora de estudar cada linguagem a fundo no meu caso eu vou utilizar o node que já está instalado aqui no meu computador então eu vou colocar node e eu coloco o nome do arquivo para poder executá-lo o node é uma ferramenta para poder executar aqui o JavaScript então eu vou clicar enter e não funcionou por quê Porque eu não salvei será é porque eu não tinha salvo o arquivo aí agora foi o Hello Word apareceu para mim no terminal O legal é que tinha uma bolinha aqui que mostra que não estava salvo o arquivo ainda então eu tive que dar o Command S de novo eu tô com problema no teclado com o s né não sei se dá para perceber aqui então por isso que eu acho que não tinha salvo se você quiser criar mais de um terminal você também pode colocar aqui nesse maizinho E aí você vai abrindo vários para poder executar diferentes comandos diferentes arquivos também aqui nessa Barra do lado esquerdo a gente tá utilizando essa primeira opção que é o Explorer então ele é o o gerenciador de arquivos mesmo onde a gente consegue visualizar aqui a nossa pasta Minimizar e maximizar e ver todos os arquivos que ela tem na segunda opção a gente tem essa lupa que é o search aqui você consegue escrever palavras frases termos ou padrões específicos e você consegue buscar isso tudo dentro do seu projeto ou em alguma pasta específica também então é bem legal se eu colocar aqui com console ele já vai me trazer olha no arquivo script JS a gente tá escrevendo esse console log e ele já traz aqui também então é bem legal deixa eu apagar aqui no terceiro opção da barra de atividades a gente tem o Source control que parece uma ramificação Zinha eu não sei exatamente como pode aparecer para vocês inicialmente essa essa opção porque eu já tenho eu acho logado o meu Git Mas para que que serve Exatamente é para você poder gerenciar poder controlar as versões do seu projeto utilizando uma ferramenta chamada Git com essa ferramenta você consegue salvar diferentes versões do código Às vezes você você fez é um botão novo você quer voltar atrás você consegue utilizando esse tal do Git se você quiser aprender um pouco mais sobre ele tem vídeo aqui no meu canal também gente passo a passo mostrando como é na prática e na teoria também então você vai fazer o seu login com o seu github você vai fazer isso tudo bonitinho a terceira opção é esse Run and debug que é execução e depuração aqui você consegue configurar iniciar processos aí de depuração de busca de bug né resolução de problemas também no seu cor código dá para ver variáveis criar Break points E inspecionar também o estado do seu programa enquanto ele é executado Muito provavelmente você também vai ter que e baixar e instalar algumas ferramentas dependendo da tecnologia que você utilizar aqui por exemplo como eu estou utilizando JavaScript ele já tá falando para eu criar o launch. js file que vai ser para eu poder colocar todas as configurações e tudo mais e aqui a gente tem o botão de extensões extensões nada mais são do que ferramentas que a gente instala no vs code para melhorar o nosso desenvolvimento então aqui a gente tem várias opções que ele já tá dando como por exemplo Python P lance Júpiter C c+ mais tem um monte de extensão importante que às vezes ajuda você a identificar mais fácil erros no seu código então às vezes você instala uma extensão que deixa coloridinho Quais são os parênteses ele mostra quando você acabou não colocando ponto e vírgula no final extensões que vão se comunicar com outras ferramentas então às vezes você tá querendo utilizar usar o github CoPilot por exemplo né para poder te ajudar durante o desenvolvimento você consegue instalar aqui nessas extensões e eu já vou mostrar para vocês na prática como que a gente vai instalar e utilizar uma extensão aqui embaixo a gente tem o botão de conta né eu já tô e logada aqui no meu github por exemplo e é legal porque às vezes as configurações que você instala de extensão e tudo que você configura no seu vs code você vai poder utilizar em outras máquinas fica meio que salva na sua conta na nuvem e aqui a gente tem de fato as o botão de de opções de configurações do nosso vs code eu vou falar também em breve sobre esse Command palet que também meu é uma ferramenta muito poderosa do nosso dessa plataforma aqui por exemplo se a gente clicar em settings a gente vai conseguir visualizar muitas e configurações que a gente pode fazer por exemplo aqui a gente tem fonte size a gente pode deixar a fonte dos nossos textos aí quando a gente tiver escrevendo maior menor pode escolher a fonte também de fato o tamanho do Tab quando a gente dá Tab quantos espaços que ele vai significar enfim isso daqui é um negócio para você parar Navegar e brincar um pouquinho dependendo do que que você quer fazer e aqui em cima você vai vendo que a gente tá já com várias Abas abertas a aba de configurações aqui a aba do nosso arquivo script e a aba do Welcome também esse Welcome a gente pode fechar agora pra gente brincar um pouco com mais arquivos né porque eu coloquei só um arquivo JavaScript Vamos criar mais um arquivo para vocês entenderem melhor que vai ser um arquivo. HTML então eu vou colocar rapidinho aqui um um código HTML né a gente pode colocar essa exclamação ele já vai criar pra gente previamente um uma estrutura de uma página HTML vou colocar um título aqui H1 que vai ser projetinho mesmo só pra gente poder entender algumas ferramentas do vs code mesmo vou salvar e aí como que a gente acaba executando por exemplo um HTML né que serve para estruturar uma página Web normalmente a gente vai no nosso f né o nosso gerenciador de arquivos vai na pasta que tá o nosso arquivo HTML primeiro deixa eu salvar ó que ele tá com a bolinha aqui branca agora salvou o s tá com problema eu posso clicar no index HTML e ele vai abrir no navegador para mim o que eu digitei que de fato falei que eu ia colocar um título projetinho também se você quiser aprender mais sobre HTML Quais são as tags Como construir uma página mesmo aqui no canal tem conteúdo e ainda vai sair muito em breve mais mas porém todavia Vamos então utilizar uma ferrament que a gente pode instalar aqui como extensão do nosso vs code que as pessoas que brincam muito com front end né desenvolvem aí com HTML JavaScript SSS a gente usa muito que é o Live server eu tô fazendo isso daqui para mostrar para vocês como que a gente também instala e utiliza as extensões no vest code então eu clico aqui no Live server que é o primeiro clico em instalar ele vai instalando para mim e pronto eu posso fechar já a aba da extensão do Live server posso voltar aqui no meu gerenciador de arquivos aqui e também no canto inferior direito a gente tem algumas informações legais né a linguagem que a gente tá utilizando qual linha qual coluna enfim a gente pode clicar aqui nesse go Live que apareceu depois que a gente instalou o Live server quando a gente clica em go Live automaticamente ele vai criar um servidor local Bem Simples então agora a gente tá aqui ó no 127.

0 p0. 1 é na porta 5500 e no arquivo index. html.

gz por exemplo é que a gente pode dividir aqui a nossa tela E aí Ir mudando projetinho novo Dá até pra gente configurar um auto save aí quando eu salvar ó ele já vai mudando automaticamente aqui então durante o o projeto assim que você tá desenvolvendo com HTML CSS e tal é bem útil bem legal de usar esse Live server então é uma das extensões que a gente pode colocar aí para usar outra coisa legal também eu vou até fechar aqui né minimizar o nosso projetinho só para mostrar para vocês é que a gente pode dividir de os próprios arquivos ó eu puxei aqui a aba do arquivo HTML eu posso colocar aqui na direita e ó aqui fica o arquivo JavaScript na esquerda e na direita o HTML uma coisa também que a gente faz muito no vscode é instalar diferentes temas para deixar coloridinho e mais bonitinho o nosso editor Eu por exemplo gosto muito do ballerini theme que tem exatamente as cores que eu mais gosto né foi desenvolvida ali pelos administradores lá da comunidade do discord que eu tenho Mais especificamente o alfa e e eu posso clicar aqui em instalar e ele já vai instalar para mim o tema e já colocou também você pode set color theme e você pode habilitar desabilitar mas no caso aqui ó ele já colocou para mim o tema balerine que eu acho lindo marronzinho também olha só quanta gente que já baixou gente 29.