Visual Studio Code

Guia completo para instalar, configurar, organizar e utilizar o Visual Studio Code no desenvolvimento de sistemas.


🔎 Ctrl + K

📘 Bem-vindo ao Manual Digital

O Visual Studio Code, também conhecido como VS Code, é um editor de código utilizado para criar sites, aplicações, APIs, scripts, projetos JavaScript, Python, PHP, SQL e diversas outras tecnologias. Este manual foi desenvolvido para que você não apenas conheça o programa, mas consiga configurar seu ambiente de desenvolvimento e utilizá-lo de maneira organizada e profissional.

💡 Como utilizar este manual?

Siga os capítulos na sequência. Sempre que aparecer um atalho, pressione as teclas indicadas no teclado. Quando aparecer um procedimento, execute-o no seu próprio VS Code. O objetivo não é decorar todos os comandos. O objetivo é aprender a localizar e utilizar os recursos quando precisar.

🎯 Regra principal

Um bom desenvolvedor não é aquele que memoriza todos os comandos. É aquele que sabe utilizar as ferramentas para resolver problemas.

01. Instalando o Visual Studio Code

📌 O que é?

Definição

Instalação é o processo de preparar um programa para que ele possa ser executado e utilizado no computador.

O Visual Studio Code pode ser instalado em diferentes sistemas operacionais, como Windows, macOS e Linux.

🌐 Site oficial

Endereço:

https://code.visualstudio.com/

📝 Passo a passo

  1. Abra o navegador de internet.
  2. Acesse o site oficial do Visual Studio Code.
  3. Localize o botão de download correspondente ao seu sistema operacional.
  4. Faça o download do instalador.
  5. Após o download, abra o arquivo.
  6. Leia e aceite os termos da instalação.
  7. Escolha a pasta de instalação caso seja necessário.
  8. Continue avançando até chegar à etapa de instalação.
  9. Clique para instalar.
  10. Aguarde o término da instalação.
  11. Abra o Visual Studio Code.
⚠️ Atenção

Evite baixar o programa de sites desconhecidos. Para instalar o VS Code, utilize preferencialmente o site oficial.

02. Conhecendo a Interface do VS Code

Definição

A interface é o conjunto de áreas, botões, menus e ferramentas que aparecem na tela do Visual Studio Code.

Antes de começar a programar, é importante entender onde estão os principais recursos.

🧭 Principais áreas

💡 Dica

Não se preocupe em decorar todos os elementos da interface. Conforme você utilizar o VS Code, essas áreas se tornarão familiares.

03. Colocando o VS Code em Português

Definição

O VS Code permite alterar o idioma da interface por meio de um pacote de idioma.

Em vez de procurar menus manualmente, vamos utilizar uma das ferramentas mais importantes do VS Code: Paleta de Comandos.

⌨️ Atalho utilizado

Ctrl + Shift + P
📖 O que é a Paleta de Comandos?

A Paleta de Comandos funciona como um mecanismo de pesquisa para os comandos disponíveis no VS Code.

Em vez de procurar uma função em vários menus, você pode pressionar Ctrl + Shift + P e pesquisar pelo nome da função.

📝 Passo a passo

  1. Abra o Visual Studio Code.
  2. Pressione: Ctrl + Shift + P
  3. Uma caixa de pesquisa aparecerá na parte superior da tela.
  4. Digite: Configure Display Language
  5. Selecione o comando correspondente.
  6. O VS Code exibirá os idiomas disponíveis.
  7. Procure por: Português (Brasil)
  8. Se o pacote ainda não estiver instalado, o VS Code poderá solicitar a instalação da extensão de idioma.
  9. Instale o pacote.
  10. Reinicie o VS Code quando solicitado.
🎯 O que você acabou de aprender?

Você aprendeu uma habilidade muito importante: utilizar a Paleta de Comandos para localizar recursos do programa.

Esse recurso será utilizado novamente em vários momentos deste manual.

💡 Dica profissional

Quando você não souber onde está determinada configuração ou comando do VS Code, experimente primeiro: 

Ctrl + Shift + P

04. Criando e Abrindo uma Pasta de Projeto

Definição

Uma pasta de projeto é o local onde serão armazenados os arquivos relacionados a uma aplicação.

