O Live Server, uma extensão do Visual Studio (VS) Code, permite que os desenvolvedores visualizem seu trabalho em tempo real. A extensão elimina o tédio de atualizar manualmente o navegador sempre que você faz alterações, o que pode aumentar em projetos maiores. É particularmente útil para desenvolvedores da Web que trabalham com HTML, CSS e JavaScript.
Este tutorial explicará como configurar, personalizar e usar a ferramenta com diferentes tipos de arquivo e solucionar alguns problemas comuns que um desenvolvedor pode encontrar ao usá-la.
Abrindo um projeto com o Live Server no VS Code
Sem o Live Server, sempre que você alterar seu código ou adicionar conteúdo, deverá atualizar o navegador manualmente para que as atualizações apareçam. Para colocar isso em perspectiva – se você fizer 100 alterações por dia, talvez seja necessário atualizar o navegador mais de 100 vezes para ver cada alteração. Veja como você pode abrir um projeto usando o Live Server no Visual Studio Code:
- Instale a extensão Live Server do Marketplace. Você pode encontrá-lo na barra de atividades do VS Code.
- Abra seu projeto clicando em “Arquivo” e “Abrir arquivo” ou usando atalhos de teclado, como preferir.
- Clique com o botão direito do mouse em um arquivo HTML no projeto e escolha “Abrir com Live Server” no menu de contexto.
Uma nova janela do navegador exibirá o site ao vivo. Quaisquer alterações que você confirmar nos arquivos do projeto serão atualizadas automaticamente no navegador.
Personalizando as configurações do Live Server no VS Code
Para aproveitar ao máximo a extensão Live Server, experimente diferentes opções de personalização disponíveis em suas configurações. Você pode modificar o número da porta, HTTPS e configurações de proxy, entre outros recursos. Vamos seguir passo a passo a implementação dessas opções de personalização.
Alterar o número da porta padrão
Você pode querer usar um número de porta diferente do padrão 5500. Isso é fácil de conseguir:
- Localize a linha “liveServer.settings.port” (o valor padrão da porta é 5500).
- Defina como 0 para um número de porta aleatório ou escolha um número que deseja usar.
Ativar conexões HTTPS
Habilite conexões HTTPS para mais segurança, assim:
- Encontre a linha do protocolo HTTPS “liveServer.settings.https”.
- Altere o valor “enable” para “true”.
- Digite os caminhos de arquivo cert, key e passphrase conforme necessário.
Definir configurações de proxy
Definir configurações de proxy pode ser necessário para cenários específicos. Veja como configurar o proxy:
- Ative o proxy com “liveServer.settings.proxy”.
- Altere “enable” para “true” se ainda não estiver.
- Defina “baseUri” para o local de proxy desejado.
- Forneça “proxyUri” para o URL real.
Integrando o Edge DevTools com o Live Server no VS Code
A integração do Edge DevTools e do Live Server no Visual Studio Code pode melhorar o desenvolvimento da Web, tornando-o substancialmente mais eficiente. Essa combinação de ferramentas exibe simultaneamente as alterações em tempo real e permite o acesso direto às ferramentas do desenvolvedor.
- Instale a extensão Live Server para Visual Studio Code do VS Code Marketplace.
- Instale a extensão Edge DevTools para VS Code da mesma fonte procurando por “Microsoft Edge Tools for VS Code”.
- Use as ferramentas integradas do desenvolvedor do navegador para sincronizar as alterações com a fonte automaticamente.
Com ambas as extensões instaladas, você pode ver uma visualização ao vivo de suas alterações em uma janela do navegador incorporada no VS Code.
Usando o Live Server com diferentes tipos de arquivo
A extensão Live Server é versátil o suficiente para muitos tipos de arquivo. Ele funciona com arquivos HTML por padrão e suporta arquivos CSS e JavaScript. Quando você altera uma folha de estilo ou script com esses tipos de arquivo, a extensão atualiza instantaneamente o navegador para refletir as alterações. Os desenvolvedores, especialmente os web designers front-end, podem se beneficiar do recurso de atualização instantânea do Live Server. Ao ajustar o CSS, você verá os efeitos das alterações em tempo real – não há necessidade de esperar para verificar se a cor, a fonte ou o layout estão corretos. E para codificadores HTML e JavaScript, é fácil detectar erros e erros entre arquivos diferentes.
O Live Server ainda é útil para aqueles que trabalham principalmente com arquivos PHP. Para usar sua funcionalidade com PHP, no entanto, você precisa configurar um servidor local que suporte PHP.
O Live Server é compatível com geradores de sites estáticos, como Jekyll e Hugo. Eles permitem que você veja e modifique rapidamente a saída do seu site estático. A integração do Live Server com um gerador de site estático permite um desenvolvimento eficiente sem construir e implantar manualmente o site sempre que você fizer alterações.
Solução de problemas comuns do servidor Live
Embora a extensão do Live Server seja geralmente confiável, alguns problemas ainda podem surgir. Por exemplo, o Live Server pode falhar ao iniciar, o recarregamento ao vivo pode parar de funcionar ou você pode encontrar problemas de CORS.
O Servidor Live Falha ao Iniciar
Isso pode acontecer se a extensão for instalada incorretamente. Em caso afirmativo, você pode:
- Verifique se a extensão está instalada corretamente e habilitada. Se você esqueceu de habilitá-lo ou desativou-o acidentalmente, habilite-o para resolver o problema.
- Se você suspeitar de um problema de instalação, tente reinstalar a extensão.
- Verifique suas configurações e certifique-se de que sua pasta do espaço de trabalho esteja acessível, configurada e não aberta em outra instância.
Recarregamento ao vivo não está funcionando
Se o recarregamento ao vivo não estiver se comportando como deveria, aqui está algo que você pode tentar:
- Verifique novamente seus tipos de arquivo e suporte de tipo de arquivo.
- Confirme se a extensão está rastreando corretamente as alterações e não ignorando os arquivos que devem receber modificações. Verifique as configurações como “liveServer.settings.ignoreFiles”.
Problemas de compartilhamento de recursos entre origens
Podem surgir problemas de CORS ao lidar com recursos de diferentes origens. Para resolver esses problemas:
- Permita solicitações de origem cruzada em seu servidor.
- Use um servidor de desenvolvimento local.
Live Server não pode abrir as guias do navegador
Se o Live Server falhar ao abrir as guias do navegador em seu navegador padrão, tente ajustar as configurações:
- Verifique seu navegador da Web padrão.
- Ajuste as configurações do navegador do servidor no VS Code. Ao habilitar o compartilhamento ao vivo, você precisará iniciar uma sessão de colaboração por meio da paleta de comandos.
Recursos avançados do servidor ao vivo
O Live Server oferece vários recursos adicionais menos conhecidos, mas bastante convenientes. Um recurso “oculto” que vale a pena mencionar é a compatibilidade com pré-processadores, como Sass, Less ou TypeScript, para compilar automaticamente seu código e atualizar a visualização. O Live Server também pode se integrar com ferramentas e bibliotecas de terceiros, como estruturas e sistemas de compilação.
Explore as configurações e a documentação do Live Server para identificar as integrações relevantes que podem ajudar sua pilha.
Otimização de desempenho do servidor ao vivo
Existem alguns ajustes para tentar melhorar o desempenho do Live Server.
Evite recargas em excesso
Uma maneira de fazer com que o servidor tenha o melhor desempenho é definir as configurações para evitar recargas em excesso. Por exemplo, você pode ajustar a opção “liveServer.settings.ignoreFiles” para definir quais arquivos ou pastas não devem acionar um recarregamento ao vivo. Limitar a quantidade de dados qualificados para uma recarga reduz a frequência das atualizações e conserva os recursos do sistema.
Aumentar atraso de atualização
Ajuste o atraso de atualização do navegador para extrair mais desempenho do seu servidor. Para conseguir isso, ajuste a configuração do servidor “liveServer.settings.wait”. Recarregamentos rápidos que às vezes ocorrem ao salvar vários arquivos consecutivos podem sobrecarregar os recursos do sistema. Aumentar o atraso por meio de “liveServer.settings.wait” ajuda a evitar esse possível problema.
Fechar instâncias não utilizadas
Por fim, considere fechar instâncias não utilizadas do Live Server para obter um truque de desempenho mais direto ao trabalhar em vários projetos. Manter várias instâncias abertas ao mesmo tempo pode consumir recursos significativos do sistema, dependendo do seu hardware.
Dicas do servidor ao vivo
Para aproveitar ao máximo o Live Server, experimente algumas dicas práticas:
Mantenha os ambientes de desenvolvimento e produção separados
Uma dica que outros desenvolvedores podem compartilhar é manter seu ambiente de desenvolvimento separado de seu ambiente de produção. Essa separação ajuda a evitar a implantação acidental de código inacabado ou não testado, mantendo seu código mais limpo e economizando um tempo precioso.
Use espaços de trabalho separados para vários projetos
Se você estiver trabalhando em vários projetos simultaneamente, use espaços de trabalho separados no VS Code para manter seus projetos organizados. Essa abordagem permitirá que você alterne facilmente entre projetos e gerencie suas respectivas instâncias do Live Server.
Melhor colaboração com Live Share e Live Server
As extensões Live Share e Live Server também aprimoram sua colaboração com outros desenvolvedores. Essa configuração permite que você compartilhe sua área de trabalho e visualização ao vivo com outras pessoas. É uma abordagem ideal para equipes que trabalham juntas em projetos e solucionam problemas em tempo real.
Perguntas frequentes adicionais
O que é Live Server no Visual Studio Code?
O Live Server é uma extensão popular do VS Code que visualiza arquivos HTML, CSS e JavaScript em tempo real.
Como eu paro o Live Server?
Para parar um servidor, abra a Paleta de Comandos e digite “Live Server: Stop Live Server”.
Por que o Live Server não está funcionando?
Alguns motivos possíveis para esse problema envolvem uma instalação incorreta da extensão, configuração incorreta do projeto ou um firewall ou proxy bloqueando o servidor.
Posso usar o Live Server com o Microsoft Edge DevTools no VS Code?
Você pode usar o Live Server em conjunto com o Microsoft Edge. Para fazer isso, instale as extensões Live Server e Edge DevTools para Visual Studio Code.
Participe da conversa ao vivo (servidor)
A extensão Live Server no Visual Studio Code é uma ferramenta obrigatória para desenvolvedores modernos, ajudando-os a otimizar o fluxo de trabalho e lançar projetos de alto nível. Ele elimina atualizações desnecessárias do navegador e permite colaboração em tempo real, compartilhando áreas de trabalho e visualizações.
Quais são seus pensamentos sobre esta extensão? Quais dicas e truques você achou particularmente úteis? Deixe-nos saber nos comentários – isso pode ajudar muito outros programadores.