5 extensões VS Code para desenvolvimento web

Nesse post você vai conhecer 5 das melhores extensões para o Visual Studio Code (VS Code) voltadas ao desenvolvimento para web.

Olá, tudo bem?

Se você desenvolve para web, provavelmente utiliza o VS Code como editor de código, ou pelo menos já ouviu falar sobre ele. Mas se você ainda não conhece, o Visual Studio Code (VS Code) é um editor de código gratuito desenvolvido pela Microsoft. Segundo a Stack Overflow Developers Survey 2019 (na tradução literal, Pesquisa de Desenvolvedores do Stack Overflow 2019), a ferramenta ficou em primeiro lugar na categoria de “Ambientes de desenvolvimento e ferramentas”. Você pode conhecer mais e baixar a ferramenta em code.visualstudio.com.

Antes de começar

O VS Code conta com um enorme marketplace e nele existem extensões para praticamente qualquer coisa que você precisar. Dentre elas, separamos 5 que consideramos muito úteis e que com certeza facilitarão seu trabalho em projetos web. O objetivo aqui não é detalhar o funcionamento de cada uma, mas sugerir boas opções para você.

O único requisito para aplicar o conteúdo desse post é que você tenha o VS Code instalado na sua máquina. Caso ainda não tenha instalado, você pode fazer o download do instalador em code.visualstudio.com.

Sem mais delongas, vamos à lista! 😁

#1 Live Server

O Live Server implementa um “live reload” – ou seja, um recarregamento ao vivo – para páginas web estáticas ou dinâmicas. Basicamente, essa extensão elimina a necessidade de dar um F5 a cada alteração feita em um arquivo do seu projeto (seja um .html, .css, etc). Isso porque ela inicia um servidor de desenvolvimento local (por padrão, na porta 5500, mas você pode customizar isso) e, cada vez que você salvar uma alteração em um arquivo do seu projeto, a página será recarregada automaticamente no browser.

Uma vez instalada, basta iniciar o servidor e será aberta uma guia no seu browser no endereço localhost:5500, e seu projeto já estará rodando com o auto carregamento. O interessante é que você precisa iniciar o servidor apenas uma vez e então todo o diretório do seu projeto será monitorado; assim, qualquer mudança feita nos arquivos fará com que a guia seja recarregada no browser.

#2 Browser Preview

Essa é muito útil se você possui apenas um monitor e não quer ficar alternando entre o browser e o VS Code toda vez que quiser ver o resultado das alterações. O Browser Preview integra um navegador simplificado dentro do seu VS Code. Assim, você pode editar o código e ao mesmo tempo, sem sair do editor, visualizar as alterações em tempo real. Além disso, ele permite que você simule diferentes tamanhos de tela, permitindo que você teste a responsividade do seu aplicativo.

O detalhe é que você precisa ter um servidor de desenvolvimento rodando para que possa acessá-lo através do navegador embutido. E aí vem a dica: você pode usar o Browser Preview em conjunto com o Liver Server! Basta você iniciar o Live Server e então acessar o localhost:5500 (ou a porta que você tiver definido para o Live Server) no browser embutido no VS Code pelo Browser Preview. Veja o exemplo abaixo:

#3 Debugger for Chrome

Se você utiliza JavaScript/TypeScript nos seus projetos web, essa extensão vai poupar um bom tempo na identificação de problemas e nos testes do seu código. Desenvolvida pela Microsoft, essa extensão permite que você faça o debug do código JS/TS como é feito em qualquer outra IDE, com outras linguagens de programação.

Em resumo, “debugar” é a funcionalidade principal dessa extensão.

#4 IntelliSense for CSS class name in HTML

Pré-processadores de CSS como SASS e LESS já facilitam muito o trabalho na hora de estilizar as páginas web. Entretanto, geralmente um arquivo CSS possui muitas classes, algumas utilizamos mais e decoramos o nome, outras não temos bem certeza de como foi escrita, e algumas até esquecemos que existem, por não usarmos tanto. Daí, na hora de atribuir uma classe a um elemento HTML, às vezes temos que olhar qual o nome correto a escrever.

Mas, com a extensão IntelliSense for CSS, esse processo todo chega ao fim! Isso porque ela fornece um “auto complete” para as classes CSS que você tem escritas no seu projeto. Ela mapeia todos os arquivos de estilização (.css, .scss, etc) do seu projeto e, na hora de digitar o nome, fornece uma lista de classes com base no que você digitar. Essa com certeza é uma funcionalidade muito útil! Confira um exemplo:

