11 extensões do VS Code que você não sabia que precisava

O Visual Studio Code é um excelente ambiente de desenvolvimento de software, e não apenas porque possui excelentes recursos de edição de código e suporte a linguagem. Graças à sua rica cultura de extensões, o VS Code suporta muitas tarefas além da edição. Você encontrará extensões do VS Code para tudo, desde uma maneira mais rápida de navegar no editor até a inserção fácil de texto e imagens de espaço reservado.

Aqui estão 11 extensões do VS Code que você pode considerar ao montar seu ambiente de desenvolvimento. Alguns podem ser acréscimos extremamente úteis ao seu kit de ferramentas e até mesmo parte do seu fluxo de trabalho diário.

Painel

Os usuários do Chrome e Firefox devem estar familiarizados com o menu “discagem rápida” exibido por padrão quando você abre uma guia em branco. A extensão Dashboard faz algo semelhante para o VS Code, permitindo que você acesse rapidamente seus projetos ou espaços de trabalho mais comuns. Você pode facilmente adicionar, editar, remover ou reordenar projetos em seu Painel e pode usar cores, gradientes ou emojis para diferenciar os botões do projeto. O Dashboard usa um ícone para indicar que um projeto faz parte de um repositório Git.

Figura 1. Projetos usados com frequência podem ser fixados na página inicial do Dashboard, colocados em grupos personalizados e receber cores personalizadas.

Visualização de dados

O Visual Studio Code pode funcionar como um ambiente para preparação e disputa de dados, bem como para criação e execução de código. Mas se você estiver trabalhando com algo mais sofisticado do que os arquivos mais simples, os manipuladores de arquivos integrados para formatos de dados não serão suficientes. Data Preview adiciona manipuladores, ferramentas de visualização e funções de gerenciamento para uma ampla variedade de formatos comuns – não apenas JSON ou CSV, mas também Excel, Apache Parquet, Arrow, Avro, YAML e outros arquivos de configuração. O Data Preview usa uma biblioteca de análise de dados de streaming escrita em WebAssembly para lidar com o trabalho pesado, de forma que mesmo arquivos grandes (10 MB ou mais) não sejam um problema.

Imagens de espaço reservado

Se você precisar de imagens de espaço reservado para um projeto – que provavelmente é para desenvolvimento web, maquetes de UI ou documentação – não procure mais, imagens de espaço reservado. Esta extensão do VS Code permite inserir imagens como referências HTML de vários provedores populares de imagens gratuitas, incluindo serviços de banco de imagens como o Unsplash. Para selecionar uma imagem, basta fornecer um tamanho alvo junto com o fornecedor, e uma imagem aleatória que se encaixe no perfil será escolhida no fornecedor em questão.

vs espaço reservado para código — Figura 3. Imagens de espaço reservado utiliza muitas fontes comuns de imagens gratuitas para inserir imagens de espaço reservado como referências HTML ou pode copiar URLs de imagens para a área de transferência.

Falsificador de VSCode

Às vezes, você só precisa de algum texto de espaço reservado – uma linha de endereço falsa, um número de telefone falso ou uma linha rápida de lorem ipsum. Talvez você esteja construindo um exemplo de modelo HTML. Talvez você esteja substituindo dados falsos por dados reais para uma captura de tela ou um arquivo de configuração. VSCode Faker gera dados falsos de todos os tipos, rapidamente, sem que você precise pensar nisso. O VSCode Faker pode até ser configurado para gerar dados falsos para uma localidade específica, desde que você tenha o ID da localidade.

vs falsificador de código — Figura 4. Texto “Lorem ipsum” gerado com VSCode Faker. O texto falso do VSCode Faker pode ser uma frase única ou parágrafos inteiros.

Contador de palavras

A contagem de palavras e o tempo de leitura são muito úteis para postagens de blogs e artigos de notícias, então por que parar por aí? Não seria bom ter uma ideia de quanto tempo levará para digerir um README ou saber rapidamente a contagem atual de palavras da documentação que você está escrevendo? WordCounter coloca uma palavra detalhada, caractere, linha, parágrafo e medidor de tempo de leitura na barra de status do VS Code. É altamente configurável; você pode alterar o que constitui um delimitador de palavras, por exemplo, ou a contagem de palavras por minuto usada para calcular seu tempo de leitura.

Saltitante

Os fãs de editores modais adoram a maneira como podem mergulhar em uma linha, uma página ou um documento até algum ponto lógico específico com apenas algumas teclas e sem passar o mouse. Jumpy adiciona a capacidade de percorrer rapidamente seu código usando apenas o teclado.

