VS Code, sem complicação

A janela do VS Code é dividida em algumas áreas fixas. Reconhecer cada uma facilita achar qualquer comando ou informação:

• Menu Superior. A barra de menus tradicional no topo da janela — File, Edit, Selection, View, Go, Run, Terminal, Help. Dá acesso a praticamente todos os comandos do editor, organizados por categoria.
• Barra de Atividades. A coluna estreita de ícones do lado esquerdo da janela: Explorer (arquivos), Search (busca), Source Control (Git), Run and Debug e Extensions. Cada ícone abre um painel diferente ao lado.
• Explorador (Explorer). O painel lateral que mostra a árvore de pastas e arquivos do projeto aberto — é onde você navega, cria, renomeia e apaga arquivos.
• Tela principal (área do editor). A região central, onde o conteúdo dos arquivos abertos aparece em abas. É possível abrir vários arquivos ao mesmo tempo e alternar entre as abas.
• Painel inferior. Aberto com Ctrl+` ou por View → Terminal: reúne o Terminal integrado, a aba Problems (erros e avisos), Output e o Debug Console.
• Barra de Status. A faixa fina na parte inferior da janela: mostra a linguagem do arquivo atual, a posição do cursor (linha/coluna), a branch Git ativa, erros/avisos do projeto e a codificação de caracteres, entre outras informações.

Atalhos no Windows e Linux (no macOS, troque Ctrl por Cmd e Alt por Option na maioria dos casos):

• Ctrl+N — novo arquivo em branco.
• Ctrl+S — salvar · Ctrl+Shift+S — salvar como.
• Ctrl+X / Ctrl+C / Ctrl+V — recortar, copiar e colar.
• Ctrl+Z / Ctrl+Shift+Z — desfazer e refazer.
• Ctrl+F / Ctrl+H — localizar e substituir no arquivo atual.
• Ctrl+Shift+F — localizar em todos os arquivos do projeto.
• Ctrl+/ — comentar ou descomentar a linha (ou seleção).
• Ctrl+D — seleciona a próxima ocorrência igual à seleção atual (edição em múltiplos pontos).
• Alt+↑ / Alt+↓ — move a linha atual para cima ou para baixo.
• Shift+Alt+↑ / Shift+Alt+↓ — duplica a linha atual.
• Ctrl+Espaço — abre o autocompletar (IntelliSense).
• F2 — renomeia o símbolo (variável, função...) em todos os lugares onde é usado.
• Ctrl+P — abre um arquivo rapidamente pelo nome (Quick Open).
• Ctrl+Shift+P — Paleta de Comandos: busca qualquer comando do VS Code pelo nome.

Com uma pasta de projeto aberta (File → Open Folder), o Explorador oferece duas formas de criar itens novos:

• Passe o mouse sobre o nome do projeto (ou de uma subpasta) no topo do Explorador: aparecem os ícones New File e New Folder.
• Clique com o botão direito sobre uma pasta na árvore e escolha New File ou New Folder no menu.

Em qualquer um dos dois casos, ao digitar o nome, também é possível criar subpastas de uma vez: digitar src/componentes/botao.js no campo de novo arquivo cria as pastas src e componentes (se não existirem) e o arquivo botao.js dentro dela.

Ctrl+N cria um arquivo novo, mas ele começa "sem título" e sem local salvo — só passa a existir na pasta do projeto depois de um Ctrl+S (salvar), quando você escolhe onde e com qual nome gravá-lo.

Extensões acrescentam funcionalidades que o VS Code não tem por padrão: suporte a linguagens, formatação automática, temas, integração com ferramentas etc.

• Abra o painel de extensões pelo ícone de peça de quebra-cabeça na Barra de Atividades, ou pelo atalho Ctrl+Shift+X.
• Busque pelo nome da extensão, revise a descrição e as avaliações, e clique em Install.
• Algumas extensões pedem para recarregar a janela (Reload) depois de instaladas.

Algumas extensões úteis para começar: Portuguese Language Pack (interface em português), Prettier (formata o código automaticamente), ESLint (aponta problemas no código JavaScript), Live Server (abre uma página HTML no navegador com atualização automática) e GitLens (mais informações do Git direto no editor).

Existem duas formas de trabalhar com mais de uma área visível ao mesmo tempo:

• Dividir o editor (Split Editor). Clique no ícone de divisão no canto superior direito de uma aba, arraste uma aba para a lateral da tela, ou use Ctrl+\. O editor fica dividido em colunas, cada uma com seus próprios arquivos abertos — útil para comparar ou editar dois arquivos lado a lado.
• Abrir uma nova janela. File → New Window (ou Ctrl+Shift+N) abre uma instância separada e independente do VS Code — ideal para ter dois projetos diferentes abertos ao mesmo tempo, cada um em sua própria janela.

Com o comando code disponível no terminal, dá para abrir o editor sem precisar procurá-lo no menu do sistema:

code .
code arquivo.js
code nome-da-pasta

code . abre o VS Code já na pasta atual do terminal — o comando mais usado no dia a dia. code arquivo.js abre um arquivo específico; code nome-da-pasta abre outra pasta como projeto.

Outras variações úteis: code -r . reaproveita a janela já aberta em vez de criar uma nova; code -a pasta adiciona uma pasta ao workspace atual; code -d arquivo1 arquivo2 abre os dois arquivos em modo de comparação (diff).

Se o terminal não reconhecer o comando code, abra o VS Code, pressione Ctrl+Shift+P para abrir a Paleta de Comandos e procure por "Shell Command: Install 'code' command in PATH". No instalador do Windows, marcar a opção "Add to PATH" durante a instalação evita esse passo.

O VS Code edita o código, mas quem exibe uma página é o navegador. Para ver o resultado de um arquivo .html, existem algumas opções:

• Clique duplo no arquivo. Pelo Explorador de Arquivos do sistema (fora do VS Code), dar duplo clique em um .html abre com o navegador padrão.
• Arrastar para o navegador. Com uma janela do navegador já aberta, arraste o arquivo .html do Explorador de Arquivos para dentro dela.
• Copiar o caminho e colar no navegador. Clique com o botão direito no arquivo — no Explorador de Arquivos do sistema ou no Explorador do VS Code — e escolha "Copy Path" (Copiar Caminho). Depois é só colar (Ctrl+V) na barra de endereço do navegador e apertar Enter.
• Extensão Live Server. Com a extensão instalada (seção 04), clique com o botão direito no arquivo .html, dentro do VS Code, e escolha "Open with Live Server" — ou clique em "Go Live" no canto da Barra de Status. Abre num servidor local (endereço http://127.0.0.1:5500) e atualiza a página sozinho a cada vez que o arquivo é salvo.
• Pelo terminal. Dentro da pasta do arquivo: start arquivo.html no Windows, open arquivo.html no macOS, ou xdg-open arquivo.html no Linux.

Abrir direto pelo duplo clique ou pelo caminho copiado funciona bem para páginas simples. Já a Live Server é a opção mais usada durante o desenvolvimento: evita ficar recarregando a página manualmente e é necessária sempre que a página faz requisições (fetch) para outros arquivos, algo que o navegador bloqueia quando o HTML é aberto direto do disco, sem um servidor.