VS Code como Alternativa e Extensões Úteis

VS Code como Alternativa e Extensões Úteis — aula do módulo Antigravity IDE & Editores Modernos, na trilha Setup Essencial & Terminal Descomplicado da…

Leitura de aproximadamente 5 minutos.

Módulo: Antigravity IDE & Editores Modernos · Curso: Setup Essencial & Terminal Descomplicado · Formação: Formação Nível Zero: Ferramentas Essenciais e Gratuitas de IA e Código

VS Code como Alternativa e Extensões Úteis

O que você vai aprender

1. Por que ter um segundo editor

O Visual Studio Code (VS Code) é um editor gratuito e de código aberto mantido pela Microsoft, líder global por leveza e por um ecossistema enorme de extensões. Ele compartilha raízes conceituais e padrões de atalho com o Antigravity IDE — o que você aprendeu nas aulas anteriores deste módulo continua valendo aqui, tecla por tecla.

Ter o VS Code configurado serve para três situações concretas: abrir um projeto em máquina compartilhada onde você não pode instalar o Antigravity, editar arquivo solto sem esperar um ambiente completo carregar, e ter contingência quando uma atualização quebra alguma coisa.

Vale a ressalva que o curso repete: a ferramenta não é a bandeira. O método de trabalhar com agente — regras escritas, revisão de diff, tarefa quebrada em partes — é o mesmo em Antigravity, Claude Code, Codex, OpenCode ou Cursor. Trocar de editor muda o botão, não o modo de pensar.


+-------------------------------------------------------------------------------+
|                       ARQUITETURA MODULAR DO VS CODE                          |
+-------------------------------------------------------------------------------+
|                                                                               |
|   ┌─────────────────────────── VS CODE CORE ──────────────────────────────┐   |
|   │  Editor Ultrarrápido + Sistema de Arquivos + Terminal Integrado       │   |
|   └───────────────────────────────────┬───────────────────────────────────┘   |
|                                       │                                       |
|                                       ▼                                       |
|   ┌──────────────────── MARKETPLACE DE EXTENSÕES ─────────────────────────┐   |
|   │                                                                       │   |
|   │  • Prettier     ──> Formata e alinha código automaticamente ao salvar │   |
|   │  • Python       ──> Destaque avançado de sintaxe e autocomplete       │   |
|   │  • Live Server  ──> Abre páginas HTML com atualização em tempo real   │   |
|   │  • GitLens      ──> Mostra quem editou cada linha no histórico do Git │   |
|   │  • ESLint       ──> Detecta erros e inconsistências de JavaScript     │   |
|   │                                                                       │   |
|   └───────────────────────────────────────────────────────────────────────┘   |
|                                                                               |
+-------------------------------------------------------------------------------+

2. Instalação, em quatro linhas

Aqui a instalação é curta de propósito — o processo é o mesmo que você já fez com o Antigravity na aula "Instalando o Antigravity e Abrindo a Primeira Pasta", da trilha inaugural:

1. Acesse code.visualstudio.com e baixe o instalador do seu sistema (Windows User Installer, macOS Universal ou Linux .deb). 2. Execute o instalador e aceite os termos. 3. Na tela de tarefas adicionais, marque Abrir com Code no menu de contexto de arquivos e de pastas, e marque Adicionar ao PATH. 4. Conclua e abra o aplicativo.

O PATH é o que permite digitar code . no terminal e abrir a pasta atual direto no editor — o mesmo hábito de antigravity ..

3. Git Bash como Terminal Padrão no VS Code

No Windows, o VS Code tende a abrir o PowerShell ou o CMD. Para manter o mesmo shell das aulas e evitar comando que funciona num lugar e falha no outro:

1. Abra o VS Code. 2. Pressione Ctrl + Shift + P para abrir a Paleta de Comandos. 3. Digite Terminal: Select Default Profile e pressione Enter. 4. Na lista suspensa, selecione Git Bash. 5. Abra um terminal novo com Ctrl + \ e confirme que o cabeçalho exibe bash`.

Faça o mesmo ajuste no Antigravity. Dois editores com shells diferentes é a receita mais comum de "o comando da aula não funcionou aqui".

4. As 5 Extensões Essenciais de Produtividade

Para instalar, clique no ícone de blocos na barra lateral (ou Ctrl + Shift + X), pesquise o nome e clique em Install:

1. Prettier — Code Formatter: formata e alinha HTML, CSS, JavaScript e JSON sempre que você salva com Ctrl + S. Diff limpo é diff fácil de revisar. 2. Live Server: adiciona um botão Go Live no rodapé. Ao clicar, abre sua página HTML no navegador e atualiza a cada alteração salva. 3. Python (da Microsoft): auto-completar inteligente (IntelliSense), depuração e suporte a ambientes virtuais para scripts Python. 4. GitLens: mostra, ao lado de cada linha, em qual commit e por quem ela foi alterada pela última vez. Ajuda a entender o que mudou depois de uma sessão com agente. 5. Auto Rename Tag: ao renomear uma tag de abertura no HTML, renomeia a de fechamento automaticamente.

5. Armadilhas Comuns e Como Evitar

[!IMPORTANT]
Poluição do editor com dezenas de extensões não utilizadas: cada extensão consome
memória e tempo de inicialização, e algumas disputam a formatação do mesmo arquivo — duas
formatadoras concorrentes produzem diffs enormes a cada save. Instale apenas o que o
projeto atual exige e desative o resto pelo painel lateral quando o editor ficar lento.

Exercício Prático

Configure e teste um servidor local no VS Code:

1. Abra o painel de extensões:

2. Instale a extensão Live Server:

3. Crie uma página de teste:


   <!DOCTYPE html>
   <html lang="pt-br">
   <head>
     <meta charset="UTF-8">
     <title>Meu Primeiro Site</title>
   </head>
   <body style="font-family: sans-serif; text-align: center; padding-top: 50px;">
     <h1>Ambiente de Desenvolvimento Configurado!</h1>
     <p>VS Code e Antigravity IDE operando com sucesso.</p>
   </body>
   </html>

4. Inicie o servidor em tempo real:

Outras aulas do módulo