Quando você ativa o Jumpy, seu código na tela é decorado em pontos-chave (quebras de linha, início de expressões, etc.) com rótulos de código de duas letras. Para acessar uma determinada etiqueta, basta digitar o código de duas letras. Você pode personalizar os símbolos usados para os códigos ou usar os padrões, que são de A a Z e de 0 a 9.

Observe que por padrão o Jumpy não possui qualquer atalho de teclado. Você mesmo deve configurar uma para usá-la, o que ajuda a evitar conflitos com outras extensões.

vs código nervoso — Figura 6. Jumpy no modo linha. Digitar um dos códigos de duas letras mostrados moverá o cursor para esse ponto no arquivo.

Alternar

As configurações do VS Code podem ser um labirinto para explorar e modificar. É ainda menos divertido se você procura as mesmas configurações repetidamente, para ativá-las ou desativá-las dependendo do caso.

A extensão Toggle do Peng Lv permite que você pegue qualquer configuração do VS Code e atribua um atalho de teclado a ela. Toque na tecla e você troca o valor da configuração; é simples assim. Você pode até atribuir várias configurações para serem alternadas pelo mesmo atalho de teclado.

Uma captura de tela da linha de comando de alternância. — Figura 7. Com Toggle, você pode expor e alterar opções ocultas nas configurações do VS Code pressionando uma tecla de atalho.

A única desvantagem do Toggle é que você precisa configurar manualmente o arquivo de atalho de teclado, mas isso não é muito difícil. Usar Preferências: abrir atalhos de teclado (JSON) para criar ou abrir o arquivo, cole o exemplo fornecido e use a referência de atalho de teclado para configurar suas ligações.

Ferramentas elétricas de texto

VS Code é, no fundo, um editor de texto. “Texto” não significa apenas código de programa; pode significar documentação em vários formatos, incluindo texto simples. A extensão Text Power Tools equipa o VS Code com uma bateria de utilitários de processamento de texto não incluídos por padrão.

Dentre as ferramentas disponíveis nesta coleção estão: filtrar linhas de um arquivo por expressões regulares; altere ou troque a caixa do texto selecionado; acrescentar ou anexar texto a linhas ou regiões; classificar regiões de texto por vários critérios; cole dados da área de transferência de maneira inteligente em vários formatos; gerar dados de espaço reservado em vários formatos; alterar codificações para seleções; alterar formulários de normalização Unicode; e muitos mais.

Um complemento muito útil são os “slots de texto” – uma maneira de armazenar rapidamente até cinco entradas da área de transferência e reutilizá-las. Se você ainda não estiver usando um utilitário aprimorado de área de transferência, esta é uma maneira prática de obter a mesma funcionalidade.

Ferramentas SQL

Ao trabalhar com bancos de dados, você tem algumas opções: a interface de linha de comando do banco de dados; uma linguagem de programação com biblioteca de acesso a dados; ou um aplicativo “workbench” com CLI e GUI. Essa última opção é a mais fácil de usar e conveniente. SQLTools transforma o VS Code em um sistema simples de ambiente de trabalho de banco de dados, com subextensões para trabalhar com bancos de dados comuns como SQLite, MySQL, MariaDB, PostgreSQL e muitos mais. Suas funções de sugestão automática facilitam a escrita de consultas, embora não permitam a edição interativa de dados por meio de uma interface semelhante a uma planilha, como encontrada em alguns aplicativos de ambiente de trabalho.

SQLTools é uma extensão do VS Code que fornece um ambiente de trabalho para muitos bancos de dados diferentes. — Figura 9. SQLTools fornece um ambiente de trabalho para muitos bancos de dados diferentes. O usuário instala outros complementos para fornecer conectividade para cada tipo de banco de dados.

CodeSnap

Às vezes, a maneira mais rápida e direta de compartilhar seu código é fazer uma captura de tela dele. CodeSnap permite fazer isso diretamente no VS Code sem a necessidade de ferramentas externas. Selecione o código em questão, pressione a tecla atribuída e o trecho de código será salvo em um arquivo ou copiado para a área de transferência. Qualquer tema que você tenha ativado no momento também será usado para a captura de tela. Os garfos do CodeSnap proliferaram desde que foi lançado, com pequenas variações em suas funções. Um exemplo é CodeSnap-Plus, que adiciona destaque de linha na captura de tela.

Código para HTML

Muitas pessoas que compartilham código usam um serviço de colagem, que adiciona automaticamente destaque de sintaxe para linguagens comuns. E se você quiser compartilhar seu código como HTML, mas não tiver um mecanismo para realçar a sintaxe — por exemplo, em um blog? A extensão CodeToHTML pega qualquer trecho de código e o converte em HTML, com destaque incorporado automaticamente ao trecho por meio de informações de estilo embutidas.