Guia de configuração do VSCode para iniciantes

Por que um ambiente de desenvolvimento bem configurado é crucial?

• 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.

O essencial do seu ambiente de dev

• 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.

Instalando o VSCode: seu novo melhor amigo

Passo 1: download do VSCode

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

2. 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).

3. Qual versão escolher? Stable vs. 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

Conhecendo a interface do VSCode

1. 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.

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

3. 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.

4. 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.

5. 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.

O terminal integrado: seu aliado poderoso

• 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)

Extensões essenciais para turbinar seu VSCode

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

2. Use a barra de busca para procurar extensões.

3. Clique em "install" na extensão desejada.

• 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.

Customizando seu VSCode

• 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.

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!