Quais são as melhores extensões para VS Code que podem ajudar a aumentar de vez sua produtividade quando está programando para web? A lista de opções pode ficar gigante, mas nesta lista resolvi reuni as minhas 15 extensões principais que tem me ajudado no dia a dia.
Se você trabalha desenvolvendo para web, sejá no frontend ou no banckend, utilizando JavaScript, Node.js, CSS, Tailwind, Docker e Git, acredito que vai curtir estas sugestões.
Mas sem muita conversa, vamos ao que importa.
1. Visual Studio IntelliCode
A extensão Visual Studio IntelliCode fornece autocomplete e insights baseado no contexto do código combinado com o aprendizado de máquina. Uma IA poderosa para desenvolvedores Python, TypeScript/JavaScript e Java no Visual Studio Code.
Para instalar, basta acessar neste link oficial.
2. Tailwind CSS Intelissense
O Tailwind CSS IntelliSense fornece aos desenvolvedores recursos como preenchimento automático de classes do Tailwind, realce de sintaxe e linting. Uma ferramenta indispensável para quem trabalha com Tailwind CSS em seus projetos.
Para instalar, basta acessar neste link oficial.
3. Prisma
A extensão para VSCode Prisma, adiciona realce de sintaxe, linting, preenchimento auomtático e formatação, para Schemas do Prisma. Se você usa este novo e poderoso ORM, esta extensão vai ser uma ótima ferramenta no dia a dia.
Para instalar, basta acessar neste link oficial.
4. Markdownlint
A extensão markdownlint é muito útil para validar regras e padrões dos arquivos Markwdown, no dia a dia é muito comum escrevermos em arquivos de documentação e readme que usam Markdown, está ferramenta, vai te ajudar a evitar alguns erros e inconsistências.
Para instalar, basta acessar neste link oficial.
5. GraphQL for VSCode
Trabalhar com GraphQL já faz parte do dia a dia de muito desenvolvedor, se você está começando agora, está extensão pode ser muito útil. A extensão adiciona ao VSCode autocomplete, validação de esquema, linting, realce de sintaxe e snippets para escrever mutations, queries, interfaces e muito mais.
Para instalar, basta acessar neste link oficial.
6. Docker
A extensão do Docker é uma excelente extensão para ajudar na depuração de aplicações em contêiners baseada e Node.js, Python e .NET Core. Além disso, você consegue visualizar imagens, containers, redes, volumes, registries e muito mais direto do VSCode.
Para instalar, basta acessar neste link oficial.
7. ESLint
Uma extensão essencial para manter padrões e verificar a qualidade de código, por padrão, ela usa a biblioteca ESLint instalada no projeto, caso não encontre, vai tentar localizar uma versão de instalação global.
Para instalar, basta acessar neste link oficial.
8. AutoRename Tag
A extensão AutoRename Tag ajuda muito a renomear tags HTML e XML, se você escreveu algumas tags DIV e agora precisa mudar, basta renomear no inicio da declaração que ela localiza o fechamento da tag e renomeia junto. Por mais simples que pareça, é um recurso muito útil no dia a dia do desenvolvimento front-end.
Para instalar, basta acessar neste link oficial.
9. Live Server
Esta extensão inicia um servidor local com live reload para páginas estáticas e dinâmicas, é uma extensão bem simples que ajuda a testar aplicações estáticas em un clique, sem precisar instalar qualquer dependência adicional.
Para instalar, basta acessar neste link oficial.
10. Dracula Theme
Um dos melhores, senão, o melhor tema para a interface do VS Code, adicionando uma excelente aparência e realce ao editor, linhas e códigos.
Para instalar, basta acessar neste link oficial.
11. Material Icon Theme
Adiciona um ícone customizado para pastas e arquivos com base no seu nome e extensão, um excelente recurso visual para ajudar na identificação dos arquivos.
Para instalar, basta acessar neste link oficial.
12. GitGraph
A extensão GitGraph ajuda a visualizar o repositório e executar ações Git a partir de um gráfico. É uma extensão bem útil para visualizar as ramificações e históricos do Git.
Para instalar, basta acessar neste link oficial.
13. GitLens
A extensão GitLens é outra excelente extensão para Git, porquê ajuda a exibir rapidamente quem, por que e quando uma linha ou bloco de código foi alterado. Estas informações podem ser visualizadas direto no arquivo e é uma extensão altamente configurável.
Para instalar, basta acessar neste link oficial.
14. Thunder Client
Aqui um substituto leve e integrado ao VS Code para quem precisa testar uma API Rest e não quer abrir o Postman ou Insomnia. O Thunder Client é uma extensão de cliente de API Rest leve, criada por Ranga Vadhineni com um design simples e limpo.
Para instalar, basta acessar neste link oficial.
Bônus
15. GitHub Copilot
Aqui uma extensão que tem dado o que falar.
O GitHub Copilot é uma extensão que integra ao VSCode uma IA que sugere códigos enquanto você digita, quase um colega pareando com você. O GitHub Copilot ainda é uma ferramenta em preview, mas tem apresentado um resultado bem interessante e já tem bons reviews. Tecnicamente é uma IA alimentada pelo sistema OpenAI Codex AI, sendo treinada com textos públicos e bilhões de linhas de código.
Para instalar, basta acessar neste link oficial.
Considerações
As extensões para VS Code são um grande apoio no dia a dia de um desenvolvedor, talvez eu não esteja usando alguma muito relevante ainda, então se você conhece alguma e quiser me indicar, por favor deixe aqui nos comentários.
Espero que esta lista de extensões para VS Code te ajude no dia a dia. =)
Entre para minha newsletter e receba os novos conteúdos e novidades semanalmente.