Em desenvolvimento de sistemas, organizar corretamente os arquivos desde o início evita problemas posteriormente.

📁 Criando a estrutura

  1. Crie uma pasta no computador.
  2. Dê um nome claro para ela.
  3. Abra o Visual Studio Code.
  4. Utilize o recurso de abrir pasta.
  5. Selecione a pasta criada.

🏗️ Exemplo de estrutura

meu-site/
│
├── index.html
│
├── css/
│   └── style.css
│
├── js/
│   └── script.js
│
└── imagens/
📖 Por que abrir a pasta inteira?

Quando você abre somente um arquivo, o VS Code sabe trabalhar com aquele arquivo, mas não necessariamente estará trabalhando com toda a estrutura do projeto.

Quando você abre a pasta do projeto, o Explorador passa a mostrar os arquivos e diretórios daquele projeto.

💡 Regra de organização

Sempre que possível, abra no VS Code a pasta principal do projeto.

05. Utilizando o Explorador de Arquivos

Definição

O Explorador é a área do VS Code utilizada para visualizar e organizar os arquivos e pastas do projeto.

📝 Operações importantes

💻 Exemplo

Para criar um arquivo HTML, abra o Explorador e crie:

index.html

Depois, clique no arquivo para abri-lo no editor.

⚠️ Atenção

Tenha cuidado ao excluir arquivos. Dependendo da operação, o arquivo poderá ser removido do projeto.

06. Criando Arquivos e Entendendo Extensões

Definição

A extensão de um arquivo indica o tipo de conteúdo que ele normalmente contém.

Extensão Utilização Exemplo
.html Estrutura de páginas web index.html
.css Estilos e aparência style.css
.js JavaScript script.js
.sql Comandos de banco de dados banco.sql
.php Programação PHP login.php
💡 Dica

O nome do arquivo também deve ser pensado com cuidado. Prefira nomes simples, claros e sem espaços desnecessários.

Exemplo:

index.html
style.css
script.js
contato.html
cadastro.html

07. Abrindo Arquivos Rapidamente com Ctrl + P

Definição

O atalho Ctrl + P permite localizar rapidamente arquivos que fazem parte do projeto aberto no VS Code.

⌨️ Atalho

Ctrl + P

📝 Passo a passo

  1. Abra um projeto no VS Code.
  2. Pressione: Ctrl + P
  3. Uma caixa de pesquisa será apresentada.
  4. Digite parte do nome do arquivo.
  5. Observe os resultados encontrados.
  6. Selecione o arquivo desejado.
  7. Pressione Enter.
💻 Exemplo

Imagine que seu projeto possui:

index.html
contato.html
sobre.html
style.css
script.js

Pressione:

Ctrl + P

Digite:

contato

O VS Code localizará rapidamente o arquivo correspondente.

💡 Memorize este atalho

Se o projeto possuir muitos arquivos, o Ctrl + P economiza bastante tempo.

08. Paleta de Comandos — Ctrl + Shift + P

Definição

A Paleta de Comandos permite pesquisar e executar comandos disponíveis no Visual Studio Code.

⌨️ Atalho

Ctrl + Shift + P

🧪 Experimente agora

  1. Pressione Ctrl + Shift + P.
  2. Digite: Format Document
  3. Observe o comando encontrado.
  4. Pressione Esc para fechar sem executar.

🔎 O que posso pesquisar?

🎯 Pense na Paleta como uma busca de comandos

Não sabe onde determinada função está? Primeiro tente:

Ctrl + Shift + P

09. Salvando Arquivos

Definição

Salvar significa gravar no arquivo as alterações realizadas durante a edição.

⌨️ Atalho

Ctrl + S

📝 Faça o teste

  1. Abra um arquivo.
  2. Faça alguma alteração.
  3. Pressione: Ctrl + S
  4. Observe a aba do arquivo.
📖 Por que salvar é importante?

Durante a programação você realizará muitas alterações. Se elas não forem gravadas, você poderá perder o trabalho realizado caso o arquivo ou programa seja fechado de maneira inesperada.

10. Ativando o Salvamento Automático

Definição

O Auto Save permite que o VS Code salve automaticamente alterações realizadas nos arquivos.

