Os 10 Melhores Extensões VS Code Para Você Ser Mais Produtivo

O editor de código Visual Studio Code é extremamente popular, pois, milhares de desenvolvedores usam esse editor como a sua principal ferramenta para escrever código, além de ser um editor amplamente adotado pelos desenvolvedores.

O VS Code apresenta algumas características bem interessantes olhando pelo ponto de vista da produtividade, em outras palavras, você vai ter a sua disposição, dezenas de extensões que vai ajudar você de alguma forma enquanto estiver desenvolvendo.

E quando falamos de produtividade, nós devemos buscar meios ou formas de ser mais produtivos, pelo motivo, se você é mais produtivo, é obvio que você vai conseguir fazer mais coisas gastando menos tempo e energia.

É claro que há extensões com o foco em vários tipos de situações, no entanto, o foco aqui é demonstrar para você uma lista com extensões que vão ajudar você com a produtividade, em suma, essas extensões vão ajudar a acelerar o seu trabalho, mas, sem a necessidade de diminuir a qualidade do seu trabalho final.

Essa lista é composta por 10 extensões que você poderá usar enquanto estiver desenvolvendo algum projeto com o foco no desenvolvimento web, mas, é claro que há extensões que você poderá usar em outros projetos que não envolva o desenvolvimento web.

Lembrando que não é necessário que você faça a instalações de todas as extensões, ou seja, você deve instalar apenas extensões que você acredita que vai ajudar você se tornar mais produtivo.

Portanto, conheça logo mais abaixo, uma lista com as 10 melhores extensões do visual studio code que poderá ajudar aumentar a sua produtividade como desenvolvedor.

Aprenda programar e desenvolver sistemas profissionais

1 – Live Server

Quando nós estamos desenvolvendo a parte front-end de algum sistema, fica um pouco chato precisar recarrega a página toda vez que fazemos algum tipo de alteração no projeto, principalmente, quando estamos fazendo vários testes.

Para resolver este pequeno problema e ajudar você se tornar um pouco mais produtivo, você poderá instalar a extensão Live Server, essa extensão recarrega a página de forma automática sempre que você fizer alguma alteração no projeto.

Como resultado, você vai ter mais facilidade em encontrar possíveis problemas e será mais fácil para você fazer diversos tipos de experimentos.

2 – Auto Rename Tag

Pode surgir situações onde será necessário renomear algumas tags, a questão é que você vai precisar renomear as tags de abertura e de fechamento, isto pode dar um trabalho extra para você e até mesmo ser chato.

Para resolver esse pequeno desconforto, você poderá instalar a extensão Auto Rename Tag, quando você for renomear a tag de abertura, a tag de fechamento vai ser renomeada de forma automática, ou seja, deixando exatamente igual a tag de abertura, com a alteração que você fez.

Antes de usar essa extensão, faça pequenos testes para ver se realmente essa extensão estar funcionando de forma adequada.

3 – CSS Peek

Se você quer entender o que determinada classe CSS faz e quais são os seus atributos, mas, sem precisar olhar o arquivo que contém todas as classes CSS, pois, caso você fizesse isso, você poderia gastar um bom tempo tentando encontrar essa classe.

Você tem como opção instalar a extensão CSS Peek, essa extensão vai permitir que você veja quais são os atributos de uma classe no arquivo HTML que você estiver trabalhando, se você quiser, poderá visualizar essa classe no arquivo CSS de uma forma mais rápida.

4 – Icon Fonts

Com a extensão Icon Fonts, você vai ter acesso a vários snippets de ícones prontos para você usar facilmente, essa extensão inclui os ícones famosos, como, por exemplo, Font Awesome, você também poderá encontrar esse pacote de ícones para Atom e Sublime Text.

5 – TODO Highlight

Se você tem o costume de deixar vários comentários, mas, por alguma razão, você acaba esquecendo deles, com a extensão TODO Highlight, você vai poder destacar os comentários que você fizer, desta forma, será mais fácil você encontrar os comentários que você fez.

6 – Regex Previewer

Trabalhar com expressões regulares pode deixar algumas pessoas com dor de cabeça, isto acontece pelo motivo que construir uma expressão regular pode ser uma tarefa não muito fácil, no entanto, até para estes casos, existe solução, e a solução para este problema é a extensão Regex Previewer.

A extensão Regex Previewer mostra em um arquivo paralelo à expressão que corresponde a expressão regular que você estar montando, em suma, você vai conseguir escrever as expressões regulares mais rapidamente.

7 – Bookmarks

A extensão Bookmarks permite que você adicione marcadores em determinada parte do código que você estiver desenvolvendo, desta forma, você vai ter mais facilidade em navegar entre os pontos que você marcou em seu código.

8 – Colorize

A extensão colorize vai permitir que você visualize as cores que você definiu em arquivos CSS, SASS e LESS, essa extensão torna mais fácil identificar quais são as cores que estão sendo usadas e também em quais locais.

9 – Peacock

A extensão Peacock vai permitir que você mude a cor do ambiente do visual studio code, para que você tenha mais facilidade em identificar qual instância do VS code você estar usando de uma forma mais rápida.

10 – JS Code Snippets

Essa extensão adiciona vários acionadores de importação, exportação, de método e auxiliares de classes, a extensão JS Code Snippets tem suporte para JavaScript, TypeScript, React, HTML e Vue.

Aprenda programar e desenvolver sistemas profissionais

Conclusão

Você acabou de conhecer 10 extensões que poderá ajudar você se tornar mais produtivo durante o desenvolvimento de algum projeto, é claro que não há necessidade de instalar todas as extensões que você viu aqui.

Faça instalações das extensões que você vai precisar usar neste momento e vai ajudar aumentar a sua produtividade.