chrome.png

LiveReload Laravel VsCode.md

Live Reload (Lavarel no VSCode → Chrome)

Isso permite que a aba com o laravel no navegador seja automaticamente atualizada a cada arquivo modificado no projeto. Ou seja, cada vez que você editar um arquivo no Visual Code, ao salvar esse arquivo o resultado será refletido automaticamente na aba do chrome.

Instale os seguintes itens

• Live Server - Extensão do VS Code
• Live Server - Extensão do Google Chrome

Configuração no Google Chrome

Clique no ícone da extensão no Google Chrome, e então será aberto uma janela igual a imagem abaixo. Então deixe o botão do Live Reload ligado, e o checkbox desmarcado. Exatamente igual a imagem abaixo mostra. Imagem do Live Reaload no Google Chrome

Configuração no Visual Code

Agora vá nas configurações do Visual Code (File > Preferences > Settings e adicione as seguintes linhas no final do código.

  "liveServer.settings.useWebExt": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.proxy": {
    "enable": true,
    "baseUri": "/",
    "proxyUri": "http://127.0.0.1:8000"
  }

Note que nos comandos acima, a linha proxyUri indica onde o server php está rodando.

E depois disso cada vez que quiser iniciar o LiveReload, você precisa executar o server do Laravel normalmente (php artisan serve) e então clicar no ícone do rodapé que está no Visual Code (vide imagem abaixo). Isso abrirá uma aba com o Live Reload ativado. Imagem do Live Reaload no Visual Code

vscode.png