Guia do VS Code – Como instalar, configurar e otimizar para desenvolvimento web

Se você está começando no desenvolvimento web, o Visual Studio Code (VS Code) é uma ferramenta indispensável. Gratuito, poderoso e personalizável, o VS Code é um editor de código usado por milhões de desenvolvedores no mundo todo.

Ele não é utilizado apenas para desenvolvimento web, ele é funcional para todo tipo de linguagem. Você trabalhar seus códigos até mesmo no bloco de notas – assim como é possivel ir de São Paulo até o Piaui a pé , basta ter disposição 😀 .

Neste post, você vai aprender:

• Como instalar o VS Code.
• Como fazer uma configuração básica.
• Quais extensões são essenciais para desenvolvimento web.

---

Passo 1: Instalando o VS Code

Para Windows:

1. Acesse o site oficial: code.visualstudio.com.
2. Clique no botão Download for Windows.
3. Execute o arquivo baixado e siga as instruções:
   • Aceite os termos de licença.
   • Marque a opção “Add to PATH” para facilitar o uso do VS Code no terminal.
   • Finalize a instalação.

Para macOS:

1. Baixe o arquivo .dmg no site oficial.
2. Arraste o ícone do VS Code para a pasta Applications.
3. Abra o aplicativo e permita a execução, se solicitado.

Para Linux:

No terminal, use os comandos:

• Debian/Ubuntu:

sudo apt update
sudo apt install software-properties-common apt-transport-https wget
wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"
sudo apt update
sudo apt install code

• Fedora/CentOS:

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo' sudo dnf check-update sudo dnf install code

---

Passo 2: Configuração Básica

1. Escolha o Idioma

Por padrão, o VS Code estará em inglês. Para alterar:

1. Clique no ícone de engrenagem no canto inferior esquerdo.
2. Acesse Command Palette (Ctrl+Shift+P ou Cmd+Shift+P no macOS).
3. Procure por Configure Display Language.
4. Selecione o idioma desejado (ex.: Português).

---

2. Personalize o Tema

No mesmo menu de engrenagem:

1. Clique em Color Theme.
2. Escolha um tema claro, escuro ou instale novos temas na aba de extensões.

Dica: O tema “Dark+” é ótimo para trabalhar sem cansar os olhos.

---

3. Ajuste o Formato do Código

Configure o VS Code para formatar automaticamente seu código ao salvar:

1. Acesse File > Preferences > Settings (ou Ctrl+,).
2. Pesquise por Format On Save.
3. Ative a opção.

---

Passo 3: Instalando Extensões Essenciais

O VSCode tem uma enorme biblioteca de extensões. Você não precisa delas para trabalhar com o VSCode, mas elas podem facilitar o seu trabalho e aumentar sua produtividade e foco se for essa a sua busca 🙂 – Aqui estão algumas que você deve instalar para começar no desenvolvimento web:

1. Live Server

Permite visualizar seu site no navegador em tempo real.

Instalação:

1. Acesse a aba de extensões (Ctrl+Shift+X).
2. Procure por Live Server.
3. Clique em Install.

Como usar:

• Abra um arquivo HTML no VS Code.
• Clique com o botão direito e selecione Open with Live Server.

2. Prettier – Code Formatter

Formata automaticamente seu código para mantê-lo organizado.

Instalação:

1. Instale a extensão Prettier.
2. Ative o Format On Save nas configurações.

3. HTML CSS Support

Melhora o autocompletar de classes e IDs nos arquivos HTML e CSS.

4. Auto Rename Tag

Atualiza automaticamente a tag de fechamento no HTML quando você altera a de abertura.

5. CSS Peek

Permite visualizar estilos CSS relacionados a uma classe ou ID diretamente no HTML.

---

Passo 4: Criando seu Primeiro Projeto no VS Code

1. Crie uma pasta para o projeto (ex.: meu-primeiro-site).
2. Abra a pasta no VS Code:
   • Menu File > Open Folder.
3. Crie dois arquivos:
   • index.html
   • style.css
4. Escreva o seguinte código no

<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Meu Primeiro Site</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Bem-vindo ao Meu Primeiro Site!</h1> <p>Este site foi criado com HTML, CSS e visualizado no Live Server.</p> </body> </html>
Escreva o seguinte código no style.css:cssCopiarEditarbody { font-family: Arial, sans-serif; background-color: #f9f9f9; color: #333; margin: 0; padding: 0; } h1 { color: #007BFF; }

5. Use o Live Server para visualizar o site:
   • Clique com o botão direito no arquivo index.html.
   • Selecione Open with Live Server.

Com o VS Code configurado e as extensões certas, você está pronto para criar sites e explorar o desenvolvimento web com eficiência e de uma maneira muito prática 🙂

✴︎Este post foi escrito em 5 de dezembro de 2024, faz parte de uma série técnica que comecei e acabei abandonando, e agora faz parte do BEDA 2026 do Entreblogs  :)