Guia de configuração do VSCode para iniciantes

Rocketseat

7 min de leitura

Navegação Rápida:

Por que um ambiente de desenvolvimento bem configurado é crucial?

O essencial do seu ambiente de dev

Instalando o VSCode: seu novo melhor amigo

O terminal integrado: seu aliado poderoso

Configurando o terminal no Windows (Git Bash)

Extensões essenciais para turbinar seu VSCode

Customizando seu VSCode

Dicas extras para um ambiente turbinado

Conclusão: seu ambiente, seu foguete!

Faaala dev! Se você está começando sua jornada no universo da programação, uma das primeiras e mais importantes etapas é preparar o seu "campo de batalha": o ambiente de desenvolvimento. É nele que a mágica acontece, onde você vai escrever seus primeiros códigos, testar ideias e construir projetos incríveis. E para essa missão, uma das ferramentas mais queridas e utilizadas pela comunidade dev é o Visual Studio Code, ou simplesmente VSCode.

Pode ser que você esteja se perguntando: "mas por que o VSCode? O que ele tem de tão especial?". A resposta é simples: ele é poderoso, flexível e relativamente fácil de usar, mesmo para quem está começando. Pense nele como uma caixa de ferramentas para programadores: ele vem com o essencial, mas você pode adicionar inúmeras ferramentas (extensões) para deixá-lo perfeito para o seu jeito de programar e para as linguagens que você vai usar, seja Javascript, Python, Java, C#…

Neste artigo, vamos te guiar passo a passo na configuração do seu ambiente de desenvolvimento utilizando o VSCode. O foco principal será no Windows, mas não se preocupe! Vamos destacar as diferenças e dar dicas importantes para quem usa macOS ou Linux. A ideia é que, ao final desta leitura, você se sinta confiante e pronto para dar o próximo grande salto na sua carreira de dev. Vamos nessa?

Por que um ambiente de desenvolvimento bem configurado é crucial?

Imagine tentar construir um foguete (sim, aqui na Rocketseat a gente adora essa analogia!) em uma oficina desorganizada, sem as ferramentas certas à mão. Seria um pesadelo, não é mesmo? Com a programação, a lógica é a mesma. Um ambiente de desenvolvimento bem configurado é como ter uma oficina limpa, organizada e com tudo o que você precisa ao seu alcance. Isso se traduz em:

Produtividade: menos tempo gasto procurando ferramentas ou resolvendo problemas de configuração significa mais tempo codando e aprendendo.

Foco: um ambiente estável e previsível te ajuda a manter o foco no que realmente importa: resolver problemas e criar soluções.

Menos frustração: erros de configuração podem ser desmotivadores, especialmente para iniciantes. Um setup correto minimiza esses percalços.

Aprendizado eficiente: com as ferramentas certas, você consegue acompanhar melhor os cursos e tutoriais, como os que oferecemos aqui na Rocketseat, desde o Discover, nosso curso gratuito para iniciantes, até as formações mais avançadas.

Ter um ambiente configurado corretamente é o primeiro passo para uma jornada de aprendizado mais suave e prazerosa. E acredite, a sensação de ter tudo funcionando direitinho é recompensadora!

📄

Antes de mergulharmos no VSCode, você já parou para pensar se programação é realmente para você? É uma dúvida comum para quem está começando. Se esse é o seu caso, que tal dar uma pausa rápida e conferir nosso artigo programação é pra mim? Descubra agora! Ele pode te ajudar a clarear as ideias!

O essencial do seu ambiente de dev

Antes de instalar o VSCode, é bom ter uma visão geral do que compõe um ambiente de desenvolvimento típico:

Sistema operacional: seja Windows, macOS ou Linux, ele é a base de tudo.

Navegador (browser): essencial para desenvolvimento web e para acessar documentações e recursos online. Chrome, Edge, Firefox, Safari... a escolha é sua! Nas aulas da Rocketseat, é comum utilizarmos o Edge ou o Chrome, mas o importante é você se sentir confortável com o seu.

Editor de código: aqui entra o nosso protagonista, o VSCode! É nele que você vai escrever e editar seus códigos.

Terminal (ou linha de comando): uma ferramenta poderosa para interagir com seu computador, executar comandos, rodar scripts, gerenciar arquivos e utilizar sistemas de controle de versão como o Git.

