WDD 231: Desenvolvimento Frontend para Web I

S01 - Configuração: Ferramentas – Edição – Visual Studio Code

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

Organizações e programadores individuais decidem quais editores de código usar. Este curso usa o VS Code como o principal editor de código porque ele é gratuito, de código aberto e popular no setor, além de ter uma grande comunidade de suporte, desenvolvimento e extensões.

Instruções da Atividade

1. Instale o editor do VS Code caso ainda não o tenha instalado: Visual Studio Code.
2. Se você já tiver o VS Code instalado, verifique se há atualizações.
   Para verificar atualizações no VS Code, use o menu Ajuda ► Verificar atualizações...
3. Adicione a extensão Live Server no VS Code para oferecer suporte a testes locais e offline do seu trabalho no seu navegador.

   Recursos Opcionais

   A ferramenta Live Server (Five Server), criada por Yannick, é muito semelhante ao Live Server e também funcionará para este curso. Então, se você tiver problemas com o Live Server ou já tiver instalado o Five Server em um curso anterior, esta é outra boa opção.

4. Personalize sua instalação do VS Code:
   • Ative a opção de formatar código ao salvar.
     Clique para expandir

     1. Na barra de menu do VS Code, clique em Arquivo ► Preferências ► Configurações

        Você sempre pode acessar o painel Configurações pressionando o atalho de duas teclas ⌘ , [Mac] ou Ctrl , [Windows/Linux].

     2. Digite "format" na caixa de pesquisa.
     3. Marque a caixa ☑️ Editor: Format on Save (Formatar ao Salvar).
   • Ative o salvamento automático do código usando a opção After Delay (Após Atraso).
     Clique para expandir

     1. Acesse o painel Configurações pressionando o atalho ⌘, [Mac] ou Ctrl , [Windows/Linux].
     2. Digite auto save (salvar automaticamente) na caixa de pesquisa.
     3. No painel Files: Auto Save, altere o menu suspenso de off para afterDelay.

        Opção: Você pode definir o atraso para o tempo de sua preferência em milissegundos na configuração Files: Auto Save Delay (Atraso no Salvamento Automático).

   • Ative a atualização automática de tags.
     Clique para expandir

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

     1. Acesse o painel Configurações pressionando o atalho ⌘, [Mac] ou Ctrl , [Windows/Linux].
     2. Digite linked editing na caixa de pesquisa.
     3. Marque a caixa ☑️ Editor: Linked Editing (Edição Vinculada).
   • Desabilite a ferramenta de sugestão inline da IA.
     Clique para expandir

     Ferramentas de desenvolvimento como o VS Code são criadas para profissionais e possuem muitos recursos que ajudam a criar linhas básicas de código rapidamente. Infelizmente, quando você está aprendendo a escrever linhas básicas de código, essas ferramentas poderosas muitas vezes atrapalham e prejudicam seu aprendizado. Com isso em mente, é recomendável que você desabilite o recurso Inline Suggest do VS Code.

     1. Acesse o painel Configurações pressionando o atalho ⌘, [Mac] ou Ctrl , [Windows/Linux].
     2. Digite "inline suggest" na caixa de pesquisa.
     3. Desmarque a caixa ☑️ Editor > Inline Suggest: Enabled (Sugestão Inline: Habilitada).
   • Você também usará o suporte integrado do Visual Studio Code para Emmet, que oferece atalhos e abreviações para escrever HTML e CSS rapidamente, tornando o desenvolvimento muito mais ágil. Você não precisa fazer nada para habilitar o Emmet, mas vale a pena conferir alguns dos comandos comuns.
     Exemplos usando notação abreviada do Emmet

     O Emmet é compatível com uma diversas abreviações e recursos, incluindo:

     • Abreviações para elementos HTML: Por exemplo, digitar .container e pressionar Tab gera um elemento <div> com uma classe de "container".

       <div class="container"></div>.

     • Aninhamento e Multiplicação: Você pode aninhar elementos usando o caractere > e fazer cópias usando o *. Por exemplo, ul>li*3 seguido por Tab gerará um elemento <ul> com três elementos <li> aninhados.

       <ul>
         <li></li>
         <li></li>
         <li></li>
       </ul>

     • Agrupamento: Use o caractere * para criar várias cópias de um elemento. Por exemplo, ul>li*5>a seguido por Tab gerará um elemento <ul> com cinco elementos <li>, cada um contendo um elemento <a>.

       <ul>
         <li><a href=""></a></li>
         <li><a href=""></a></li>
         <li><a href=""></a></li>
         <li><a href=""></a></li>
         <li><a href=""></a></li>
       </ul>

Obtendo Ajuda

Se você não conseguiu concluir nenhuma dessas etapas, então você ainda não está preparado(a).
Por favor, caso precise de ajuda, use o Microsoft Teams.