GitHub Copilot, Swimm, Prettier e muito mais. Aumente sua produtividade e colaboração com esses 5 plug-ins obrigatórios do Visual Studio Code para equipes de desenvolvimento.

À medida que aumenta a demanda por desenvolvimento eficiente e de alta qualidade, também aumenta a necessidade de ferramentas que possam ajudar a agilizar o processo. O Visual Studio Code é um editor de código popular que ganhou imensa popularidade entre os desenvolvedores devido à sua flexibilidade e extensa biblioteca de plug-ins. Com a ajuda dos plug-ins certos, os desenvolvedores podem aumentar sua produtividade e acelerar o processo de desenvolvimento.

Neste artigo, discutiremos os 5 melhores plug-ins do Visual Studio Code essenciais para equipes de desenvolvedores. Esses plug-ins ajudarão você a escrever um código melhor, colaborar com mais eficiência e melhorar seu fluxo de trabalho geral. Seja você um iniciante ou um desenvolvedor experiente, esses plug-ins certamente tornarão sua vida profissional mais fácil e produtiva.

Vamos começar!

1. GitHub Copilot — Seu programador AI Pair.

O GitHub Copilot é um assistente de código baseado em IA desenvolvido pelo GitHub em colaboração com o OpenAI . O sistema que ele usa, chamado OpenAI Codex , é baseado na tecnologia GPT-3 (Generative Pre-trained Transformer) da OpenAI e analisa a linguagem natural para fornecer sugestões de código e preenchimento automático durante a programação.

O Copilot ajuda os desenvolvedores com sugestões de código rápidas e de melhor ajuste para cada linha que eles podem aceitar ou rejeitar. sem ter que pesquisar constantemente na documentação ou tropeçar nas respostas do StackOverflow. A remoção dessa barreira específica à entrada sozinha ajuda as equipes a se moverem mais rapidamente, iterar e melhorar, de acordo com este estudo .

Depois de configurá-lo, o GitHub Copilot fornecerá sugestões para concluir seu código com base no contexto do que você está digitando e/ou nos comentários do código. Você pode aceitar ou rejeitar as sugestões conforme necessário — e é fácil entrar no fluxo aqui, pressionando TAB para aceitar sugestões e ter a próxima pronta imediatamente.

O GitHub Copilot pode ajudar a reduzir a carga cognitiva dos desenvolvedores e economizar seu tempo ao escrever o código. No entanto, é importante lembrar que a extensão está sendo treinada continuamente, portanto, algumas sugestões podem nem sempre ser precisas . O bom, porém, é que o GitHub Copilot pode e aprende com seus comentários para ser mais preciso no futuro.

Para garantir que sua privacidade seja protegida, o GitHub Copilot usa um modelo de aprendizado federado que agrega dados de vários usuários em vez de coletar dados individuais. A extensão também fornece uma maneira de relatar quaisquer problemas ou preocupações diretamente à equipe de desenvolvimento.

2. Swimm - Docs-as-code em esteróides!

Todo desenvolvedor merece documentação que os ajude a entender e navegar na base de código, com contexto. Ou seja, eles devem ser capazes de encontrar as informações de que precisam, quando precisam. Eles não deveriam ter que fazer engenharia reversa de código ou fazer uma caça ao tesouro - saltando entre Slack, correspondência por e-mail, comentários de código e Notion/Confluence - apenas para descobrir como um determinado recurso ou módulo funciona ... e é exatamente isso que o Swimm pretende abordar, com o seu princípio de Documentação Contínua.

Swimm faz o que as formas convencionais de documentar bases de código não podem, de três maneiras:

• Ele fornece uma maneira fácil de escrever documentação acoplada ao código que faz referência direta a trechos de código ao vivo. Usando markdown e modelos aprimorados, você cria documentação interna para atender a qualquer necessidade do desenvolvedor - tutoriais, instruções, documentos de design, referência técnica e muito mais.
• A sincronização automática patenteada da Swimm mantém esses documentos atualizados automaticamente à medida que o código a que eles se referem muda - evitando desvios entre o código e sua documentação.
• Ele melhora a descoberta de documentação, dando aos desenvolvedores acesso de leitura e gravação aos documentos onde eles mais precisam - diretamente dentro de seu IDE, junto com o código ao qual ele faz referência.

Na próxima vez que iniciar seu IDE, faça login/registre-se e conecte um repositório GitHub. Agora você pode:

a) Comece a criar uma nova documentação para qualquer arquivo em que esteja trabalhando.

b) Ou percorra a base de código e, se vir o ícone de 'onda', saberá que há documentação do Swimm associada a essa seção do código. Você pode clicar nele para abrir esses documentos dentro do próprio IDE ou em uma nova janela do navegador - no aplicativo da web Swimm.

Tentar lidar com a documentação interna sem uma solução como o Swimm frequentemente levará a documentos que são muito amplos ou muito restritos para serem imediatamente úteis para os desenvolvedores, frequentemente desatualizados e frequentemente fragmentados e difíceis de descobrir - todas as coisas que levam os desenvolvedores a perder confiança na documentação como um processo em si, trazendo produtividade para um rastreamento.

Swimm e seu plug-in VSCode podem ajudar desenvolvedores e equipes de desenvolvimento a alcançar o seguinte:

• Reduza o tempo de integração para novos desenvolvedores em 55% porque eles serão capazes de entender a base de código muito mais rapidamente devido à documentação acoplada ao código que é atualizada automaticamente para minimizar o desvio ( source ) .
• Aumente a produtividade dos desenvolvedores em 50% com documentação fácil de criar, encontrar e acessar ( source ).
• Permita a colaboração entre equipes sempre fornecendo documentação interna relevante e atualizada, alterações e registros de decisões de engenharia tomadas relacionadas à infraestrutura, APIs, arquitetura e muito mais.

