Extensão Blazor que economiza tempo para o Visual Studio

Visão geral rápida: Facilitando o desenvolvimento em Blazor

Tim começa explicando o objetivo: ajudar os desenvolvedores que usam Blazor no Visual Studio a otimizar seu fluxo de trabalho. Ele afirma que essa extensão visa resolver pequenos incômodos, como o gerenciamento de arquivos Razor , namespaces e separação do código subjacente — tarefas que podem se tornar repetitivas ao trabalhar com vários componentes Blazor ou páginas Razor .

Esta extensão do Visual Studio não se trata apenas de conveniência; Trata-se de melhorar o desempenho de renderização, simplificar a interatividade da interface do usuário e acelerar o ciclo de desenvolvimento .NET — especialmente para aplicativos web Blazor .

Instalando a extensão por Jimmy Engström

Tim apresenta uma extensão do Visual Studio chamada BLM, criada por Jimmy Engström. Você pode encontrá-lo em Extensões > Gerenciar extensões no Visual Studio, pesquisando por "extensão BLM". Após a instalação, o Visual Studio precisa ser reiniciado.

Tim observa que a extensão inclui uma excelente documentação, extraída diretamente do arquivo README do GitHub . Isso significa que até mesmo desenvolvedores iniciantes podem entender como usá-la sem precisar sair do IDE.

Configurando um projeto Blazor

Após a instalação, você precisará criar um novo projeto Blazor ou abrir um já existente. Tim carrega um projeto de exemplo chamado "SuggestionApp", um projeto Blazor Server que utiliza o .NET Core. Este é um ótimo exemplo porque mostra uma combinação da sintaxe Razor com a lógica do código subjacente nos componentes.

Trabalhando com Razor Files e código subjacente

Tim abre um arquivo Razor e explica que ele contém tanto código HTML Razor quanto lógica C#. Se você quiser separar a lógica em um arquivo de código subjacente, a extensão torna isso tão simples quanto clicar com o botão direito do mouse > Criar Código Subjacente. Isso gera um arquivo Razor vinculado ao componente Razor .

Embora o exemplo já contenha algum código, Tim o exclui para simular um recomeço e cria um novo componente chamado Razor.

Escrevendo e Vinculando Componentes Razor

Em Razor, Tim define uma variável de string simples:

string test = "hello world";

string test = "hello world";

Em seguida, ele usa a expressão @test na marcação Razor para renderizá-la no navegador. Após a compilação do projeto, o componente está totalmente funcional. Este exemplo demonstra o comportamento padrão de renderização de conteúdo dinâmico em componentes Blazor usando o runtime .NET e assemblies compilados.

Recurso "Extrair para o código subjacente" do Visual Studio

Tim demonstra um recurso nativo do Visual Studio: extrair a lógica Razor embutida para um arquivo de código subjacente usando Ações Rápidas > Refatorar > Extrair para Código Subjacente. Isso separa a camada lógica da interface do usuário, uma boa prática para facilitar a manutenção e os testes.

A extensão adiciona a funcionalidade reversa.

É aqui que a extensão mostra seu verdadeiro valor. Embora o Visual Studio suporte a movimentação de código para um arquivo Razor, ele não permite movê-lo de volta. Com a extensão, Tim clica com o botão direito do mouse no arquivo Razor e escolhe "Mover código para o Razor". Instantaneamente, a lógica C# é movida de volta para o arquivo Razor .

Embora essa funcionalidade esteja marcada como beta, Tim a considera estável e útil quando os desenvolvedores desejam simplificar arquivos ou depurar a lógica diretamente no código.

Criando arquivos CSS e JS isolados

Tim mostra outra forma de economizar tempo: clique com o botão direito > Criar CSS isolado. Isso cria um arquivo chamado Razor, um padrão que o Blazor usa para estilização específica de componentes. Tim explica que, sem a extensão, você precisaria criar o arquivo manualmente através de Adicionar > Novo Item e garantir que o nome corresponda.

O mesmo recurso existe para o isolamento em JavaScript , permitindo que o comportamento com escopo seja facilmente associado a componentes individuais — uma parte importante do desenvolvimento web ao criar componentes interativos e seguros.

Encontre exemplos de uso de componentes em todo o aplicativo.

Outra funcionalidade útil é o recurso "Localizar usos do componente", que permite ao Tim clicar com o botão direito do mouse no componente NotAuthorized e selecionar "Encontrar usos do componente". Isso exibe rapidamente todos os arquivos onde esse componente é referenciado. É incrivelmente útil para refatoração, especialmente em grandes projetos .NET onde os componentes são reutilizados em várias páginas e layouts.