⌨️ Forma rápida

Utilize:

Ctrl + Shift + P

Depois pesquise:

Auto Save

📝 Passo a passo

  1. Pressione Ctrl + Shift + P.
  2. Pesquise por Auto Save.
  3. Observe as opções apresentadas.
  4. Selecione a opção desejada.
💡 Importante

Mesmo utilizando Auto Save, aprenda o Ctrl + S. Esse atalho será utilizado constantemente durante sua vida profissional.

11. Entendendo as Abas dos Arquivos

Definição

As abas localizadas na parte superior do editor representam os arquivos que estão atualmente abertos.

🔵 Indicador de alteração

Quando um arquivo possui alterações ainda não salvas, o VS Code pode apresentar um indicador visual na aba.

📖 O que fazer?

Se você perceber que realizou alterações e o arquivo ainda apresenta indicação de mudança, utilize: 

Ctrl + S

12. Formatando o Código

Definição

Formatação é o processo de organizar visualmente o código, facilitando sua leitura e manutenção.

⌨️ Atalho

Shift + Alt + F

🧪 Exemplo

Imagine um código HTML escrito de maneira desorganizada. A formatação pode ajustar automaticamente a indentação. 

<div><h1>Meu Site</h1><p>Olá</p></div>

Pressione:

Shift + Alt + F
💡 Dica

Formatar o código não significa corrigir erros de programação. A formatação organiza a apresentação do código.

13. Instalando Extensões

Definição

Extensões são recursos adicionais que ampliam as funcionalidades do Visual Studio Code.

Elas podem adicionar ferramentas para HTML, CSS, JavaScript, Python, Git, banco de dados, produtividade e diversas outras tecnologias.

⌨️ Atalho para abrir Extensões

Ctrl + Shift + X

📝 Passo a passo completo

  1. Abra o Visual Studio Code.
  2. Pressione: Ctrl + Shift + X
  3. Observe a área de Extensões que será aberta.
  4. Localize o campo de pesquisa.
  5. Digite o nome da extensão.
  6. Observe os resultados apresentados.
  7. Clique na extensão desejada.
  8. Leia a descrição.
  9. Confira o publicador da extensão.
  10. Clique em Instalar.
  11. Aguarde a instalação.
⚠️ Atenção

Não instale uma extensão simplesmente porque ela apareceu primeiro na pesquisa.

Verifique o nome, o publicador, a descrição e a finalidade antes de instalar.

💡 Atalho para memorizar 
Ctrl + Shift + X
↓
Extensões

14. Extensões Importantes para Desenvolvimento Web

📖 Antes de instalar

Extensão não é sinônimo de obrigação. Cada projeto possui necessidades diferentes.

Durante as aulas, algumas extensões podem ser utilizadas para facilitar o desenvolvimento.

🔹 Live Server

Para que serve?

Permite executar páginas web por meio de um servidor local e visualizar alterações durante o desenvolvimento.

Depois de instalada, é comum utilizar a opção de abrir o projeto com o Live Server.

🔹 Prettier

Para que serve?

É uma ferramenta de formatação de código que ajuda a manter uma padronização visual.

🔹 Auto Rename Tag

Para que serve?

Facilita a alteração de tags HTML correspondentes.

🔹 Auto Close Tag

Para que serve?

Auxilia no fechamento automático de tags HTML.

🔹 Material Icon Theme

Para que serve?

Modifica os ícones apresentados para arquivos e pastas, facilitando a identificação visual.

🔹 Error Lens

Para que serve?

Ajuda a destacar mensagens de erro e avisos diretamente próximos ao código.

🔹 Path Intellisense

Para que serve?

Auxilia na escrita de caminhos para arquivos e pastas.

🔹 ESLint

Para que serve?

Auxilia na identificação de problemas relacionados ao código JavaScript e na aplicação de regras de qualidade.

💡 Regra profissional

Instale extensões porque você sabe qual problema elas resolvem, e não simplesmente porque alguém recomendou.

15. Acessando as Configurações

Definição

As configurações permitem personalizar o funcionamento e a aparência do VS Code.

⌨️ Atalho

Ctrl + ,

