LiveServer VSCode pode te salvar um bom tempo
Opaa, primeiro artigo e o começo é a pior parte kk
Vou tentar explicar aqui como usar a extensão no VSCode pra te ajudar a criar os layouts responsivos mais rápido e vendo as alterações em tempo real, o que me ajudou um bocado kk
Lembrando que esse tuto é bem básico passando da instalação até o uso
Existem extensões para outros editores, mas falarei do VSCode, outras extensões podem variar alguns detalhes
Instalando a extensão
Primeiro é preciso ter o Visual Studio instalado, da pra fazer isso aqui.
O passo seguinte é baixar a extensão, aqui tem duas opções
Tem o link do marketplace ou tu pode procurar por “Live Server” diretamente no VSCode
Ligando o servidor
Após a instalação e o reload do VSCode, a extensão criará um atalho na barra de status pra ligar e desligar em um clique
Começando a usar
Quando tu liga a extensão, vai abrir o código no teu browser padrão (Da pra mudar isso e eu vou falar depois)
Com isso a extensão já ta funcionando e da pra usar, mas tu vai notar que ele vai abrir na url “http://127.0.0.1:5500”, aí que vem a jogada, esse endereço IP (127.0.0.1) é o IP da tua placa de rede, mas da pra tu usar o IP da tua máquina.
Qual o teu IP na rede?
No Windows: clique em iniciar, digite “cmd” e abra o prompt de comando. No prompt de comando tu usa o comando “ipconfig /all” e na lista tu vai encontrar teu IP.
No Linux: é bem parecido com o windows, abra o bash e digite “ifconfig”.
No Mac: sinceramente não tenho vivencia com o MacOs, mas achei uma forma de descobrir esse IP aqui
Obs: Caso esteja usando um notebook conectado pelo cabo de rede e Wifi você verá 2 IP’s
Obs²: Caso prefira outro shell, fique a vontade :D
Conectando em vários dispositivos a partir do IP
Agora é simples, lembra de quando tu ligou a extensão e a url era 127.0.0.1:5500?? Agora é só tu colocar teu IP no local.
Exemplo, tu descobriu no passo anterior que teu IP é 192.168.0.2, agora tu vai usar na url assim: 192.168.0.2:5500.
Simples!
Agora só usar esse mesmo endereço em seu smartphone, ou de qualquer pessoa na mesma rede.
Muito importante: você só conseguirá acessar através de dispositivos dentro da mesma rede
Alterando navegador que a extensão usará
No meu caso, eu uso no Chrome no dia-a-dia, mas o Firefox tem uma diferença que me chamou atenção, ele mostra guias de CSS grid, então costumo usar mais ele para desenvolver
Depois da extensão instalada, tem como alterar isso.
No VSCode, vá em File - Preferences -Settings
Daí tu pode ir em extensions, Live Server Config e alterar esse campo
Ou tu pode ir no JSON e alterar essa linha de código
“liveServer.settings.donotShowInfoMsg”: true,
“liveServer.settings.CustomBrowser”: “firefox”
É isso, galera!
Um agradecimento especial a primeira turma do curso Do-front-ao-end da CollabCode do Marco Bruno, o pessoal é sensacional e é uma comunidade incrível!
Espero ter ajudado :D