Gerar testes BUnit a partir de componentes

Os testes são uma parte vital de qualquer aplicativo web. Tim demonstra como gerar automaticamente testes BUnit — uma estrutura de testes para Blazor. Clicar com o botão direito do mouse em um componente e escolher "Gerar teste BUnit" permite que você escolha entre a sintaxe Razor ou C#.

A ferramenta gera a estrutura de teste necessária, permitindo uma configuração rápida para testes de interface do usuário. Esta solução é perfeita para desenvolvedores que desejam implementar segurança, validação de respostas ou comportamento da interface do usuário por meio de testes automatizados.

Extrair interfaces de usuário compartilhadas em componentes reutilizáveis.

Em seguida, Tim mostra como você pode selecionar qualquer bloco da interface Razor e escolher "Extrair para Componente". Em sua demonstração, ele extrai um botão dentro de um contêiner para um novo componente chamado TestButton. Isso possibilita um código mais limpo, melhor reutilização e design de interface do usuário modular — especialmente importante no desenvolvimento de aplicativos móveis, aplicativos híbridos Blazor ou aplicativos web de grande escala.

Visualizando rotas no seu aplicativo Blazor

Outro recurso de destaque é o Mostrar Rotas Blazor , acessível através de Extensões > BLM > Mostrar Rotas Blazor . Esta ferramenta lista todas as rotas definidas em seu projeto — aquelas definidas com a diretiva @page em arquivos Razor .

Tim demonstra que modificar a diretiva @page no Razor atualiza instantaneamente a lista de rotas. Você pode clicar duas vezes em qualquer rota da lista para abrir o componente correspondente. Isso torna o gerenciamento de navegação muito mais eficiente, especialmente em aplicativos que usam navegação aprimorada, vários modos de renderização ou componentes profundamente aninhados.

Executando o projeto com o .NET Watch

Tim compartilha uma dica importante sobre desempenho: usar o .NET Watch via PowerShell em vez de depender do recurso de recarregamento dinâmico integrado do Visual Studio. Ele explica que a recarga tradicional é mais lenta e menos consistente. Mas com a extensão, você pode clicar com o botão direito do mouse no seu projeto e selecionar "Executar .NET Watch".

Isso abre uma janela do PowerShell e executa o aplicativo usando o seguinte comando:

dotnet watch

dotnet watch

Isso possibilita recarregamento em tempo real, inicialização mais rápida e desenvolvimento mais responsivo. Para desenvolvedores que implantam em um servidor web ou criam aplicativos formalmente chamados de progressivos (PPA), esse aumento de velocidade pode melhorar significativamente a experiência de desenvolvimento.

Considerações finais: Por que você deve instalar esta extensão?

No último minuto, Tim recapitula o poder desta extensão do Visual Studio para desenvolvimento Blazor . Seja para criar um aplicativo Blazor WebAssembly, um projeto do lado do servidor ou qualquer coisa intermediária, esta ferramenta oferece:

• Criação mais rápida de arquivos e componentes

• Separação mais clara do código Razor e C#

• Testes e descoberta de rotas mais fáceis

• Melhor compreensão da árvore de renderização

• Melhor gerenciamento da sintaxe e da marcação compiladas

Tim recomenda fortemente que qualquer pessoa que trabalhe com aplicativos .NET, C# ou Blazor instale esta extensão e considere integrá-la ao seu conjunto de ferramentas padrão.

Conclusão: Blazor + Visual Studio = Ainda melhor com esta extensão

Se você estiver desenvolvendo aplicativos web modernos usando Blazor no Visual Studio, o passo a passo de Tim Corey mostra o quão poderosa essa pequena extensão pode ser. Com funcionalidades que melhoram o gerenciamento de arquivos, testes, roteamento e eficiência de compilação, proporciona grandes ganhos com configuração mínima.

Graças ao trabalho de Jimmy Engström, os desenvolvedores agora têm acesso a uma ferramenta que se alinha perfeitamente com o ecossistema Blazor e .NET Core , reduzindo o trabalho manual, permitindo um melhor design de componentes e melhorando a interatividade e a capacidade de manutenção geral do projeto.

Seja para aplicativos móveis, desktop ou web, esta extensão ajuda a liberar todo o potencial do Blazor, do Visual Studio e do runtime .NET . Para mais detalhes, assista ao vídeo do Tim e inscreva-se no canal dele para mais vídeos informativos sobre C# e desenvolvimento.