【Guia para Iniciantes do VSCode】O que é o Visual Studio Code? Um Guia Completo da Instalação à Configuração Básica

«Quero começar a desenvolver para a web ou a programar, mas que editor devo usar?»

Olá! Há apenas alguns meses, eu era um autor com zero conhecimento de programação, tal como muitos de vocês. Mas agora, com a ajuda da IA, consegui lançar sites como buyonjapan.com e copicode.com sozinho.

Não é exagero dizer que o maior contribuinte para este sucesso é o editor que vou apresentar hoje: Visual Studio Code (ou VSCode, para abreviar).

Neste artigo, com base nos meus próprios pontos de dificuldade e nos arrependimentos de «se eu soubesse disto mais cedo...», vou explicar tudo de forma exaustiva, desde a instalação do VSCode até às configurações iniciais «obrigatórias», usando o mínimo de jargão técnico possível, como se estivesse a ensinar o meu eu iniciante do passado.

Ao ler este artigo até ao fim, não só terá o VSCode instalado, como também terá um ambiente de desenvolvimento confortável e estará pronto para dar o primeiro passo na alegria de «escrever e executar o seu próprio código».

Afinal, o que é o Visual Studio Code (VSCode)?

O VSCode é um «editor de texto» gratuito desenvolvido pela Microsoft. Um editor de texto é, como o nome sugere, um software para escrever e editar texto. Pense nele como uma versão superpotente do «Bloco de Notas» do Windows ou do «TextEdit» do Mac.

Existem muitos editores por aí, mas por que é que os programadores de todo o mundo escolhem o VSCode? As vantagens que senti na pele são principalmente estas três:

• Gratuito, mas extremamente poderoso: Ter todas estas funcionalidades de graça é, honestamente, fenomenal. Mostra o quão a sério a Microsoft leva este projeto.
• Desempenho leve: Apesar de ser rico em funcionalidades, arranca e funciona de forma rápida e suave. Foi um grande alívio poder usá-lo sem stress, mesmo num computador mais antigo.
• Personalizável com «extensões»: Este é o maior trunfo do VSCode. Vou explicar em detalhe mais tarde, mas ao instalar funcionalidades adicionais úteis (extensões) criadas por programadores de todo o mundo, pode transformá-lo na sua própria ferramenta de desenvolvimento suprema.

Existe um software com um nome parecido, o «Visual Studio», mas é algo diferente, um «Ambiente de Desenvolvimento Integrado (IDE)» para projetos de grande escala, que é um pouco mais complexo e pesado. Como primeiro passo no desenvolvimento web, não há como errar ao escolher o VSCode, que é leve e fácil de usar.

【Mãos à Obra】Vamos Instalar o VSCode

Então, vamos instalar já o VSCode no seu computador. O processo é muito simples.

Primeiro, aceda ao site oficial do VSCode.

Ao aceder, o site deve detetar automaticamente o seu sistema operativo (Windows, Mac, Linux) e apresentar um botão de download grande e otimizado para si. Basicamente, basta clicar nesse botão para descarregar o instalador e seguir as instruções no ecrã.

*O design do site oficial pode sofrer alterações.

Para Utilizadores de Windows

Execute o ficheiro .exe que descarregou. Durante a instalação, aparecerão algumas caixas de verificação. Se não tiver nenhuma preferência específica, recomendo marcar as seguintes opções:

• «Adicionar ao PATH»: Marque esta opção obrigatoriamente. Ao fazê-lo, poderá iniciar o VSCode a partir da linha de comandos ou do terminal com o simples comando code, o que é extremamente conveniente mais tarde.
• «Adicionar a ação 'Abrir com o Code' ao menu de contexto de ficheiros do Explorador»
• «Adicionar a ação 'Abrir com o Code' ao menu de contexto de diretórios do Explorador»

Marcar as duas últimas opções fará com que a opção «Abrir com o Code» apareça quando clicar com o botão direito do rato num ficheiro ou pasta. É um pormenor pequeno, mas que aumenta a eficiência do trabalho de forma garantida.

Além disso, se estiver a usar uma versão recente do Windows 10/11, também pode instalar usando o comando «winget». Basta abrir a Linha de Comandos ou o PowerShell e digitar o seguinte comando:

winget install Microsoft.VisualStudioCode

Para Utilizadores de Mac

Descomprima o ficheiro .zip que descarregou e aparecerá um ficheiro chamado Visual Studio Code.app. Arraste e solte-o na sua pasta «Aplicações» e a instalação está concluída.

Para os utilizadores de Mac, também recomendo a instalação através da ferramenta de linha de comandos «Homebrew». Abra o Terminal e execute o seguinte comando:

brew install --cask visual-studio-code

Para Utilizadores de Linux

Descarregue o pacote .deb (para sistemas baseados em Debian/Ubuntu) ou .rpm (para sistemas baseados em Red Hat/Fedora/SUSE) apropriado para a sua distribuição a partir do site oficial e instale-o. Também está disponível nos centros de software de muitas distribuições.

Por exemplo, no Ubuntu, pode usar o seguinte comando no terminal:

sudo apt install code

