Configurando a extensão Live Server no Visual Studio Code
Assistindo diversos vídeos no YouTube sobre HTML, CSS e JavaScript eu percebi que a cada mudança salva no VS Code do instrutor, o resultado era automaticamente refletido no navegador. Por outro lado, eu sempre tinha que atualizar a minha página. Então pesquisei e descobri a extensão Liver Server para o VS Code.
O que vamos abordar nesse artigo?
- O que é uma extensão para o VS Code
- O que é o Live Server
- Como instalar o Live Server
- Utilizando a extensão
- Configurações básicas que podem te ajudar
- Acessando o servidor via outros dispositivos
O que é uma extensão para o VS Code?
As extensões são como pequenos blocos que são instalados ao seu VS Code e permitem melhorar a experiência de desenvolvimento, adicionando novas funcionalidades, linguagens, debuggers, formatações e padronizações de arquivos, etc.
Algumas extensões famosas que podem ser úteis no seu desenvolvimento web utilizando o VS Code:
- Prettier: um dos formatadores de códigos mais famosos e utilizados pelos desenvolvedores
- EsLint: utiliza a biblioteca eslint instalada na sua aplicação para executar as regras definidas para o projeto
- JavaScript Code Snippets: entrega trechos de códigos escritos em Javascript e Typescript utilizando ES6
O que é o Live Server?
É uma extensão que disponibiliza uma instância de servidor local com atualizações do seu desenvolvimento. Ou seja, sempre que você efetuar alguma alteração nos seus arquivos, automaticamente as mudanças serão reproduzidas no seu navegador, sem a necessidade de realizar atualizações manuais no browser.
Como instalar o Live Server?
Para adicionar a extensão no seu VS Code é bem simples.
Via Marketplace do Visual Studio: basta acessar o link da extensão e clicar na opção instalar. Logo em seguida será solicitada a permissão para abrir seu Visual Studio Code. Assim que a permissão for concedida, seu computador vai abrir o VS Code e os passos da instalação serão similares ao próximo modo.
Via aba de extensões do VSCode:
- Abra seu VS Code e selecione a opção de extensões.
2. Na aba de pesquisa digite Live Server e clique na opção correta
3. Realize a instalação
4. Reinicie o VS Code
Utilizando a extensão
Agora que você já tem a extensão instalada no seu VS Code, é possível observar que uma nova opção apareceu no rodapé escrito “Go Live”, isso indica que a extensão está instalada e pronta para ser utilizada.
Caso a extensão não esteja sendo exibida no rodapé, confira se ela realmente foi instalada corretamente. Outra possível causa é abrir o Visual Studio em uma pasta sem nenhum arquivo, se este for o caso, crie um novo arquivo no diretório atual e reinicie a aplicação, deste modo a extensão deverá ser exibida corretamente.
Agora que temos a instalação concluída, vamos executar a extensão. Existem diversas maneiras de iniciar o servidor que podem ser conferidas aqui, mas a mais prática e simples é apertar o botão “Go Live”. Ao iniciar o servidor a extensão irá procurar por algum arquivo com as extensões: HTML ou SVG dando preferência ao HTML sobre o SVG.
Assim que o servidor for iniciado, uma página no seu browser padrão será aberta com o endereço: http://127.0.0.1:5500/seuarquivo.extensao, além disso a mensagem acima será exibida e onde exisitia o texto “Go Live” agora possui um ícone de parada e a porta onde o servidor está rodando — esta porta pode ser alterada e será explicada mais para a frente.
Para finalizar a execução do seu servidor, basta clicar no botão de parada que possui um símbolo de cancelamento e a porta de execução do servidor.
Informações úteis sobre a inicialização da extensão:
- O servidor será iniciado na pasta que foi aberta pelo Visual Studio, ou seja a raiz do seu servidor será a raiz do diretório que foi aberto pelo VS Code.
- Caso tenha múltiplos arquivos no mesmo nível, o servidor será iniciado no último arquivo criado ou no arquivo que teve uma última alteração, ou seja, mesmo que você tenha um arquivo index.html e sua última alteração tenha sido realizada no icone.svg, o servidor será iniciado apontando para seu svg. Para iniciar em um arquivo específico altere a url para http://127.0.0.1:5500/novoarquivo.extensao ou inicie o Live Server apontando para o arquivo em questão. Para isto, basta clicar selecionar o arquivo e depois clicar com o botão direito no arquivo e selecionar a opção “Open with Live Server”.
3. É possível ter múltiplas abas com diversos arquivos ao mesmo tempo, não é necessário iniciar um novo servidor para acompanhar as mudanças de outros arquivos. Basta abrir o arquivo com o Live Server como descrito acima ou ainda abrir uma nova aba e digitar o endereço do arquivo no servidor.
4. A atualização em tempo real nos arquivo HTML só pode ser executada caso seu arquivo possua uma tag head OU uma tag body
5. Por padrão as mudanças realizadas em arquivos .scss ou .sass não serão mapeadas, mas isso pode ser alterado nas configurações da extensão
Agora todas as mudanças que você realizar no seu arquivo ou em suas dependências serão automaticamente refletidas no seu navegador quando o conteúdo alterado for salvo.
Configurações básicas que podem te ajudar
O Live Server possui algumas configurações que podem te ajudar bastante no dia a dia. Para aplicar as novas preferências, existem 2 caminhos: alterar o arquivo de configurações do VS Code (settings.json), ou utilizar a interface da extensão para realizar essas alterações (no fim das contas as configurações serão aplicadas no arquivo settings.json).
Abrindo o arquivo settings.json
Para abrir o arquivo de configurações é simples, basta utilizar o atalho CTRL + SHIFT + P e digitar na caixa de texto “settings.json”, logo em seguida selecionar a opção “Open Settings (JSON)”.
Este arquivo possui sua formatação em JSON, e deve possuir uma estrutura similar a essa.
Algumas configurações que podem ser úteis:
- liveServer.settings.port: define qual porta será utilizado pelo Live Server (Default: 5500)
- liveServer.settings.CustomBrowser: define qual o browser será inicializado pelo Live Server (Default: “Null” a string mesmo)
- liveServer.settings.ignoreFiles: informa quais extensões de arquivos serão ignoradas pelo Live Server (Default: [ “.vscode/**”, “**/*.scss”, “**/*.sass” ])
- liveServer.settings.donotShowInfoMsg: para com a exibição dos pop-ups da extensão. Exemplo de pop-up: Servidor iniciado na porta XXX. Outra forma de parar a exibição é clicar na opção do pop-up “Do not show again” (Default: false)
- liveServer.settings.host: altera o host do seu servidor, podendo alterar entre 127.0.0.1, localhost ou algum outro endereço (Default: 127.0.0.1)
Para aplicar as novas preferências, basta incluir ou alterar a configuração desejada no arquivo settings.json com o novo valor. Para exemplificar vamos alterar a porta do nosso servidor para 9001.
Obs: as configurações alteradas serão aplicadas após salvar o arquivo settings.json
Obs2: caso a alteração tenha sido feita enquanto o servidor está ativo, algumas configurações serão aplicadas somente após reiniciar o servidor. Ex: alteração da porta do servidor
Abrindo a interface da extensão para alterar as configurações
Caso não queira manualmente alterar as configurações da extensão no arquivo settings.json, é possível acessar a extensão através do menu de extensões do seu VSCode, clicar na engrenagem da sua extensã e selecionar a opção de “Extension Settings”
Uma vez aberta a inteface de configurações, basta alterar as preferências que você desejar.
Para uma lista completa de configurações acesse aqui.
Acessando o servidor via outros dispositivos
Por fim, queremos acessar nosso servidor via outros dispositivos, como por exemplo um celular, para que seja possível validar a responsividade da aplicação. Nesta esta etapa ambos os dispositivos devem estar na mesma rede.
Garantindo que ambos os dispositivos estão na mesma rede, agora você precisa descobrir qual o IP da sua máquina na rede.
No Windows basta abrir algum terminal (Ex: CMD, powershell, etc.), digitar ipconfig/all, procurar por sua conexão de rede e localizar seu IP, como no exemplo abaixo.
Para descobrir seu IP via Linux clique aqui.
Para descobrir seu IP via Mac clique aqui.
Uma vez descoberto o IP da sua máquina na rede, acesse o servidor a partir do IP no novo dispostivo da seguinte forma: [seuIpNaRede]:[suaPorta]. Para exemplificar, vamos supor que seu IP é 192.168.0.124 e você modificou sua porta para 9001, logo para acessar do novo dispositivo basta utilizar a url 192.168.0.124:9001 e as mudanças realizadas nos arquivos também serão refletidas no seu dispositivo.
Antes de acessar no novo dispositivo, utilize a url com seu ip de rede na sua própria máquina para garantir que esteja utilizando o IP correto.
Por hoje é isso, espero ter contribuido de alguma forma para melhorar sua experiência de desenvolvimento.
=)
Referências:
