Extensões do Visual Studio Code para aumentar a produtividade em 2021

O Visual Studio Code é um editor de código simples, mas altamente extensível. Como desenvolvedores, passamos muito tempo nele — e é por isso que é tão importante aproveitar ao máximo nossos editores e otimizar e automatizar os processos sempre que possível.

Ao entrarmos em 2021, elaborei uma lista de extensões que eu mesmo uso diariamente, na esperança de que ela ajude você a economizar tempo e aumentar a produtividade neste ano. Vale ressaltar que, embora as extensões destacadas abaixo sejam adequadas para todos os idiomas, também existem plug-ins específicos para cada idioma que vale a pena explorar.

Como instalar uma extensão do VS Code

1. Abra o Visual Studio Code.

2. Clique no botão destacado no painel à esquerda.

3. Na caixa “Pesquisar extensões”, digite o nome da extensão que você deseja baixar.

4. Escolha o resultado correto da pesquisa e clique em “Instalar”.

Extensões selecionadas do VSCode

Colorizador de Pares de Colchetes 2

O Bracket Pair Colorizer 2 permite identificar pares de chaves com cores. O usuário pode definir quais tokens devem ser emparelhados e quais cores devem ser usadas.

Bracket Pair Colorizer 2

Contêineres remotos

O Remote Containers permite que você utilize um contêiner Docker como um ambiente de desenvolvimento completo. Independentemente de você fazer a implantação em contêineres ou não, os contêineres constituem um excelente ambiente de desenvolvimento, pois permitem que você:

• Desenvolva usando uma cadeia de ferramentas consistente e facilmente reproduzível no mesmo sistema operacional em que você faz a implantação.

• Alterne rapidamente entre diferentes ambientes de desenvolvimento isolados e faça atualizações com segurança, sem se preocupar com possíveis impactos na sua máquina local.

• Facilite a integração de novos membros da equipe/colaboradores em um ambiente de desenvolvimento consistente.

• Experimente novas tecnologias ou crie uma cópia de um código-fonte sem afetar sua configuração local.

Remote Containers

Custo de importação

O “Custo de importação” exibirá diretamente no editor o tamanho do pacote importado. A extensão utiliza o webpack com o babili-webpack-plugin para detectar o tamanho do pacote importado.

Intellisense de caminho

O Intellisense de caminhos ajuda a preencher automaticamente os nomes de arquivos. Essa extensão auxilia os desenvolvedores a definirem caminhos de arquivos com precisão.

Path Intellisense

Compartilhamento ao vivo

O Live Share oferece a possibilidade de editar e depurar em conjunto, fazer chamadas de áudio, conversar com seus colegas, compartilhar terminais e servidores, visualizar comentários e muito mais.

Pavão

O Peacock altera sutilmente a cor da sua área de trabalho do Visual Studio Code. É ideal quando você tem várias instâncias do VS Code, usa o VS Live Share ou os recursos remotos do VS Code e deseja identificar rapidamente o seu editor.

Peacock

Mais bonito

O Prettier é um formatador de código que impõe um estilo próprio. Ele garante um estilo consistente ao analisar seu código e reformulá-lo de acordo com suas próprias regras, que levam em conta o comprimento máximo da linha, quebrando as linhas quando necessário.

Quokka

O Quokka.js é uma ferramenta de produtividade para desenvolvedores destinada à prototipagem rápida em JavaScript/TypeScript. Os valores em tempo de execução são atualizados e exibidos no seu IDE ao lado do código à medida que você digita.

Quokka

Comentários melhores

O Better Comments vai te ajudar a criar comentários mais fáceis de entender no seu código. Com essa extensão, você poderá categorizar suas anotações em:

• Alertas

• Consultas

• Tarefas pendentes

• Destaques

• O código comentado também pode ser formatado de forma a deixar claro que ele não deveria estar ali

• Qualquer outro estilo de comentário que você desejar pode ser definido nas configurações

  Better comments

Sincronização de configurações

O Settings Sync sincroniza configurações, trechos de código, temas, ícones de arquivos, inicialização, atalhos de teclado, espaços de trabalho e extensões entre vários computadores usando o GitHub Gist.

Remoto - SSH

Remoto — O SSH permite que você utilize qualquer máquina remota com um servidor SSH como seu ambiente de desenvolvimento. Isso pode simplificar significativamente o desenvolvimento e a resolução de problemas em uma ampla variedade de situações. Você pode:

• Desenvolva no mesmo sistema operacional em que você faz a implantação ou utilize hardware maior, mais rápido ou mais especializado do que o de sua máquina local.

• Alterne rapidamente entre diferentes ambientes de desenvolvimento remotos e faça atualizações com segurança, sem se preocupar com possíveis impactos na sua máquina local.

• Acesse um ambiente de desenvolvimento já existente a partir de várias máquinas ou locais.

• Depurar um aplicativo em execução em outro local, como nas instalações de um cliente ou na nuvem.

Não é necessário ter nenhum código-fonte em seu computador local para aproveitar esses benefícios, já que a extensão executa comandos e outras extensões diretamente no computador remoto. Você pode abrir qualquer pasta no computador remoto e trabalhar com ela exatamente como faria se a pasta estivesse no seu computador.

Remote SSH

Polacode

Essa última extensão é bem divertida: crie uma foto no estilo Polaroid do seu código! Se você estava pensando em tirar uma captura de tela do seu código para compartilhar no Twitter ou em um post de blog, recomendo fortemente usar essa ferramenta para obter um resultado esteticamente mais atraente.

Polacode

Quais são suas extensões favoritas?

Isso encerra minha lista das extensões mais usadas! Espero que você tenha encontrado alguma que melhore sua produtividade como desenvolvedor neste ano. Quais são suas extensões favoritas do VS Code que te ajudam durante o desenvolvimento? Compartilhe-as nos comentários ou me conte no Twitter!