📝 Passo a passo

  1. Pressione Ctrl + ,.
  2. A tela de configurações será aberta.
  3. Utilize o campo de pesquisa para localizar uma configuração.
  4. Pesquise, por exemplo: font size.
  5. Localize a configuração relacionada ao tamanho da fonte.
  6. Faça a alteração desejada.
💡 Outra maneira

Você também pode utilizar:

Ctrl + Shift + P

e pesquisar por configurações.

16. Alterando o Tema do VS Code

Definição

O tema altera as cores utilizadas na interface do Visual Studio Code.

⌨️ Forma prática

Ctrl + Shift + P

Depois pesquise:

Color Theme

📝 Passo a passo

  1. Pressione Ctrl + Shift + P.
  2. Digite Color Theme.
  3. Selecione o comando para alterar o tema.
  4. Utilize as setas do teclado para visualizar opções.
  5. Escolha o tema desejado.
  6. Pressione Enter.
📖 O que você aprendeu?

Você utilizou novamente a Paleta de Comandos. Esse é justamente o objetivo: aprender a localizar funções sem precisar memorizar onde cada opção está nos menus.

17. Atalhos Essenciais do VS Code

Definição

Atalhos são combinações de teclas utilizadas para executar determinadas funções com maior rapidez.

Atalho Função Quando utilizar
Ctrl + S Salvar Depois de alterar o código
Ctrl + P Abrir arquivo rapidamente Projetos com muitos arquivos
Ctrl + Shift + P Paleta de Comandos Localizar comandos
Ctrl + Shift + X Extensões Instalar e gerenciar extensões
Ctrl + , Configurações Alterar configurações
Ctrl + F Pesquisar Encontrar texto
Ctrl + H Localizar e substituir Alterar vários trechos
Ctrl + Z Desfazer Voltar uma alteração
Ctrl + Y Refazer Reaplicar alteração
Ctrl + C Copiar Copiar código
Ctrl + V Colar Inserir conteúdo copiado
Ctrl + X Recortar Mover conteúdo
Ctrl + A Selecionar tudo Selecionar conteúdo
Ctrl + / Comentar/descomentar Adicionar comentários
Shift + Alt + F Formatar documento Organizar código
🎯 Desafio de memorização

Escolha cinco atalhos desta tabela e utilize-os durante o desenvolvimento de seu próximo exercício.

18. Pesquisando dentro do Código

Definição

A pesquisa permite encontrar rapidamente palavras ou trechos dentro do arquivo atual.

🔎 Pesquisar

Ctrl + F

🔄 Localizar e substituir

Ctrl + H

💻 Exemplo

Imagine que seu arquivo possui várias ocorrências da palavra:

background

Utilize:

Ctrl + F

Digite:

background

O VS Code localizará as ocorrências encontradas.

⚠️ Cuidado com substituir

O recurso de substituir pode alterar várias ocorrências. Antes de executar uma substituição em massa, confira cuidadosamente o que será modificado.

19. Comentários no Código

Definição

Comentários são textos inseridos no código para explicar determinada parte do programa.

Eles não são utilizados como parte da execução normal do código.

HTML

<!-- Comentário HTML -->

CSS

/* Comentário CSS */

JavaScript

// Comentário JavaScript

⌨️ Atalho

Ctrl + /
💡 Boa prática

Utilize comentários para explicar decisões ou partes importantes do código. Evite comentar absolutamente todas as linhas.

20. Terminal Integrado

Definição

O terminal integrado permite executar comandos diretamente dentro do Visual Studio Code.

Ele é muito utilizado em projetos de desenvolvimento de sistemas.

📝 Como acessar

Uma forma prática é utilizar a Paleta de Comandos:

Ctrl + Shift + P

Depois procure por comandos relacionados ao terminal.

💻 Exemplos de utilização futura

node
npm
git
python
php
📖 Por que aprender terminal?

Muitas ferramentas utilizadas por desenvolvedores são executadas por comandos de terminal.

Conforme você avançar no curso, encontrará comandos para instalar dependências, executar aplicações, utilizar Git e trabalhar com diferentes tecnologias.

21. Primeiro Teste no Terminal

🎯 Objetivo

Antes de utilizar ferramentas avançadas, vamos apenas conhecer o funcionamento básico do terminal.