Linguagens de programação e runtimes: dependendo do que você for desenvolver, precisará instalar as linguagens específicas (como Python, Node.js para Javascript, JDK para Java, etc.) e seus respectivos runtimes (ambientes de execução).

Ferramentas adicionais: coisas como Git (para controle de versão), gerenciadores de pacotes (npm, yarn, pip), bancos de dados, e ferramentas de design como o Figma, que é muito utilizado no mercado e por isso, usamos muito em projetos da Rocketseat.

Não se assuste com a lista! Vamos focar no VSCode e no terminal, que são peças-chave para começar.

Instalando o VSCode: seu novo melhor amigo

Vamos ao que interessa! Instalar o VSCode é um processo bem direto.

Passo 1: download do VSCode

Acesse o site oficial do VSCode: code.visualstudio.com.

O site geralmente detecta o seu sistema operacional (Windows, macOS ou Linux) e oferece o botão de download apropriado. Clique nele!

Dica: se ele não detectar corretamente ou se você quiser ver outras opções, clique em "Other platforms" ou na setinha ao lado do botão de download. Lá você encontrará instaladores para Windows (user installer, system installer, .zip, CLI), Linux (.deb para Debian/Ubuntu, .rpm para Fedora/SUSE) e macOS (.zip, CLI).

Qual versão escolher? Stable vs. Insiders

Você vai notar que existe uma versão chamada "Insiders".

VSCode Stable: é a versão estável, testada e recomendada para o dia a dia e para trabalho profissional. Se você está começando, esta é a versão que você deve baixar e usar.

VSCode Insiders: é uma versão que recebe atualizações diárias com as últimas novidades e recursos. É ótima para quem gosta de testar o que há de mais novo, mas por ser "experimental", pode apresentar instabilidades ou bugs. Alguns instrutores da Rocketseat, como o Mayk Brito, utilizam a versão Insiders nas aulas para mostrar as novidades, mas ele mesmo recomenda a Stable para trabalho. A vantagem do Insiders é que ele pode ser instalado lado a lado com a versão Stable, sem interferir uma na outra.

Nossa recomendação: comece com a versão Stable. Ela é robusta e confiável.

Passo 2: instalação

No Windows:

Após o download do arquivo .exe, dê dois cliques nele para iniciar o instalador.

Aceite o contrato de licença e clique em "próximo".

Você pode manter o local de instalação padrão ou escolher outro, se preferir. Clique em "próximo".

Na tela de "selecionar tarefas adicionais", recomendamos marcar as seguintes opções:

Criar um atalho na área de trabalho (opcional, para facilitar o acesso).

Adicionar a opção 'Abrir com Code' ao menu de contexto de arquivo do Windows Explorer: muito útil para abrir arquivos diretamente no VSCode.

Adicionar 'abrir com Code' ação ao menu de contexto de diretório do Windows Explorer: essencial para abrir pastas de projetos inteiras no VSCode com um clique direito.

Registrar Code como editor para tipos de arquivo suportados: permite que o VSCode seja o editor padrão para diversos tipos de arquivos de código.

Adicionar ao PATH (requer reinicialização do shell): esta opção permite que você chame o VSCode diretamente do terminal usando o comando code. Facilita muito a vida!

Clique em "próximo" e depois em "instalar".

Ao finalizar, você pode deixar a opção "iniciar o Visual Studio Code" marcada e clicar em "concluir".

No macOS:

O download virá como um arquivo .zip.

Descompacte o arquivo. Você verá o aplicativo Visual Studio Code.app.

Arraste o Visual Studio Code.app para a pasta Aplicativos (Applications). Isso garante que ele esteja disponível no Launchpad.

Para conseguir abrir o VSCode pelo terminal com o comando code, abra o VSCode, pressione Cmd + Shift + P para abrir a paleta de comandos, digite "Shell Command" e selecione a opção "Shell Command: Install 'code' command in PATH".

No Linux:

Para distribuições baseadas em Debian/Ubuntu (como o Ubuntu, Mint):

Faça o download do arquivo .deb.

Você pode instalá-lo pela interface gráfica (geralmente clicando duas vezes) ou pelo terminal. Pelo terminal, navegue até a pasta onde você baixou o arquivo e execute:


