WDD 130: Fundamentos da Web

S01 Configuração: Instale o Visual Studio Code

Visão Geral

O objetivo desta atividade de configuração é instalar o Visual Studio Code (VS Code) da Microsoft. Ele é gratuito para instalação em sistemas operacionais Mac, Windows e Linux. Usaremos este programa para escrever e editar código.

Instruções

Talvez você já tenha instalado o VS Code em um curso anterior, como o CSE 110. Se você já instalou o programa, vá para a Etapa 2 das instruções abaixo.

Ícone oficial do Visual Studio Code.

Baixe e Instale o VS Code

  1. No seu navegador, acesse a página de download do Visual Studio Code.
  2. Você será solicitado a baixar o VS Code para seu sistema operacional.
    • Clique em download e siga as instruções para baixar e instalar o VS Code.
    • As configurações de instalação padrão devem ser suficientes para este curso.
  3. Abra o VS Code para verificar se ele foi instalado corretamente no seu computador.
    Tela de downloads no Code.Visualstudio.com
    Tela de downloads no Code.Visualstudio.com
    4. Tela de Boas-vindas de Abertura do Visual Studio Code
    Tela de Boas-vindas de Abertura do Visual Studio Code
Se o seu VS Code não estiver em português automaticamente:
  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.
    Ícone do pacote de linguagem portuguese para VSCode
    Botão de Instalação do Pacote de português para VSCode
  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.

Instale a Extensão Live Server

Normalmente, quando você acessa um site no navegador, ele está hospedado em um servidor na internet. Nesta aula, você criará as páginas web primeiro no seu próprio computador e depois as publicará em um servidor de hospedagem.

Para testar suas páginas web enquanto trabalha nelas, você precisa ter um programa de servidor em execução no seu computador que hospedará as páginas para você. O programa que você usará neste curso para hospedar as páginas é chamado "Live Server (Five Server)", instalado como uma extensão do VS Code.

  1. No seu navegador, acesse a extensão Five Server no Extension Marketplace.
  2. Selecione Install (Instalar) e siga as instruções atentamente para instalar a extensão no VS Code.
    Ícone do Five Server
    Botão de Instalação da Extensão

  3. Se desejar, você sempre pode ver e gerenciar as extensões que estão atualmente habilitadas no VS Code usando "Extensões". O ícone Extensions View fica na Barra de Atividades.

    Ícone de Extensões do VS Code na Barra de Atividades
    Ícone de Exibição de Extensões na Barra de Atividades do VS Code

    Pode ser necessário fechar e reiniciar o VS Code para começar a usar a extensão.

  4. Qualquer arquivo com extensão .html pode ser aberto usando o Live Server (Five Server) dentro do VS Code. Para visualizar a página, clique com o botão direito do mouse no arquivo html e selecione "Abrir com Live/Five Server". Isso fará com que seu navegador padrão mostre a página como se ela estivesse hospedada em um servidor web.
    Abrir com a opção de menu Live/Five Server
    Após clicar com o botão direito do mouse em um arquivo HTML no Explorador do VS Code, esta opção de menu aparecerá.