E aí galerinha do café, tranquilasso?

Hoje em dia, existem diversas ferramentas para auxiliar o nosso trabalho, principalmente com o front-end, na verdade acho que é a área mais “frenética” no momento em que escreve esse post (Set/2017). Fato é que além de frameworks, precisamos também de uma boa IDE, porque só maluco vai de VI, VIM ou Notepad 😀

Por muito tempo eu usei o Brackets pura e simplesmente porque ele tem a função de live preview, que é aquela função espetacular em que altera o arquivo no navegador na medida em que tu estás editando e com isso o desenvolvimento fica muitooo³ mais rápido e talvez até com mais qualidade.

Hoje em dia, ando tendo uma relação de paixão pelo Visual Studio Code da Microsoft, que apesar de ser Microsoft, é gratuíto e funciona em Mac e Linux também.

Esse editor tem uma interface bacana, te ajuda com debug e tem um terminal integrado, na verdade ele usa o terminal da sua máquina dentro da IDE, de qualquer forma, é uma mão na roda!

 

Hoje eu estava com o Brackets aberto e o Visual Studio Code também, quando me deparei, pera aí, deve ter alguma extensão de Live preview para esse cara e aí eu uno o útil ao agradável (pra mim, pelo menos).

Eis que então achei a extensão “Live HTML Previewer“, que está disponível aqui.

Para instalar é bem tranquilo. Lógico que tu precisas ter instalado antes o Visual Studio Code e para isso, basta seguir as instruções no site deles.

Depois de instalado o VS, pressione CTRL + P e digite o seguinte comando:

ext install live-html-previewer

Escolha a extensão na lista e clique em install.

Recarregue o Visual Studio Code

Pronto!

Para usar em uma aba no Visual Studio Code, pressione F1 ou CTRL + Q + S e digite:

Show side preview

Para usar em “tela cheia”, CTRL + Q + F ou pressione F1 e digite:

Show full preview

E, por fim, no navegador, CTRL + Q + W,

ou F1 e digite:

Open in browser

ou clique com o botão direito do mouse no editor e selecione

Open in browser

 

Feito!

Espero que tenham gostado.

Grande abraço!