Post

Configuração do Visual Studio Code (VS Code)

Postado em
Por Vagner Leite
5 min de leitura

Objetivo da Aula:

Nesta aula, você aprenderá a baixar, instalar e configurar o Visual Studio Code (VS Code) em sistemas operacionais Windows e macOS. Ao final, você estará pronto para utilizar essa poderosa ferramenta de desenvolvimento web para criar e editar arquivos HTML, CSS, e muito mais.

Conteúdo da Aula:

Ambiente de desenvolvimento: Considerações iniciais.

Um ambiente de desenvolvimento é o conjunto de ferramentas, software, e configurações que um desenvolvedor utiliza para escrever, testar e depurar código. Ele inclui o editor de código ou IDE (como Visual Studio Code), bibliotecas e frameworks necessários, além de configurações personalizadas que ajudam a facilitar o processo de desenvolvimento. O ambiente de desenvolvimento pode ser configurado localmente no computador do desenvolvedor ou em servidores remotos, e é fundamental para garantir que o código seja escrito de maneira eficiente e funcione como esperado antes de ser publicado ou utilizado em produção.

1. Introdução ao Visual Studio Code (VS Code)

O que é o Visual Studio Code?

  • Visual Studio Code (VS Code) é um editor de código-fonte leve, gratuito e altamente extensível, desenvolvido pela Microsoft. Ele é amplamente utilizado por desenvolvedores para escrever e editar código em várias linguagens de programação, incluindo HTML, CSS, JavaScript, Python, e outras.
  • Principais recursos:
    • Autocompletar inteligente: Sugestões de código à medida que você digita.
    • Depuração embutida: Ferramentas para identificar e corrigir erros no código.
    • Integração com Git: Controle de versão direto no editor.
    • Extensões: Adicione funcionalidades, como temas, plugins para diferentes linguagens, e muito mais.

2. Como Baixar e Instalar o Visual Studio Code

2.1. Baixando o VS Code

Para Windows:

  1. Acesse o site oficial do VS Code.
  2. Clique no botão “Download for Windows”. O site automaticamente detectará a versão do Windows (32-bit ou 64-bit) e iniciará o download do instalador.

Para macOS:

  1. Acesse o site oficial do VS Code.
  2. Clique no botão “Download for macOS”. O site detectará automaticamente a versão adequada para o seu sistema e iniciará o download do arquivo .dmg.

2.2. Instalando o VS Code

Instalação no Windows:

  1. Executar o instalador:
    • Após o download, localize o arquivo VSCodeUserSetup-x64-<version>.exe na pasta de downloads e clique duas vezes para executá-lo.
  2. Aceitar os Termos de Licença:
    • Leia os termos e clique em “I accept the agreement”. Em seguida, clique em “Next”.
  3. Escolher o local de instalação:
    • Você pode escolher o local onde deseja instalar o VS Code. Por padrão, ele será instalado na pasta C:\Program Files\. Clique em “Next” para continuar.
  4. Opções adicionais:
    • Marque as opções que desejar, como:
      • Criar um atalho na área de trabalho.
      • Adicionar o VS Code ao PATH (recomendado).
      • Registrar o VS Code como o editor padrão de texto (opcional).
    • Clique em “Next” e depois em “Install”.
  5. Concluir a instalação:
    • Clique em “Finish” para concluir a instalação. Se desejar, marque a opção para abrir o VS Code após a instalação.

Instalação no macOS:

  1. Abrir o arquivo .dmg:
    • Após o download, localize o arquivo VSCode-darwin-<version>.dmg na pasta de downloads e clique duas vezes para abri-lo.
  2. Arrastar para a pasta Aplicativos:
    • Uma janela será aberta com o ícone do VS Code. Arraste o ícone para a pasta “Aplicativos”.
  3. Iniciar o VS Code:
    • Abra a pasta “Aplicativos” e clique duas vezes no ícone do VS Code para iniciar o editor. Na primeira execução, você pode receber uma notificação solicitando permissão para abrir o aplicativo baixado da internet. Clique em “Abrir”.

3. Configurando o Visual Studio Code para Desenvolvimento Web

3.1. Interface do VS Code

  • Janela Principal:
    • Barra Lateral (esquerda): Contém ícones para Explorador de Arquivos, Busca, Controle de Versão, Debug e Extensões.
    • Área de Edição (centro): Onde você edita os arquivos.
    • Terminal Integrado (abaixo): Acesso rápido a um terminal de linha de comando.

3.2. Instalando Extensões Essenciais

Para melhorar sua experiência de desenvolvimento web, algumas extensões são recomendadas:

  • HTML Snippets: Fornece snippets úteis para HTML.
  • CSS IntelliSense: Autocompletar inteligente para CSS.
  • Live Server: Permite ver as mudanças no navegador em tempo real enquanto edita os arquivos.
  • Prettier - Code Formatter: Para formatar seu código automaticamente.

Como Instalar Extensões:

  1. Clique no ícone de Extensões na barra lateral esquerda.
  2. Na barra de busca, digite o nome da extensão (por exemplo, “Live Server”).
  3. Clique em Install na extensão desejada.

4. Primeiros Passos com o VS Code

4.1. Criando seu Primeiro Arquivo HTML

  1. Abrir uma nova pasta:
    • Vá em File > Open Folder e selecione ou crie uma pasta onde você deseja armazenar seus projetos.
  2. Criar um novo arquivo:
    • Na barra lateral, clique com o botão direito na pasta aberta e selecione New File.
    • Nomeie o arquivo como index.html.
  3. Escreva seu primeiro código HTML:
    • Digite o seguinte código:
1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html>
      <head>
      <title>Meu Primeiro Site</title>
      </head>
      <body>
         <h1>Olá, Mundo!</h1>
      </body>
</html>
  1. Executar com o Live Server:
    • Se a extensão Live Server estiver instalada, clique com o botão direito no editor e selecione “Open with Live Server”.
    • O arquivo será aberto em seu navegador, e você verá a página renderizada.

5. Resumo e Conclusão

  • Recapitulando:
    • Aprendemos como baixar e instalar o VS Code no Windows e macOS.
    • Exploramos a interface do VS Code e instalamos extensões úteis para desenvolvimento web.
    • Criamos e executamos nosso primeiro arquivo HTML usando o VS Code.
  • Próximos Passos:
    • Na próxima aula, aprenderemos sobre a criação de um esqueleto básico de um documento HTML e começaremos a explorar as tags HTML.

Exercícios Práticos:

  1. Instalar o VS Code no seu Sistema Operacional:
    • Siga os passos acima para instalar e configurar o VS Code no seu computador.
  2. Explorar Extensões:
    • Navegue pela galeria de extensões do VS Code e instale pelo menos mais uma extensão que ache interessante.
  3. Criar um Novo Projeto:
    • Crie uma nova pasta e dentro dela, crie seu primeiro arquivo index.html. Experimente diferentes tags HTML e visualize o resultado usando o Live Server.

Essa aula prepara você para usar o Visual Studio Code, uma das ferramentas mais poderosas para o desenvolvimento frontend. Com o VS Code configurado, você está pronto para começar a criar seus próprios projetos web!

voltar

ninja
ninja vscode
Esta postagem está licenciada sob CC BY 4.0 pelo autor.