【Crucial】A Configuração Inicial Essencial que Você Precisa Fazer

Assim que a instalação estiver concluída, é hora de configurar. Esta é a parte mais importante. Selecionei cuidadosamente as configurações que me arrependo de não ter feito mais cedo. Apenas por configurá-las, a sua experiência de desenvolvimento vai mudar da água para o vinho.

Passo 1: Antes de Mais Nada, Coloque em Português!

O VSCode vem em inglês por defeito. Embora possa usá-lo assim, ler mensagens de erro e itens de configuração em inglês pode ser exaustivo, especialmente para iniciantes. Vamos primeiro traduzi-lo para português para diminuir a barreira psicológica.

1. Clique no ícone com quatro quadrados na barra de menu à esquerda (a vista de Extensões).
2. Na caixa de pesquisa no topo, digite «portuguese».
3. Clique no botão «Instalar» no primeiro resultado que aparece, que deve ser o «Portuguese (Brazil) Language Pack for Visual Studio Code».
4. Quando a instalação terminar, aparecerá uma mensagem no canto inferior direito a pedir para reiniciar. Clique em «Restart».

Com apenas isto, o menu do VSCode deve ter mudado completamente para português. Fácil, não é?

Passo 2: Abrir o Ficheiro de Configurações (`settings.json`)

As configurações detalhadas do VSCode são escritas num ficheiro especial chamado settings.json. Embora também possa configurar através da interface do utilizador, habituar-se a editar este ficheiro diretamente torna a gestão e partilha de configurações muito mais fácil no futuro.

A maneira mais rápida de abrir o settings.json é usando um atalho de teclado:

• Windows: Ctrl + Shift + P
• Mac: Command + Shift + P

Ao premir estas teclas, aparecerá um campo de entrada no topo do ecrã chamado «Paleta de Comandos». Escreva aí «settings json» e selecione «Preferências: Abrir Configurações (JSON) (Preferences: Open User Settings (JSON))».

Isto abrirá um ficheiro vazio (ou com algumas coisas já escritas) dentro de chavetas {}. Este é o seu settings.json. É aqui que vamos copiar e colar as configurações que vou mostrar a seguir.

Passo 3: Copie e Cole a Melhor Configuração Inicial!

A espera acabou. Após muita tentativa e erro, cheguei à configuração inicial «infalível». Copie e cole o código abaixo na íntegra para dentro das chavetas {} do ficheiro settings.json que acabou de abrir.

(Se já houver alguma configuração escrita, adicione uma vírgula , antes da última chaveta } e depois cole. O formato JSON exige que cada item de configuração seja separado por uma vírgula.)

{
    // ----- Configurações de Aparência -----
    "editor.fontFamily": "'UDEV Gothic NF', 'Source Han Code JP', 'Menlo', 'Monaco', 'Courier New', monospace",
    "editor.fontSize": 16,
    "editor.lineHeight": 1.8,
    "editor.wordWrap": "on",
    "workbench.colorTheme": "Default Dark+",
    "workbench.iconTheme": "material-icon-theme",

    // ----- Configurações de Operação de Arquivos -----
    "files.autoSave": "onFocusChange",
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true,

    // ----- Configurações de Comportamento do Editor -----
    "editor.tabSize": 2,
    "editor.renderWhitespace": "all",
    "editor.cursorStyle": "line",
    "editor.cursorBlinking": "smooth",
    "editor.minimap.enabled": false,
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "breadcrumbs.enabled": true,

    // ----- Configurações para a Extensão "Prettier" -----
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,

    // ----- Configurações do Terminal -----
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.fontFamily": "monospace"
}

Breve Explicação das Configurações

Não precisa de memorizar tudo de uma vez. Dê apenas uma olhada para ter uma ideia do que é possível.

• editor.fontFamily: Especifica fontes recomendadas para programação. Uma fonte de fácil leitura melhora a legibilidade do código e torna os bugs mais fáceis de encontrar. (Pode ser necessário instalar as fontes separadamente).
• editor.fontSize: O tamanho do texto. Ajuste a seu gosto.
• editor.lineHeight: A altura da linha. Um pouco mais de espaço torna o código mais fácil de ler.
• editor.wordWrap: Faz a quebra de linha automática no final do ecrã. Elimina a necessidade de scroll horizontal, por isso é essencial.
• files.autoSave: Guarda o ficheiro automaticamente quando o foco muda para outra janela. Evita o esquecimento de premir Ctrl+S/Cmd+S. Isto é mesmo muito útil!
• files.insertFinalNewline, files.trim...: Ao guardar, adiciona uma linha em branco no final do ficheiro e remove automaticamente espaços desnecessários no final das linhas. São configurações para manter o código limpo.
• editor.tabSize: O número de espaços para a tecla Tab. No desenvolvimento web, 2 é o padrão.
• editor.renderWhitespace: Mostra espaços em branco e tabulações como símbolos. Ajuda a detetar imediatamente erros como espaços a mais ou a mistura de espaços de largura total.
• editor.minimap.enabled: Oculta o mapa geral do código (minimapa) que aparece à direita. O ecrã fica mais limpo.
• editor.bracketPairColorization.enabled: Colore os pares de parêntesis, chavetas e parêntesis retos correspondentes (), {}, []. Quando as estruturas estão muito aninhadas, consegue ver-se de relance qual é o par correspondente.
• editor.defaultFormatter, editor.formatOnSave: Esta é a configuração de ouro. Funciona em conjunto com a extensão «Prettier» (discutida mais tarde) para formatar automaticamente todo o seu código de acordo com regras predefinidas sempre que guarda um ficheiro. Nunca mais terá de se preocupar com a indentação do código.