sudo apt update
sudo apt install ./<nome_do_arquivo>.deb

Substitua <nome_do_arquivo>.deb pelo nome real do arquivo baixado.

Se houver problemas de dependência, tente:


sudo apt --fix-broken install

Para distribuições baseadas em Fedora/RHEL/CentOS (como o Fedora, CentOS Stream):

Faça o download do arquivo .rpm.

Pelo terminal, navegue até a pasta de download e execute:


sudo dnf install ./<nome_do_arquivo>.rpm

Ou, em versões mais antigas que usam yum:


sudo yum install ./<nome_do_arquivo>.rpm

Após a instalação, o comando code geralmente já estará disponível no PATH.

VSCode online (roda no navegador):

Uma alternativa interessante é o vscode.dev. É uma versão do VSCode que roda diretamente no seu navegador, sem precisar instalar nada! É fantástico se você estiver em um computador que não é seu, ou se quiser apenas fazer uma edição rápida. Você acessa os arquivos da sua máquina localmente, e a experiência é muito similar à do VSCode instalado. A única ressalva é que, para salvar seus projetos de forma segura e acessá-los de qualquer lugar, o ideal é integrá-lo com o Git e o GitHub. Se quiser saber mais sobre Git, temos um artigo que pode te ajudar: Git Descomplicado: Guia Essencial.

Pronto! O VSCode está instalado. Ao abri-lo pela primeira vez, você verá uma tela de boas-vindas com algumas opções de customização inicial (como tema de cores) e links úteis.

Conhecendo a interface do VSCode

Ao abrir o VSCode, você encontrará uma interface limpa e organizada. Vamos aos principais componentes:

Tela de boas-vindas do Visual Studio Code, exibindo opções iniciais como "New File...", "Open Folder...", "Clone Git Repository..." e uma lista de projetos recentes, além de guias para "Get Started with VS Code" e outras funcionalidades.

Barra de atividades (activity bar): à esquerda, permite alternar entre diferentes visualizações como explorador (arquivos), pesquisar, controle de código fonte (Git), executar e depurar, e extensões.

Barra lateral (side bar): mostra a visualização ativa da barra de atividades. Geralmente, é o explorador de arquivos do seu projeto.

Grupos de editores (editor groups): a área principal onde você edita seus arquivos. Você pode ter vários arquivos abertos e organizá-los em grupos lado a lado.

Barra de status (status bar): na parte inferior, mostra informações sobre o projeto aberto, como branch do Git, erros, avisos, e o tipo de arquivo.

Painel (panel): também na parte inferior (pode ser aberto/fechado com Ctrl + J ou Cmd + J), contém o terminal integrado, console de depuração, problemas e saída.

Não se preocupe em decorar tudo de uma vez. Com o uso, você se familiarizará rapidamente!

📄

Quer dicas para turbinar sua produtividade no VSCode? Confira nosso artigo: dominando o VS Code: guia para aumentar sua produtividade.

O terminal integrado: seu aliado poderoso

O VSCode vem com um terminal integrado, o que é uma mão na roda! Você não precisa ficar alternando entre janelas para executar comandos.

Como abrir o terminal integrado:

Use o atalho Ctrl + ' (control + aspas simples) ou Ctrl + J (control + J) no Windows/Linux.