3. Prettier — O formatador de código automatizado e opinativo.

O Prettier é um formatador de código — e uma ferramenta quase essencial para desenvolvedores que desejam economizar tempo, aumentar a produtividade e garantir um estilo de código consistente em todo o projeto. Ele oferece suporte a várias linguagens de programação, incluindo JavaScript, TypeScript, CSS, HTML e muito mais.

Com formatação de código consistente aplicada automaticamente (baseada em regras que você pode personalizar para sua organização/projeto) que é acionada em uma única combinação de teclas (geralmente, Alt + Shift + F ou sempre que você salva), você economiza tempo, faz Ctrl -C + Ctrl-V de documentos para o IDE muito mais confiável, além de detectar erros e corrigi-los antes que acabem falhando nas compilações.

Depois de instalado, você pode definir suas configurações criando um arquivo .prettierrc no diretório raiz do seu projeto. Você pode distribuir esse arquivo por toda a organização para garantir a consistência na formatação do código em toda a organização ou usar outros, se quiser adotar o estilo de outra pessoa.

Prettier tira a preocupação de garantir a legibilidade do código de suas mãos — e isso é um grande negócio, já que a legibilidade do código está diretamente relacionada à capacidade de manutenção do código , especialmente para grandes bases de código.

4. Custo de importação — Calcule o tamanho de suas importações.

Import Cost é uma extensão do Visual Studio Code que foi criada pelo Wix . É uma extensão simples, mínima, mas extremamente útil, que exibe o custo de suas importações em linha com seu código e fornece um detalhamento do tamanho de cada importação.

Com Import Cost, você pode identificar facilmente quais importações estão causando o inchaço do seu código e tomar medidas para otimizá-las. Isso pode ajudar a melhorar o desempenho do seu aplicativo, especialmente nos casos em que você está lidando com grandes bibliotecas ou módulos.

Depois de instalado, ele começará a rastrear automaticamente o tamanho de suas importações e exibirá as informações alinhadas com seu código.

Com Import Cost, você toma decisões informadas sobre quais importações/pacotes usar e quais evitar. Ao fornecer informações sobre o tamanho de suas importações, você pode priorizar a otimização daquelas que têm maior impacto no tamanho e no desempenho do seu código.

5. IntelliSense — Sugestões e conclusões de código.

Uma extensão do Intellisense para a linguagem com a qual você está trabalhando fornece conclusão de código inteligente, realce de sintaxe e outros recursos úteis, ajudando você a escrever código com mais rapidez e eficiência.

Não há substituto para o IntelliSense ao trabalhar com linguagens e ferramentas de desenvolvimento complexas e modernas. Ele fornece sugestões contextuais (dicas de código) e preenchimentos automáticos com base na sintaxe, estrutura e, é claro, no idioma que está sendo usado. À medida que você digita, ele pode sugerir funções, métodos, propriedades e outros elementos relevantes relacionados ao contexto atual.

Existem extensões Intellisense para uma ampla variedade de linguagens e ambientes de programação, incluindo HTML/CSS, Javascript, TypeScript, Python, Rust, Go e muito mais, e há até extensões Intellisense no Visual Studio Marketplace para estruturas, bibliotecas e ferramentas de desenvolvimento comuns como React, Angular, Svelte, Django, Vue, Docker, NPM, Helm… e até CSS Tailwind!

Escolha Bônus - Thunder Client

Thunder Client é uma extensão do Visual Studio Code que permite enviar solicitações HTTP e testar APIs de dentro do editor.

Um dos principais benefícios do Thunder Client é sua capacidade de armazenar e organizar suas solicitações. Ele permite salvar solicitações e agrupá-las em coleções, facilitando o gerenciamento e o compartilhamento com sua equipe, assim como o Postman .

O Thunder Client também fornece uma ampla gama de recursos para trabalhar com solicitações HTTP, incluindo suporte para 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 suas chamadas de API ao seu código.

Depois de instalado, o Thunder Client adicionará um novo ícone à barra lateral do VS Code, permitindo que você acesse rapidamente suas solicitações e coleções salvas. Aqui está um guia detalhado sobre como usar o plugin Thunder Client .

O Thunder Client é uma ferramenta valiosa para equipes de desenvolvimento, pois simplifica o teste de API e os fluxos de trabalho de desenvolvimento. Com sua interface intuitiva, gerenciamento de solicitações, suporte a autenticação múltipla e validação de resposta automática, o Thunder Client é obrigatório para qualquer equipe de desenvolvedores que trabalha com APIs.

Empacotando

Neste artigo, abordamos cinco das melhores extensões do VSCode para desenvolvedores. No geral, essas são ferramentas essenciais que melhoram a produtividade, a qualidade do código e a colaboração.

O GitHub Copilot ajuda você a escrever mais código, mais rápido, fornecendo sugestões de código assistidas por IA. O Swimm ajuda você a criar e encontrar facilmente a documentação acoplada ao código e atualizada automaticamente exatamente quando você precisa, ao lado do código relevante em seu IDE. Com o Prettier , você pode formatar seu código de forma consistente e automática, economizando tempo e reduzindo erros. Custo de importação pode ajudá-lo a otimizar seu projeto, mostrando o tamanho e o custo de seus módulos importados. E, finalmente, com o IntelliSense, você pode escrever código com mais rapidez e eficiência, fornecendo sugestões e trechos de código relevantes.

Ao usar esses plug-ins, você pode simplificar seus fluxos de trabalho, criar boa documentação em tempo real, melhorar a consistência do código e criar software de alta qualidade que atenda às necessidades de seus clientes.