【Selecionadas a Dedo】Extensões Essenciais para Instalar

Depois da configuração inicial, seguem-se as extensões. É aqui que o VSCode realmente mostra o seu valor. Há tantas que pode ser esmagador, mas para um iniciante, estas três são mais do que suficientes para começar.

Tal como fez para a tradução para português, pesquise os nomes na vista de Extensões à esquerda e instale-as.

1. Prettier - Code formatter

   Esta é a «ferramenta de formatação de código» que mencionámos nas configurações. Sem ela, a configuração formatOnSave não funciona. Formata instantaneamente o código de várias linguagens como HTML, CSS e JavaScript para um estilo bonito e padrão da indústria. Liberta-o de pequenas preocupações como «esta indentação é com tabulação ou espaços?» ou «devo usar ponto e vírgula?», permitindo que se concentre na lógica.

2. Live Server

   Uma extensão que revoluciona a programação em HTML/CSS. Quando ativada, o seu navegador recarrega automaticamente no momento em que guarda o ficheiro. O processo tedioso de «modificar código → guardar → mudar para o navegador → clicar no botão de atualizar» torna-se desnecessário. Aumenta drasticamente a eficiência do desenvolvimento, por isso deve mesmo instalá-la.

3. Material Icon Theme

   Esta não é tanto sobre funcionalidade, mas sobre estética. Mostra ícones bonitos ao lado dos nomes dos ficheiros no explorador, dependendo do tipo de ficheiro (HTML, CSS, JS, etc.). Torna mais fácil distinguir visualmente os tipos de ficheiro e encontrar o que procura. Também ajuda a manter a motivação!

*Como definiu "workbench.iconTheme": "material-icon-theme" no settings.json, os ícones devem ser aplicados automaticamente assim que instalar esta extensão.

【Experimente】Vamos Sentir a Emoção de Ver 'Funcionar'!

Parabéns! O seu VSCode é agora um ambiente de desenvolvimento que faria inveja a um profissional. Para terminar, vamos usar este novo ambiente para experimentar a sensação de ver algo «a funcionar».

1. Abrir uma Pasta de Trabalho
   Primeiro, crie uma nova pasta num local fácil de encontrar, como o seu ambiente de trabalho, e dê-lhe um nome como «vscode-test». Depois, no menu do VSCode, selecione «Ficheiro» → «Abrir Pasta...» e abra a pasta que acabou de criar.
2. Criar um Ficheiro
   Na vista do Explorador à esquerda, passe o cursor sobre o nome da pasta e clique no ícone «Novo Ficheiro». Crie um ficheiro com o nome «index.html».
3. Copiar e Colar o Código
   Copie e cole o seguinte código no ficheiro index.html que criou.

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Teste do VSCode</title>
  <style>
    body {
      display: grid;
      place-content: center;
      min-height: 100vh;
      background-color: #282c34;
      color: #ffffff;
      font-family: sans-serif;
      text-align: center;
    }
    h1 {
      font-size: 3rem;
      color: #61dafb;
    }
  </style>
</head>
<body>

  <h1>Olá, VSCode!</h1>
  <p>Bem-vindo ao meu ambiente de desenvolvimento!</p>
  
</body>
</html>

4. Iniciar o Live Server
   Deverá haver um botão «Go Live» no canto inferior direito do ecrã. Clique nele.

Então, como correu? O seu navegador deve ter aberto automaticamente, mostrando o HTML que acabou de criar!

Agora, volte ao VSCode, altere o conteúdo da tag h1 para algo como «Olá, Mundo!» e guarde o ficheiro (Ctrl+S / Cmd+S). Reparou que a exibição no navegador mudou instantaneamente, sem que precisasse de alternar para lá e atualizar?

Este é o poder do «Live Server» e o poder do novo ambiente de desenvolvimento que acabou de adquirir.

Conclusão: Para Você, que Agora Possui uma Ferramenta Poderosa

Desta vez, abordámos tudo, desde a instalação do VSCode até às configurações iniciais que recomendo vivamente, e até à experiência de ver algo «a funcionar».

As configurações que fez hoje serão uma base sólida para a sua futura jornada de aprendizagem de desenvolvimento web e programação. Pode parecer muita coisa para memorizar no início, mas as configurações e extensões que apresentámos hoje servem todas para automatizar «tarefas chatas» e ajudá-lo a concentrar-se em «pensar» и «criar».

Agora que possui a arma poderosa que é o VSCode, já não é um iniciante. É um «programador». Vá em frente e use este ambiente confortável para escrever muito código e criar muitas coisas fantásticas!