Use o atalho Cmd + J (command + J) no macOS (este atalho geralmente abre o painel, que pode incluir o terminal; Cmd + ' também funciona no Mac).

Vá em View > Terminal (Exibir > Terminal) no menu superior.

Vá em Terminal > New Terminal (Terminal > Novo Terminal) no menu superior.

Configurando o terminal no Windows (Git Bash)

No Windows, o terminal padrão que o VSCode pode usar é o PowerShell ou o CMD (prompt de comando). No entanto, para desenvolvimento, especialmente se você for seguir tutoriais e cursos que usam comandos comuns em ambientes Linux/macOS (como ls, cd, mkdir), é altamente recomendável usar o Git Bash.

O Git Bash é um terminal que vem com o Git para Windows e emula muitos dos comandos do Bash (o shell padrão em muitos sistemas Linux e no macOS). Isso torna seu ambiente Windows mais parecido com o que você verá em muitos exemplos e com o que seus colegas devs em outros sistemas usam.

Passo 1: instalar o Git para Windows (que inclui o Git Bash)

Vá para git-scm.com/download/win.

Baixe o instalador.

Execute o instalador. Durante a instalação, você pode manter a maioria das opções padrão. Preste atenção especial a:

Choosing the default editor used by Git: você pode deixar o Vim (padrão) ou escolher o VSCode se ele aparecer na lista. Não é crítico para o terminal em si.

Adjusting your PATH environment: a opção recomendada geralmente é "Git from the command line and also from 3rd-party software".

Choosing HTTPS transport backend: a opção padrão ("Use the OpenSSL library") é geralmente a correta.

Configuring the line ending conversions: "Checkout Windows-style, commit Unix-style line endings" (CRLF/LF) é uma escolha segura para compatibilidade.

Configuring the terminal emulator to use with Git Bash: Use MinTTY (the default terminal of MSYS2). Esta é a que fornece o Git Bash que queremos.

Configuring extra options: você pode habilitar o "Git Credential Manager Core" para facilitar a autenticação com o GitHub.

Complete a instalação.

Passo 2: configurar o VSCode para usar o Git Bash como terminal padrão

Abra o VSCode.

Abra a paleta de comandos: Ctrl + Shift + P (Windows/Linux) ou Cmd + Shift + P (macOS).

Digite Terminal: Select Default Profile (Terminal: Selecionar Perfil Padrão) e selecione essa opção.

Na lista que aparece, você deverá ver Git Bash. Selecione-o.

Agora, sempre que você abrir um novo terminal integrado no VSCode (Ctrl + ' ou clicando no + na aba do terminal), ele deverá abrir com o Git Bash.

Observação: se o Git Bash não aparecer automaticamente na lista, você pode precisar adicionar o caminho do executável do Git Bash (bash.exe, geralmente encontrado em C:\Program Files\Git\bin\bash.exe) nas configurações do VSCode (arquivo settings.json). Para fazer isso:

Abra as configurações: Ctrl + , (vírgula) ou File > Preferences > Settings.

Procure por terminal.integrated.profiles.windows.

Clique em "Edit in settings.json".

Adicione ou modifique a entrada para o Git Bash: JSONLembre-se que barras invertidas em caminhos no JSON precisam ser escapadas com outra barra invertida (\\).


"terminal.integrated.profiles.windows": {
    "Git Bash": {
        "path": "C:\\Program Files\\Git\\bin\\bash.exe", // Verifique se este caminho está correto na sua máquina
        "icon": "terminal-bash"
    }
    // ... outros perfis como PowerShell, CMD podem estar aqui
},
"terminal.integrated.defaultProfile.windows": "Git Bash", // Define como padrão

Lembre-se que barras invertidas em caminhos no JSON precisam ser escapadas com outra barra invertida (\\).

A principal vantagem de usar o Git Bash no Windows é ter uma experiência de linha de comando mais consistente com o que é usado em macOS e Linux, facilitando seguir tutoriais e colaborar em projetos. Por exemplo, o comando ls para listar arquivos funciona no Git Bash, macOS e Linux, enquanto no CMD do Windows seria dir.

📄

Se você quer mergulhar mais fundo em como deixar seu ambiente Javascript tinindo, com dicas de VSCode e terminal, confira este post: Ambiente Javascript: Dicas, VSCode e terminal.

Extensões essenciais para turbinar seu VSCode

A verdadeira mágica do VSCode está nas suas extensões! Elas adicionam funcionalidades, suporte a linguagens, ferramentas de debugging e muito mais. Para instalar extensões:

Clique no ícone de extensões na barra de atividades (parece um conjunto de quadrados).

Use a barra de busca para procurar extensões.

Clique em "install" na extensão desejada.

Aqui vão algumas sugestões populares e úteis, especialmente para iniciantes e para quem vai usar tecnologias ensinadas na Rocketseat:

Live Server (por Ritwick Dey): abre seus projetos HTML/CSS/JS em um servidor local com recarregamento automático no navegador quando você salva alterações. Mão na roda para desenvolvimento front-end!

Exemplo prático: imagine que você está criando uma página HTML simples, como nos primeiros módulos do curso Discover da Rocketseat. Com o Live Server, você clica com o botão direito no seu arquivo index.html e seleciona "Open with Live Server". Seu navegador abre a página, e qualquer alteração que você salvar no código (seja no HTML, CSS ou Javascript linkado) reflete instantaneamente no navegador. Chega de ficar atualizando a página para cada atualização!

Prettier - Code formatter (por Prettier): mantém seu código formatado de maneira consistente e automática. Ajuda muito na legibilidade e padronização, especialmente em projetos de equipe. Você pode configurá-lo para formatar ao salvar.

Exemplo prático: você está escrevendo um código Javascript e ele está um pouco bagunçado, com indentação irregular:


function olaRocketseat(aluno){
console.log(  "Olá, " + aluno + "! Bem-vindo(a) à Rocketseat!"  );
}
olaRocketseat  (  'Fernanda'  )  ;

Ao salvar, se o Prettier estiver configurado para formatar ao salvar, ele automaticamente ajusta para:


function olaRocketseat(aluno) {
  console.log("Olá, " + aluno + "! Bem-vindo(a) à Rocketseat!");
}
olaRocketseat("Fernanda");

Muito melhor, né?

ESLint (por Microsoft): analisa seu código Javascript (ou Typescript) em busca de erros de sintaxe, problemas de estilo e potenciais bugs, ajudando a escrever um código mais limpo e robusto. Geralmente trabalha em conjunto com o Prettier.

Material Icon Theme (por Philipp Kief) ou vscode-icons (por VSCode Icons Team): adiciona ícones bonitos e específicos para diferentes tipos de arquivos e pastas no explorador, facilitando a identificação visual.

GitLens — Git supercharged (por GitKraken): turbina a integração com o Git, mostrando o histórico de alterações linha por linha (blame), facilitando a comparação entre commits e muito mais. Essencial se você usa Git.

Docker (por Microsoft): se você for trabalhar com containers Docker (um tópico mais avançado, muito presente em uma das formações da Rocketseat), esta extensão é fundamental.

Path Intellisense (por Christian Kohler): ajuda a autocompletar caminhos de arquivos e pastas, o que é ótimo para evitar erros de digitação ao importar módulos ou referenciar arquivos.

IntelliCode (por Microsoft): usa IA para oferecer sugestões de código mais inteligentes, baseadas no seu contexto e em padrões comuns de projetos open-source.

Para linguagens específicas:

Python (por Microsoft): essencial para desenvolvimento em Python, oferece linting, debugging, IntelliSense, etc. Perfeito para quem está na Formação Python da Rocketseat.
Pylance (por Microsoft): geralmente instalado junto com a extensão Python, oferece performance aprimorada para o IntelliSense em Python.
Java Extension Pack (por Microsoft): um conjunto de extensões para desenvolvimento Java, incluindo suporte a Maven/Gradle, debugging, etc. Ideal para quem está explorando a Formação Java da Rocketseat.
C# (por Microsoft): suporte completo para desenvolvimento C#, incluindo projetos .NET. Indispensável para a Formação C# da Rocketseat.
vscode-styled-components (por Styled Components): se você for trabalhar com React e Styled Components.

Não precisa instalar todas de uma vez! Comece com as mais básicas (Live Server, Prettier, ESLint se for usar JS/TS, e ícones) e vá adicionando outras conforme sentir necessidade e de acordo com as tecnologias que estiver estudando.

Customizando seu VSCode

O VSCode é altamente customizável. Você pode mudar:

Tema de cores (color theme): File > Preferences > Color Theme (ou Ctrl + K Ctrl + T). Existem muitos temas disponíveis, desde os claros até os escuros (dark themes), que são os preferidos de muitos devs. Experimente alguns e veja qual agrada mais seus olhos! Omni Theme (Tema da Rocketseat), Dracula Official, One Dark Pro, Monokai são alguns populares.

Tema de ícones de arquivo (file icon theme): File > Preferences > File Icon Theme. Aqui você escolhe os temas instalados, como Material Icon Theme.

Configurações (settings): Ctrl + , (vírgula). Aqui você pode ajustar uma infinidade de opções, desde o tamanho da fonte até comportamentos específicos de extensões. Muitas configurações podem ser ajustadas pela interface gráfica, mas também há o arquivo settings.json para configurações mais avançadas ou para compartilhar sua configuração.

Exemplo: format on save (formatar ao salvar): uma configuração muito útil é fazer o Prettier formatar seu código automaticamente toda vez que você salva o arquivo. Para isso, nas configurações (Ctrl + ,):

Procure por "Format On Save".

Marque a caixa de seleção.

Você também pode querer definir o "Default Formatter" (formatador padrão) para esbenp.prettier-vscode (Prettier). Procure por "Default Formatter" e selecione-o na lista.

A melhor forma de aprender é explorando! Não tenha medo de mexer nas configurações e extensões. Se algo der errado, geralmente é fácil reverter.

📄

Produtividade é chave! Confira nosso artigo 10 hacks de produtividade que vão transformar sua rotina como DEV para mais dicas!

Dicas extras para um ambiente turbinado

Mantenha tudo atualizado: tanto o VSCode quanto suas extensões e as linguagens/ferramentas que você usa recebem atualizações frequentes com correções de bugs e novos recursos. Fique de olho!

Aprenda os atalhos: o VSCode é cheio de atalhos de teclado que podem agilizar muito seu trabalho. Ctrl + P (ou Cmd + P) para abrir arquivos rapidamente, Ctrl + Shift + P (ou Cmd + Shift + P) para a paleta de comandos, Ctrl + B (ou Cmd + B) para mostrar/esconder a barra lateral, são apenas alguns exemplos. O próprio VSCode tem um "cheatsheet" de atalhos (Help > Keyboard Shortcuts Reference).

Organize seus projetos: crie uma pasta principal para seus projetos de programação (ex: C:\ProjetosDev ou ~/Developer) e dentro dela, pastas para cada projeto individual.

Use o Git desde o começo: mesmo para projetos pessoais pequenos, usar Git para controle de versão é uma prática excelente. Ele te ajuda a rastrear alterações, voltar para versões anteriores e, futuramente, colaborar com outros devs. Combine com o GitHub ou GitLab para ter backups na nuvem e um portfólio.

Explore a documentação: tanto o VSCode quanto as linguagens e ferramentas que você usa têm documentações ricas. Consulte-as sempre que tiver dúvidas.

Conclusão: seu ambiente, seu foguete!

Ufa! Percorremos um longo caminho, desde entender a importância de um bom ambiente até instalar e configurar o VSCode com suas extensões e terminal. Pode parecer muita informação de uma vez, mas lembre-se: a jornada de um dev é feita de aprendizado contínuo. O mais importante é que você deu o primeiro passo!

Com seu ambiente de desenvolvimento configurado, você está pronto para começar a codar, a experimentar e a transformar suas ideias em realidade. O VSCode será seu grande companheiro nessa jornada, te ajudando a escrever códigos mais limpos, a ser mais produtivo e a se sentir mais confiante.

E agora? O que fazer com esse ambiente novinho em folha? A melhor forma de solidificar o que você aprendeu é praticando! E aqui na Rocketseat, temos o lugar perfeito para você começar:

💜

Que tal dar o pontapé inicial (ou continuar sua jornada) com o Discover, nosso curso gratuito? Ele é perfeito para quem está começando do zero ou quer reforçar os fundamentos da programação web com HTML, CSS e Javascript, utilizando o VSCode que você acabou de configurar!

🚀

E se você já está pronto para um desafio maior e quer se tornar um desenvolvedor full stack completo, preparado para o mercado, conheça nossa Formação Full Stack! Nela, você vai mergulhar fundo nas tecnologias mais demandadas, construir projetos incríveis e contar com o suporte de instrutores experientes como o Mayk Brito e o Rodrigo Gonçalves para te guiar nessa jornada.

Não se esqueça de que a comunidade é uma parte vital do aprendizado. Participe de fóruns, grupos de estudo, e claro, junte-se à comunidade da Rocketseat no Discord! Trocar ideias, tirar dúvidas e compartilhar suas conquistas faz toda a diferença.

Continue explorando, continue aprendendo e, acima de tudo, divirta-se programando! Seu foguete está pronto para decolar. Qual será seu primeiro projeto? Compartilhe com a gente na comunidade! E não deixe de acompanhar nosso blog para mais dicas e conteúdos que vão impulsionar sua carreira dev.

Artigos_