Para muitos desenvolvedores, o Visual Studio Code é a solução ideal para edição de código. A popularidade da ferramenta pode ser explicada tanto pelo preço (gratuito) como pela ampla gama de recursos oferecidos. Além disso, quanto mais popular é o programa, maior é sua comunidade, o que implica em facilidade para encontrar informações, para debater problemas e para encontrar suporte. Ao mesmo tempo, outros desenvolvedores e empresas acabam contribuindo com a evolução da ferramenta criando um ecossistema de utilitários que expandem sua funcionalidade.
Desta forma, o VS Code acaba se tornando um canivete suíço para diferentes cenários, com uma vasta oferta de extensões. Separar o joio do trigo é fundamental e cada time, cada necessidade, certamente encontrará algum tipo de plugin bastante específico para agilizar seu fluxo de trabalho. Mesmo assim, existem diversas extensões que podem ser consideradas essenciais para praticamente todos os desenvolvedores. É possível que você já esteja utilizando alguma delas no seu Visual Studio Code, mas separamos aqui dez opções que avaliamos como indispensáveis para quem trabalha com esse editor de código.
1) GitHub Copilot
A esta altura do campeonato, o GitHub Copilot dispensa apresentações. Se você ainda não está usando no Visual Studio Code, é importante saber que a extensão ajuda os desenvolvedores com sugestões de código rápidas e adequadas para cada linha, libertando o desenvolvedor da necessidade de pesquisar constantemente em documentação ou procurar respostas no StackOverflow, por exemplo. O GitHub Copilot fornecerá sugestões para completar seu código com base no contexto do que está se digitando e/ou nos comentários do código. Com todas essas vantagens, a ferramenta pode ajudar a reduzir a carga cognitiva dos desenvolvedores e economizar tempo ao escrever código.
Download no Marketplace: https://marketplace.visualstudio.com/items?itemName=GitHub.copilot
2) Peacock
O Peacock é uma das melhores extensões para quem deseja customizar ao máximo sua experiência visual no VS Code. Essa extensão permite alterar as cores do espaço de trabalho. Mais do que somente uma opção de customização, esse recurso é bastante é útil quando se está trabalhando com várias instâncias do VS Code e se deseja identificar imediatamente a instância com a qual se está trabalhando atualmente. Com Peacock, é possível determinar uma cor distinta para cenários em que se utiliza recursos de integração remota ou quando estiver acontecendo uma sessão Live Share, seja como convidado ou como anfitrião.
Download no Marketplace: https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock
3) vscode-icons
O vscode-icons permite criar ícones descritivos para categorizar facilmente arquivos e pastas dentro do Visual Studio Code. Essa funcionalidade ajuda a tornar o código mais visualmente atraente, facilitando o trabalho colaborativo e a retenção de informação. A extensão permite alterar a aparência dos ícones ou até mesmo quais ícones estão associados a cada extensão. vscode-icons também é capaz de determinar automaticamente o tipo de projeto ativo no espaço de trabalho do desenvolvedor e alternar os ícones de acordo. Além de sua própria biblioteca de ícones, a extensão permite que o usuário importe os ícones que desejar para dentro da ferramenta.
Download no Marketplace: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
4) Swimm
Swimm é uma extensão que adota o chamado princípio de Documentação Contínua. Isso significa que o plugin oferece uma maneira fácil de escrever documentação acoplada ao código que faz referência a trechos de código ao vivo diretamente. Com o recurso exclusivo de Auto-sync, o Swimm mantém esses documentos atualizados automaticamente à medida que o código ao qual eles se referem muda, evitando a falta de sincronia entre o código e sua documentação. Assim, é possível criar documentação interna para atender a qualquer necessidade do desenvolvedor – tutoriais, guias de instruções, documentos de design, referências técnicas e muito mais.
Download no Marketplace: https://marketplace.visualstudio.com/items?itemName=Swimm.swimm
5) Prettier
Prettier é uma ferramenta de formatação poderosa gratuita, que “embeleza” a forma como seu código é exibido, a partir de um estilo consistente com regras próprias. Oferece suporte a JavaScript, TypeScript, Flow, JSX, JSON, CSS (mais SCSS e Less), HTML, Vue, Angular, GraphQL , YAML e mais. Se sua linguagem preferida não está coberta nativamente pela extensão, é possível instalar plugins que também habilitam suporte a Ruby, XML, PHP e outros. Apesar de trazer regras próprias, testadas em milhares de cenários em sua longa trajetória na comunidade, Prettier também permite que o usuário customize suas regras internas de acordo com seu gosto a partir de um arquivo modificável de configuração.
Download no Marketplace: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
6) Regex Previewer
Não é todo mundo que domina expressões regulares e mesmo aqueles que conhecem o processo podem precisar de uma ajuda de vez em quando, principalmente quando se trabalha em projetos complexos. A extensão Regex Previewer tem como objetivo facilitar a criação de expressões regulares, permitindo ajustes finos que as tornam perfeitas. O plugin gera um documento paralelo que corresponda à expressão regular declarada, garantindo a visualização prévia dos resultados de forma comparativa. Além disso, o recurso traz embutidos vários exemplos de como escrever uma expressão regular para diferentes casos de uso.
Download no Marketplace: https://marketplace.visualstudio.com/items?itemName=chrmarti.regex
7) Import Cost
Import Cost é uma extensão criada pela Wix para o VS Code. É uma extensão simples, com uma única funcionalidade extremamente útil: exibir o custo dos seus imports em linha com o seu código e fornecer uma análise do tamanho de cada import. Desta forma, é possível identificar facilmente quais imports estão fazendo com que o código fique inchado e tomar medidas para otimizá-los. Isso pode ajudar a melhorar o desempenho da aplicação desenvolvida, especialmente em casos em que se lida com bibliotecas ou módulos grandes. Uma vez instalada, a extensão começará automaticamente a rastrear o tamanho dos imports e exibirá as informações em linha com o código.
Download no Marketplace: https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
8) GitLens
O GitLens pode ser entendido como um potencializador da experiência com o Git no VS Code. Essa extensão foi projetada para melhorar o foco, a produtividade e a colaboração, com um conjunto poderoso de ferramentas que ajudam equipes a entender, escrever e revisar código. O plugin se posiciona diretamente dentro do editor, reduzindo a troca de contexto e promovendo um fluxo de trabalho mais eficiente. Desta forma, é possível visualizar rapidamente a autoria do código por meio de anotações Git e CodeLens, navegar e explorar repositórios do Git, ter acesso a visualizações avançadas e usar poderosos comandos de comparação.
Download no Marketplace: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
9) Thunder Client
Thunder Client é uma extensão do Visual Studio Code que permite enviar solicitações HTTP e testar APIs de dentro do editor. A ferramenta permite salvar solicitações e agrupá-las em coleções, facilitando o gerenciamento e o compartilhamento. O Thunder Client também oferece uma ampla gama de recursos para trabalhar com solicitações HTTP, incluindo suporte a vários métodos de autenticação, validação automática de resposta e rastreamento de tempo de resposta. Ele também pode gerar trechos de código para várias linguagens de programação, facilitando a integração de chamadas de API no código que está sendo produzido no editor.
Download no Marketplace: https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client
10) Settings Sync
Agora que você já terminou de instalar diversas extensões dessa lista (e mais algumas que você foi descobrindo pelo caminho), esse é um bom momento para saber da existência do Settings Sync. Essa extensão permite sincronizar praticamente tudo o que você personaliza no VSCode com o GitHub. Isso inclui desde configurações até atalhos de teclado e as extensões instaladas. Dessa forma, o desenvolvedor terá acesso ao seu ambiente de desenvolvimento preferido em qualquer dispositivo, em vez de ter que programar em um ambiente básico em novos dispositivos ou ter que configurar tudo manualmente outra vez.
Download no Marketplace: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
