Desenvolvimento de Software | VS Code

Visual Studio Code

O Visual Studio Code (VS Code) é um editor de código gratuito e multiplataforma da Microsoft, disponível para Windows, macOS e Linux. Também oferece uma versão baseada na web em vscode.dev.

VS Code inclui suporte para depuração (debugging), controle Git integrado, realce de sintaxe, conclusão inteligente de código, snippets e refatoração de código.

Demonstração em vídeo: ▶️ Introdução ao Visual Studio Code – [ 1:24 minutos ].

Instalar

Personalizar

Antes de começarmos a personalizar as configurações, vamos ensiná-lo a alterar o idioma da interface do VS Code para português do Brasil. Configurar o VS Code em seu idioma nativo facilitará a navegação pelas opções e configurações.

Instalar o Pacote de Idioma Português

Use o pacote de idioma para exibir a interface do VS Code em português do Brasil.

  1. Abra View (Exibir) ► Extensions (Extensões) ou use o atalho Ctrl+Shift+X [Windows/Linux] ou ⌘+Shift+X [macOS].
  2. No campo de busca, digite Portuguese (Brazil) Language Pack for Visual Studio Code.
  3. Selecione o pacote e clique em Install (Instalar).
  4. Uma caixa de mensagem será exibida no canto direito inferior. Clique em "Change Language and Restart"
  5. O Visual Studio Code vai reiniciar com a interface em Português.
Visual Studio Code Settings Panel

Grande parte da personalização do VS Code pode ser controlada no painel Configurações. Para abrir o painel Configurações, faça o seguinte:

Salvar arquivos automaticamente
  1. Abra o painel Configurações.
  2. Digite "auto save" (salvar automaticamente) na caixa de pesquisa.
  3. Na seção Files: Auto Save (Arquivos: Salvamento Automático), altere o menu suspenso de off (desativado) para afterDelay (após atraso).
  4. Defina o atraso para o tempo preferido, em milissegundos, na seção Files: Auto Save Delay (Arquivos: Atraso de Salvamento Automático).
    O padrão é 1000 milissegundos (1 segundo).
Formatar código automaticamente
  1. Abra o painel Configurações.
  2. Digite format (formatar) na caixa de pesquisa.
  3. Marque a caixa em ☑️ Editor: Format On Type (Editor: Formatar ao Digitar).
  4. Marque a caixa em ☑️ Editor: Format On Save (Editor: Formatar ao Salvar).
  5. Marque a caixa em ☑️ Editor: Format On Paste (Editor: Formatar ao Colar).
Atualizar tags automaticamente

Ao modificar uma tag, o recurso de edição vinculada atualiza automaticamente a tag de fechamento correspondente.

  1. Abra o painel Configurações.
  2. Digite linked editing (edição vinculada) na caixa de pesquisa.
  3. Marque a caixa em ☑️ Editor: Linked Editing (Editor: Edição vinculada).
Gerenciar extensões Ícone de Extensões do VS Code
  1. No menu do VS Code, clique em Ver ► Extensões ou abra o painel de extensões pressionando o atalho ⌘+Shift+X [macOS] ou Ctrl+Shift+X [Windows/Linux].
  2. Pesquise a extensão que deseja instalar.
  3. Clique no botão Instalar.
  4. Gerencie extensões clicando numa extensão instalada no Painel Extensões para abri-la em uma aba separada a fim de visualizar, atualizar automaticamente, reiniciar, desabilitar ou desinstalar extensões instaladas.
Temas do editor (cor e ícones de arquivos)
  1. Para alterar o tema de cores, clique em Arquivo ► Preferências ► Tema ► Tema de cores e faça uma seleção.
  2. Para alterar o tema de ícones de arquivos, clique em Arquivo ► Preferências ► Tema ► Tema de ícones de arquivo e faça uma seleção.

Temas de cores adicionais podem ser encontrados por meio das Extensões do VS Code. Exemplo: Winter is Coming

Snippets (Trechos de código do usuário)

Snippets são trechos de código que podem ser inseridos no editor usando a palavra chave que você definir. O VS Code oferece suporte a snippets definidos pelo usuário.

  1. Para criar um snippet, clique em Arquivo ► Preferências ► Configurar snippets e selecione a linguagem para a qual deseja criar um snippet.
  2. Insira o código no arquivo JSON.

Demonstração em vídeo: ▶️ Trechos do Usuário – [ 7:19 minutos ]

Emmet – atalhos de código

Emmet é um conjunto de ferramentas para desenvolvedores web que pode melhorar bastante o seu fluxo de trabalho em HTML & CSS. O suporte a snippets e expansão do Emmet já vem incluído no Visual Studio Code e não é necessária nenhuma extensão.

Exemplo: digite html:5 + pressione Tab e o resultado será o seguinte em um documento HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
  </head>
  <body>
  </body>
</html>

Exemplo: digite ol>li*5 + pressione Tab e o HTML a seguir será gerado:

<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

Recursos em inglês

Links para recursos em inglês

Você pode utilizar a tradução do navegador para ler o conteúdo dessas páginas.