Se você está começando na programação agora, uma das principais coisas que você precisa é de uma IDE, ou Ambiente 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 eu vou abordar tudo o 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 codando.
Então fique até o final para você não perder nada. Eu sou o Roger Santos, bora para o vídeo. O Visual Studio Code, mais conhecido como VS Code, é um editor de código desenvolvido pela Microsoft e ele é uma ferramenta poderosa que combina a simplicidade de um editor de texto com o que há de mais moderno em termos 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, conclusão automática de código, integração com Git e uma vasta quantidade de extensões que podem ser adicionadas para personalizar sua experiência de codificação. Aliás, são essas extensões que fazem com que o VS Code seja a escolha da maioria dos desenvolvedores, pois isso permite que você consiga configurar e personalizar o VS Code para praticamente qualquer linguagem de programação ou tecnologia que você esteja trabalhando. Instalar o VS Code é super simples, ele roda no Windows, roda no Mac, roda no Linux e roda até na web se você preferir.
E para baixar o VS Code é só você visitar o site oficial. oficial aqui, code.visuastudio.com ou code.visuastudio.com barra download, gosto da barra download que ele já separa aqui pelo sistema operacional que você está utilizando. Então se você tem o sistema operacional Windows, você baixa o do Windows aqui, se você tem Linux, você pode baixar ele para Debian e Ubuntu, também pode baixar para Red Hat, Fedora, Suzy ou qualquer outra distro de Linux que você estiver utilizando e também para Mac, né? No meu caso aqui, eu estou no Mac, mas qualquer outro sistema operacional que você estiver utilizando, a instalação é super parecida, assim, não tem segredo, não tem mágica, é só você baixar o arquivo, next, Finish e está instalado, tá? Vamos baixar ele para 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 da gente começar a explorar o VS Code aqui, eu quero mostrar para vocês também rapidamente aqui a versão web que nós temos do VS Code. Para você acessar a versão web do VS Code é vscode.dev.
Você pode pesquisar aqui ou buscar no Google que VS Code deve, ele vai acessar esse link aqui, tá? E essa versão web aqui, ela pode ser uma versão... conveniente para você fazer edições rápidas quando você está usando o computador e sei lá que não tem o VS Code 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 Basta você dar dois cliques ali no ícone do VS Code, ícone do VS 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 a 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? Bom, primeiro deixa eu mostrar para vocês como é a interface do VS Code, tá?
Primeiro nós temos aqui a nossa aba de atividades. Logo que você instala ele, vai ter o Explorer, vai ter o Search, vai ter um Search Control 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 eu venha mais ou venha menos aqui, dependendo de como você instalou aí, tá? tá bom?
Mas aqui é onde você navega, por exemplo, o Explorer, onde estão os arquivos, a lupinha, onde você faz a busca, né, o search, onde você faz pesquisa de arquivos e pode alterar códigos, etc. Aqui, a integração com o Git, nós não vamos ver o Git agora, mas você também pode integrar o teu Git, né, conectando, seja no GitHub, GitLab, qualquer ferramenta de versionamento de código que você estiver utilizando com o Git, direto no teu VS Code aqui. Você tem a parte de debug, né, pra você conseguir depurar, né, e executar o teu código, testar ele em tempo de execução pra descobrir problemas. E temos aqui a aba de extensões também aqui, que é a aba onde nós vamos instalar diversas extensões pra configurar e personalizar.
para finalizar o VS Code para o nosso uso no dia a dia, tá bom? E tem outras abas aqui, mas cada uma dessas aqui é específica a extensões que eu instalei, tá? São específicas do meu ambiente de desenvolvimento.
Temos essa aba do 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 ver que abriu aqui o untitled.
untitled barra 1 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, output, terminal. Terminal é bem importante.
importante, na maioria das linguagens você vai utilizar o terminal pra executar comandos, aqui você conecta direto, seja no prompt do prompt de comando do Windows ou no Bash ou no terminal direto do Linux e do Mac, tá bom? E também temos aqui a abinha superior, igual a qualquer programa que você instalar. Então tem File, Edit, Selection, View. Mas aí vai caber a você explorar cada uma dessas opções que tem ali em cima.
Mas não é nada muito diferente dos outros programas que você já utiliza. Lembra que eu te falei que o VSCode é 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 gosto muito do tema Drácula. Vamos instalar esse tema aqui agora. Existem diversos outros temas.
Eu particularmente gosto muito do Drácula. Porque, primeiro, pela estética, que ele é bem agradável. e ele é mais suave para os olhos ali, se você vai ficar muito tempo codificando, eu acho que é bem legal para utilizar. Para instalar ele aqui, basta você vir aqui em Extensions e procurar por Drácula Oficial.
E ele vai trazer esse tema aqui. É bom você ver esse selinho, porque esse selinho vê que ele é certificado pela própria Microsoft. Então você vai ver aqui que ele já está instalado. 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, existem diversos outros temas aí.
Você pode até dar uma pesquisada na internet. Você vai ver que tem uma infinidade de temas diferentes aí que você pode personalizar aí o teu VS Code pra deixar a tua cara, tá? Eu gosto bastante desse. Outra coisa interessante do VS Code é que ele permite que você personalize o layout das janelas que você tá utilizando no teu ambiente de trabalho, tá? Isso vai seguir as suas necessidades específicas.
Eu gosto bastante de dividir, que eu tô com um monitor um pouco menor, mas com um monitor ultra-wide, eu gosto bastante de dividir em duas janelas aqui. Então você pode arrastar ele, dividir ela aqui e jogar pra 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, que é a parte, o HTML sendo escrito e mostrando o meu site como está ficando. Ou posso markdown 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 aba lateral aqui, posso esconder o nosso terminal aqui embaixo. Posso abrir e fechar também aqui o preview, né?
Que aqui nesse caso eu teria que arrastar o preview 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 o 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 VS Code tão poderoso realmente são as extensões, que existem extensões para praticamente tudo que você possa imaginar.
Elas permitem que você adicione uma enorme variedade de funcionalidades no seu ambiente de desenvolvimento E aí como nós já vimos aqui na extensão Drácula Para você encontrar extensões no VS Code é 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á tem, no meu caso as minhas já instaladas, e eu posso pesquisar por outras que não estão instaladas ainda e ir instalando dentro do meu VS Code, tá? E aí assim que você escolhe uma extensão que você quer instalar, basta você clicar no Install aqui.
Se ele precisar reiniciar o teu VS Code, ele vai fazer isso sozinho, ou vai pedir pra você se ele pode reiniciar, e aí fecha e abre e já vai estar funcionando a tua extensão. Eu não vou instalar essa aqui do... Firefox porque eu não uso Firefox, tá?
Só peguei ela aqui pra mostrar pra vocês. E assim, dependendo da linguagem de programação que você está utilizando, existem extensões que podem ser especialmente úteis, tá? Por exemplo, pro JavaScript e pro TypeScript ali nós temos o S-Link, temos o Preacher. Pra Python nós temos o Python e o Jupyter.
Pra Java nós temos o Language Support pra Java, que foi desenvolvido pela Red Hat. Nós temos o Debugger do Java e uma infinidade. Pra 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 relacionada à AWS, né? Amazon Web Services. Então eu tenho ela aqui.
Eu uso também toda a minha parte de containerização, na integração do VS Code com o Docker. Então dependendo, tem inclusive aqui a extensão do Docker. Então dependendo da linguagem que você está utilizando, realmente você vai precisar de extensões diferentes. E dado que cada linguagem tem suas particularidades, seria bastante benéfico que você buscasse tutoriais específicos para configurar o ambiente da linguagem na qual você está trabalhando.
Ou senão você pode comentar aqui embaixo as extensões ou linguagens que você utiliza e quem sabe nós podemos fazer mais vídeos específicos sobre cada uma delas. Mas além disso, também existem algumas aqui que eu recomendo, independente da linguagem. que você estiver trabalhando, tá? Primeiramente é o Live Server. Live Server ou Live Preview?
Eu sempre me confundo aqui. É que tem as duas, tá? Live...
É, nós temos a Live Server, ela é muito utilizada, mas eu particularmente eu prefiro a Live Preview. Por que eu prefiro a Live Preview? Porque ela foi desenvolvida pela própria Microsoft, quem desenvolveu o VS Code, então eu prefiro ela aqui.
O Live Preview, basicamente, ele traz... Deixa eu abrir um outro projeto aqui para mostrar para vocês. O Live Preview, ele traz um servidor web para você conseguir ver em tempo de execução. Conforme você está codificando em tempo de codificação, você vê o resultado do que você está fazendo.
E você pode fazer isso clicando nesse iconezinho aqui do Show Preview. Ele já vai trazer aqui para você o HTML que está sendo criado. Por exemplo, aqui vamos colocar um H1. Olá, você já consegue ver o teu código sendo exibido aqui para a web. Ela é bem útil essa extensão.
Você pode também... também pegar esse endereço aqui e jogar no teu navegador que ele vai funcionar também, então você consegue ver ele fullscreen 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 Git, mas se você for integrar com o Git, o Git Lens é bastante interessante, porque ele te ajuda a identificar quando foi feita, por que foi feita, qual foi a alteração que foi feita no código por linha, aqui na linha ele já vai te dizer quando foi a última modificação, quem fez essa modificação e relacionado ao que era, se ele estiver bem documentado. Então ela é uma extensão que é bem útil também, tá? Tenho também o Color Picker, eu gosto bastante dela pra quando eu tô trabalhando com CSS, Deixa eu abrir minhas extensões aqui Mostrar 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 para o teu CSS Sem você ter que ficar adivinhando qual é o hexadecimal Você pode usar o Color Picker para poder selecionar essa cor Temos também o Preacher Deixa eu abrir o Preacher aqui O Preacher eu não tenho certeza se ele já vem Eu acho que nas últimas versões do VS Code ele já está vindo instalado no VS Code Porque ele é bem útil Ele é um formatador de código que ajuda a manter o teu código limpo e consistente Bem útil para JavaScript, TypeScript, CSS e as derivações deles, tá?
Então, também recomendo que você instale ele. E por último, nós temos o VS Code Pets. VS Code Pets.
Eu achei assim que se digita. Isso mesmo, do Anthony Shaw, que basicamente ele arruma um companion pra você aqui, você vai ter um patchzinho aqui, como você pode ver, você vai ter um patchzinho enquanto você tá codando, você tá codando ele vai ficar andando pra lá e pra cá e tal, você pode até configurar pra você com o mouse conseguir jogar bolinha pra ele buscar, e tem vários tipos de patches diferentes, esse é uma das extensões que ajudam na funcionalidade ali e tal, no final do dia não ajudam na você codificar melhor ou na agilidade do teu código, mas deixam o teu... ...tabilidade de codificação um pouco mais divertida, tá?
E tem esse e tem outras extensõ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 suas extensões atualizadas, tá? Então, sempre que possível, eu deixo o meu para ele atualizar automaticamente.
Então, ele sempre está com as versões novas, às vezes ele pega... para que eu reinicie o VS Code só, porque ele já instalou uma versão nova. Mas é legal você ver as opções que precisam ser instaladas.
Aqui você pode fazer o update nele. Pode desabilitar caso você não queira uma. E você pode desinstalar ou reinstalar alguma versão.
Ou instalar até uma versão específica, caso você queira aqui das suas extensões. E isso aqui é tudo na aba das extensões. Ah, e antes de concluir aqui a aba de extensões, eu quero falar sobre o Emmet. Eu acho que o Emmet já vem junto também. É, ele já vem junto.
Ele não é nem uma extensão. O Emmet, ele é uma... uma ferramenta que já vem integrada no VS Code.
Ele permite que você escreva HTML, CSS ou outras linguagens de marcação de uma forma mais rápida, usando abreviações que são expandidas para textos de código completo, como por exemplo aqui. Deixa eu abrir um código do HTML e mostrar para vocês aqui. Deixa esse código vazio aqui, eu só vou apagar aqui para mostrar para vocês. Se eu colocar aqui um exclamação e der um tab, ele já vai montar para mim toda a minha estrutura básica do HTML. Outras coisas que eu posso fazer aqui, por exemplo, são usar aqui, div, o L, li, e eu quero que ele tenha cinco linhas.
A hora que eu dou o Tab, ele já monta para mim aqui, ó, div, dentro dela tem uma ul, dentro da ul 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 Emity. Ele já vem instalado, eu tenho 99,9% de certeza que ele já vem com o teu VS Code, mas é legal vocês darem uma olhada e entenderem todos esses snippets que ele te ajuda a escrever para que fique mais fácil você codificar e mais rápido para você desenvolver. Você vê que quanto tempo levaria para nós escrevermos todo esse código aqui, foi tão simples para fazer.
A mesma coisa com o nosso exclamação aqui, beleza? Bom, e agora vamos falar aqui sobre como criar um... um projeto, ou abrir um projeto existente no VS Code. Você pode abrir ele direto pela pasta, mas eu particularmente prefiro vir aqui direto pelo VS Code. Então a primeira coisa que eu faço eu abro o meu VS Code, deixa eu fechar esse cara aqui.
O meu VS Code está aberto aqui e você pode ver que o nosso Explorer aqui está vazio. Então eu venho aqui em File e você pode vir aqui em Open Folder para você abrir um projeto. E aí nesse caso você pode selecionar o projeto ou pode criar um projeto. Por exemplo, eu 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 projeto aqui, só que o Explorer ainda está vazio Porque não tem nenhum arquivo nele Nós só criamos a pasta Vamos criar um arquivo dentro dele aqui para que você possa ver um index.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 conforme eu estou fazendo, ele está sendo salvo dentro desse nosso projeto teste Que é aquela pasta que nós criamos 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 projetos 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 os recentes por exemplo aqui os últimos cursos que nós gravamos aqui até um spoiler pra vocês.
HTML, CSS, JavaScript, TypeScript, 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, pra você editar o código não tem segredo. É que Ctrl-C, Ctrl-V, Ctrl-X, o meu Os mesmos atalhos que você sabe de copiar, recortar e colar, que você já utiliza no teu código, tá? Mas o VS Code 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 multilinha. Por exemplo aqui, se nós pegarmos dentro desse HTML, que apertarmos Alt, 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 VS Code traz, tá? OutShift ou OptionShift no caso do Mac, tá? Vamos apagar as quatro linhas aqui.
E também existe uma forma de você pesquisar e alterar, né? conteúdo de um arquivo, seja ele dentro de um arquivo ou de forma global. Vou mostrar os dois pra você aqui também, tá? Bom, primeiramente o Ctrl F o Command F no Mac, você vai fazer um Find aqui, então vou procurar por Document ele vai achar aqui, ó. Que 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 pra mim então eu faço a pesquisa dentro do arquivo.
Ou eu posso ir pelo Explorer, vindo direto aqui pelo pesquisar aqui na lupinha, ou utilizando o atalho, que é o Ctrl Shift F Ctrl Shift F, ele abre diretamente essa barra aqui, e aí eu posso pesquisar aqui, por exemplo, o Roger, ele já vai trazer. Como só tenho nesse arquivo, ele vai mostrar aqui. Mas se eu tivesse mais arquivos que tivessem Roger aqui, ele ia listar todos os arquivos e eu poderia ir em cada um dos arquivos, alterar manualmente ou também fazer o replace, trocar uma informação por outra dentro do meu código, tá bom? Nesse caso aqui, a grande diferença é que usando o Ctrl F ou o Command F, você busca no arquivo e o Ctrl Shift F você faz a busca global que é em todos os arquivos que estão dentro do teu projeto, tá bom? Tomar uma aguinha rapidão?
Bom, e agora que vocês já conhecem a fundo como utilizar o VS Code ali, praticamente as ferramentas básicas dele, eu quero compartilhar com vocês algumas dicas e truques aí que podem Pode levar a tua experiência com o VS Code aí pra outro nível. Começando pelos atalhos, tá? Primeiro, CTRL P. Você pode selecionar um arquivo pra abrir.
Nesse caso aqui ele já trouxe. Como só tenho 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á? Tenho também o CTRL SHIFT P. Ele abre a paleta de comandos. Aqui eu consigo configurar tudo dentro do meu VS Code. Todas as configurações que eu utilizo, eu consigo fazer por essa paleta de comandos aqui. Tenho também o ALT.
No meu caso aqui, eu acho que é OPTION. É o Alt, setinha para baixo e para cima, eu consigo mudar um código de posição. Aqui, vamos escrever aqui, Roger, Alt, para baixo e para cima, eu consigo mudar a linha. Posso utilizar também o Ctrl D, no Mac o Comand D, para selecionar a linha.
Então eu coloco exatamente onde eu quero que ele selecione, ele seleciona tudo. Então eu coloquei em cima do Head, ele vai selecionar todo o Head. Coloquei no meio do R aqui, ele seleciona todo o R. Coloquei no meio do Charset, ele seleciona todo o Charset, para eu facilitar no 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 descomentar várias linhas ao mesmo tempo, tá?
Vamos lá, comentar várias linhas Ctrl K C ou Ctrl K U pra descomentar 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 pra comentar e descomentar No Mac é Command Barra, eu comento e descomento esse código No Windows, eu tô no Mac aqui, no Windows se eu não me engano é Command Ponto É Ctrl Ponto, tá? Então no Mac, Command Barra, no Windows, Control Ponto, a mesma tecla para você comentar e descomentar 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, o meu já está habilitado aqui, mas eu recomendo fortemente que você abrite essa opção aqui. Você vem no File, aqui em Auto Save ou Auto Salvar Automaticamente, eu acho que em português, se eu não me engano, tá?
Então... Eu gosto muito de deixar ela habilitada, 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 eu utilizar o autosave dentro do VS Code.
Então, vem cá, se você não tiver habilitado, habilite aqui pra saber. se o teu tá 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 pra mim, tá? E se você achou esse vídeo útil aí, por favor não esqueça de se inscrever em nosso canal aí e 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 Coding!