Visual Studio Code (VS Code)

O que é o Visual Studio Code?

O Visual Studio Code, também conhecido como VS Code, é um editor de código-fonte gratuito e multiplataforma desenvolvido pela Microsoft. Embora seja leve, ele funciona como uma IDE (Ambiente de Desenvolvimento Integrado), ou seja, uma ferramenta que reúne em um só lugar tudo o que o programador precisa para escrever, testar e depurar seus códigos, com recursos como terminal embutido, controle de versão e suporte a extensões. 

1. Instalando o VS Code no Windows

1. Acesse o site oficial do VS Code e baixe o instalador para Windows.

2. Execute o arquivo baixado.

3. Aceite os termos de uso e avance nas etapas sem alterar as configurações padrão.

4. Clique em “Instalar” e aguarde o processo terminar.

5. Ao final, o VS Code será iniciado automaticamente.
   
   

2. Alterando o idioma para português

1. Abra o VS Code.

2. Pressione Ctrl + Shift + P para abrir a Paleta de Comandos.

3. Digite Configure Display Language e selecione a opção.

4. Escolha “pt-BR” (Português - Brasil).

5. Reinicie o editor quando solicitado.

3. Criando arquivos e pastas

1. No menu lateral, clique em "Abrir Pasta" e escolha (ou crie) uma pasta para seu projeto.

2. Com a pasta aberta, use os ícones do painel lateral para criar novos arquivos (como index.html, style.css) ou novas subpastas (como img/ para imagens).
   
   

Dica: Utilize nomes simples e com letras minúsculas, separados por hífens, para manter seu projeto bem organizado.

4. Escrevendo e editando códigos

Para escrever código, basta clicar em um arquivo e começar a digitar.
Por exemplo: HTML → index.html ou CSS → style.css
Você pode abrir arquivos existentes clicando sobre eles na lateral esquerda.
Para salvar, use o atalho Ctrl + S.

5. Ativando o salvamento automático

1. Clique no ícone de engrenagem no canto inferior esquerdo e vá em “Configurações”.

2. No campo de busca, digite auto save.

3. Ative a opção afterDelay, assim o VS Code salva automaticamente após um pequeno intervalo de tempo.

6. Conhecendo a barra de atividades

No canto esquerdo do VS Code, você encontrará:

Explorador de Arquivos: Gerencia pastas e arquivos do projeto.
Pesquisar: Permite localizar trechos de código em todo o projeto.
Extensões: Instala e gerencia funcionalidades adicionais.
Gerenciador: Acessa configurações, temas e atalhos.

7. Instalando extensões

Extensões são recursos extras que ampliam o poder do VS Code.

Como instalar:

Clique no ícone de Extensões (ou use Ctrl + Shift + X).
Use a barra de busca para procurar o nome da extensão.
Clique em "Instalar".

Extensões recomendadas:

• Color Highlight: Exibe a cor visualmente no código CSS.

• Auto Rename Tag -  Quando você edita a tag de abertura de um elemento HTML ou XML, a tag de fechamento é atualizada automaticamente. Ideal para evitar erros ao renomear elementos.
  
  

• Live Preview -  Permite visualizar a página HTML diretamente dentro do VS Code em tempo real.
  Para abrir: pressione Ctrl + Shift + P, digite Live Preview: Show Preview, e selecione a opção interna do navegador.
  
  

• Live Server -  Cria um servidor local que abre automaticamente seu projeto HTML no navegador padrão. As alterações feitas no código são refletidas instantaneamente no navegador.
  Para mudar o navegador padrão: vá em configurações, digite custom browser e escolha o navegador desejado, ou pressione Ctrl + ,.
  
  

• CSS Peek -  Permite visualizar as regras CSS aplicadas a um seletor diretamente no arquivo HTML. Basta clicar com o botão direito sobre a classe e selecionar a opção de espiar ou navegar até a definição.
  
  

• Prettier – Code Formatter -  Formata automaticamente seu código (HTML, CSS, JS, etc.) com base em boas práticas e estilo limpo. Ajuda a manter a padronização no projeto.
  
  

• VS Code Icons  -  Adiciona ícones coloridos e personalizados ao explorador de arquivos do VS Code, facilitando a identificação de tipos de arquivos e melhorando a organização visual do projeto.

• Dracula Theme Official - Tema escuro popular entre programadores, com contraste agradável e cores vibrantes. Deixa o editor mais confortável para uso prolongado e melhora a legibilidade do código. 

8. Utilizando o Live Server

Essa extensão cria um servidor local para visualizar arquivos HTML como se estivessem online.

Como usar:

1. Instale a extensão “Live Server”.

2. No projeto, clique com o botão direito no seu arquivo index.html.

3. Escolha a opção “Open with Live Server”.

4. Seu navegador abrirá automaticamente a página com um endereço local, como http://127.0.0.1:5500/index.html.

A cada alteração no código, o navegador será atualizado automaticamente.

Conclusão

O Visual Studio Code é uma excelente ferramenta para quem está começando — ou já trabalha — com desenvolvimento. Ele é leve, poderoso e totalmente personalizável.

Download do Visual Studio Code

Visual Studio para a Web 

O Visual Studio Code para a Web oferece uma experiência gratuita e sem instalação do Microsoft Visual Studio Code, executada inteiramente em seu navegador, permitindo que você navegue em repositórios de código-fonte com rapidez e segurança e faça alterações leves no código. Para começar, acesse https://vscode.dev em seu navegador.