#5 Live Share

Live Share é uma extensão desenvolvida pela própria Microsoft para trabalho colaborativo, com um funcionamento parecido com o Google Docs. Ela permite que 2 ou mais pessoas trabalhem em um mesmo projeto em tempo real. Uma vez instalada, basta abrir o projeto, criar uma sessão e compartilhar o link com quem você quiser. Ao iniciar a sessão, a extensão “cria” um cursor para cada usuário e você pode ver quem está editando qual linha.

O interessante é que apenas quem está hospedando a sessão precisa ter os arquivos do projeto, e os demais apenas verão “cópias” desses arquivos quando entrarem na sessão, mas não precisam tê-los previamente em suas máquinas. Outro fato interessante é que a extensão possui chat e inclusive canal de voz. Você só precisa estar logado com sua conta Microsoft antes de iniciar a sessão.

Apesar de encaixar perfeitamente para projetos web, o Live Share pode ser utilizado para trabalhar em qualquer projeto, indiferente da área, desde que seja possível abri-lo no VS Code.

Dica de uso

Sabemos que não é a melhor metodologia para a grande maioria dos casos utilizar o Live Share para trabalhar em um projeto. Sem uma organização bem definida de “quem” vai editar “o que”, é fácil ocorrer algum desencontro na edição. Mas para casos de análise e resolução de problemas em conjunto, essa extensão é excelente, pois permite que desenvolvedores troquem ideias sobre o mesmo código e possam demonstrar na prática enquanto conversam.

Como instalar qualquer extensão no VS Code

Para realizar a instalação de qualquer uma das extensões acima, ou de qualquer outra extensão, existem 2 métodos simples.

Método 1

1 – Abra o seu VS Code;

2- Clique na opção Extensions e na caixa de pesquisa digite o nome ou ID* da extensão que você quer baixar;

3 – Selecione na lista a extensão desejada e, na página que abrirá à direita, clique em Install.

Veja o exemplo abaixo:

Método 2

1 – Abra o Marketplace do VS Code (marketplace.visualstudio.com);

2 – Na caixa de pesquisa digite o nome ou ID* da extensão que você quer baixar;

3 – Selecione na lista a extensão desejada e, na página que será aberta, clique em Install;

4 – Se for exibida uma caixa de diálogo citando que você precisa ter o VS Code Instalado, clique em Continue;

5 – Na caixa de diálogo que aparecerá em seguida, clique em Abrir Visual Studio Code;

6 – O VS Code será aberto já na página da extensão. Então, clique em Install.

Veja o exemplo abaixo:

Use o ID das extensões

Seguindo qualquer um dos métodos acima, a extensão desejada será instalada. Você deve ter notado o asterisco ao lado de “id” em ambos os métodos acima. É porque cada extensão do VS Code possui um ID que o levará direto para ela. Abaixo você pode copiar os IDs das extensões citadas neste tutorial. Colando qualquer um deles na caixa de pesquisa, em qualquer um dos métodos, você será levado especificamente a extensão correspondente.

 

ID das extensões

Extensão	ID
Live Share	ms-vsliveshare.vsliveshare
Live Server	ritwickdey.liveserver
IntelliSense for CSS class name in HTML	zignd.html-css-class-completion
Debugger for Chrome	msjsdiag.debugger-for-chrome
Browser Preview	auchenberg.vscode-browser-preview

As instruções de uso e de instalação das extensões sempre estarão presentes na própria página da extensão.

Concluindo sobre as 5 extensões VS Code desenvolvimento web

Espero que essa lista tenha sido útil e facilite o seu trabalho. Se você tiver alguma dificuldade na instalação ou no uso de alguma delas, fique à vontade para pedir um auxílio nos comentários. E se você tem alguma sugestão de extensão que você utiliza, também pode deixar nos comentários!

Estamos sempre à disposição para ajudar. Até a próxima leitura! 😉

Aproveite e descubra as 4 vantagens que você terá ao aproveitar e disponibilizar uma versão mobile da sua Aplicação com esse eBook AQUI.

Marcelo Bastos

Gostou do Post? Caso você não conheça nossa API entre em contato conosco!