📝 Passo a passo

  1. Abra o terminal integrado.
  2. Observe qual terminal está sendo utilizado.
  3. Digite um comando simples.
  4. Pressione Enter.
  5. Observe a resposta apresentada.
⚠️ Atenção

Nunca execute comandos desconhecidos simplesmente porque alguém enviou pela internet.

Antes de executar um comando, procure entender para que ele serve.

22. Editando Vários Pontos ao Mesmo Tempo

Definição

O VS Code possui recursos que permitem trabalhar com múltiplos cursores simultaneamente.

Isso pode ser muito útil quando várias linhas precisam de alterações semelhantes.

🖱️ Experimente

Utilize a combinação:

Alt + Clique
📖 O que acontece?

Ao utilizar Alt e clicar em diferentes posições do editor, você poderá criar múltiplos pontos de edição.

Assim, uma mesma digitação pode ser realizada em vários pontos selecionados.

23. Duplicando Linhas

Definição

O VS Code permite duplicar rapidamente uma linha ou seleção, evitando a necessidade de copiar e colar manualmente.

⌨️ Atalho

Shift + Alt + ↓

Para duplicar para cima:

Shift + Alt + ↑
💻 Exemplo

Se você possuir:

<p>Primeiro item</p>

poderá duplicar a linha e depois modificar somente o texto.

24. Renomeando Arquivos e Pastas

Definição

Renomear significa alterar o nome de um arquivo ou pasta sem necessariamente alterar seu conteúdo.

📁 Pelo Explorador

  1. Localize o arquivo.
  2. Clique com o botão direito.
  3. Escolha a opção de renomear.
  4. Digite o novo nome.
  5. Pressione Enter.
⚠️ Atenção

Tome cuidado ao alterar a extensão do arquivo.

Por exemplo, trocar:

index.html

por um nome com extensão incorreta pode fazer com que o arquivo deixe de ser reconhecido como HTML.

25. Boas Práticas no VS Code

Definição

Boas práticas são hábitos que ajudam a desenvolver projetos mais organizados, compreensíveis e fáceis de manter.

🏆 Desafio Final — Prepare seu Ambiente de Desenvolvimento

🎯 Objetivo

Agora você deverá configurar seu ambiente e demonstrar que consegue utilizar os principais recursos apresentados neste manual.

📋 Missão

  1. Instale o Visual Studio Code.
  2. Configure o idioma para português.
  3. Crie uma pasta chamada: meu-primeiro-projeto
  4. Abra essa pasta no VS Code.
  5. Crie o arquivo: index.html
  6. Crie a pasta: css
  7. Dentro dela crie: style.css
  8. Crie a pasta: js
  9. Dentro dela crie: script.js
  10. Instale as extensões indicadas pelo professor.
  11. Teste o: Ctrl + P
  12. Teste o: Ctrl + Shift + P
  13. Teste o: Ctrl + Shift + X
  14. Teste o: Ctrl + ,
  15. Utilize o: Ctrl + S
  16. Formate um arquivo utilizando: Shift + Alt + F
  17. Faça uma pesquisa utilizando: Ctrl + F
  18. Utilize comentários no código.
  19. Abra o terminal integrado.

📁 Estrutura esperada

meu-primeiro-projeto/
│
├── index.html
│
├── css/
│   └── style.css
│
└── js/
└── script.js
🎓 O aluno concluiu quando conseguir:
  • Abrir um projeto no VS Code.
  • Criar arquivos e pastas.
  • Localizar arquivos com Ctrl + P.
  • Localizar comandos com Ctrl + Shift + P.
  • Abrir extensões com Ctrl + Shift + X.
  • Abrir configurações com Ctrl + ,.
  • Salvar arquivos.
  • Formatar código.
  • Pesquisar dentro do código.
  • Utilizar o terminal.
  • Manter o projeto organizado.
🚀 Próximo nível

Depois de dominar o ambiente do VS Code, o próximo passo será utilizar essas ferramentas durante o desenvolvimento de páginas HTML, estilos CSS, JavaScript, banco de dados, Git e aplicações.

O editor deixa de ser apenas um programa para escrever código e passa a ser o ambiente onde grande parte do projeto será desenvolvido.