Zeitsparende Blazor-Erweiterung für Visual Studio

Schneller Überblick: Blazor Entwicklung einfacher machen

Tim beginnt mit der Erläuterung des Ziels: Entwicklern, die Blazor in Visual Studio verwenden, zu helfen, ihren Arbeitsablauf zu optimieren. Er sagt, diese Erweiterung zielt auf kleine Ärgernisse wie die Verwaltung von Blazor-Dateien, Namespaces und Code-Behind-Trennung ab - Aufgaben, die sich bei der Arbeit mit mehreren Blazor-Komponenten oder Blazor-Seiten wiederholen können.

Bei dieser Visual Studio-Erweiterung geht es nicht nur um Bequemlichkeit; es geht darum, die Rendering-Leistung zu steigern, die Interaktivität der Benutzeroberfläche zu vereinfachen und den .NET-Entwicklungszyklus zu beschleunigen - insbesondere für Blazor-Webanwendungen.

Installation der Erweiterung von Jimmy Engström

Tim stellt eine Visual Studio-Erweiterung namens BLM vor, die von Jimmy Engström entwickelt wurde. Sie finden sie über Erweiterungen > Erweiterungen verwalten in Visual Studio, indem Sie nach "BLM-Erweiterung" suchen Nach der Installation muss Visual Studio neu gestartet werden.

Tim merkt an, dass die Erweiterung eine ausgezeichnete Dokumentation enthält, die direkt aus der README-Datei von GitHub stammt. Das bedeutet, dass sogar neue Entwickler verstehen können, wie man sie benutzt, ohne die IDE verlassen zu müssen.

Einrichten eines Blazor Projekts

Nach der Installation müssen Sie entweder ein neues Blazor Projekt erstellen oder ein bestehendes Projekt öffnen. Tim lädt ein Beispielprojekt namens "SuggestionApp", ein Blazor Server-Projekt mit .NET Core. Dies ist ein hervorragendes Beispiel, weil es eine Mischung aus Razor-Syntax und Code-Behind-Logik in Komponenten zeigt.

Arbeiten mit Razor-Dateien und Code-Behind

Tim öffnet eine Profile.razor-Datei und erklärt, dass sie sowohl Razor-Markup als auch C#-Logik enthält. Wenn Sie die Logik in eine Code-Behind-Datei auslagern möchten, ist das mit der Erweiterung so einfach wie ein Rechtsklick > Code Behind erstellen. Dadurch wird eine .razor.cs-Datei erzeugt, die mit der .razor-Komponente verknüpft ist.

Obwohl das Beispiel bereits etwas Code enthält, löscht Tim diesen, um einen Neuanfang zu simulieren, und erstellt eine neue Komponente namens Test.razor.

Schreiben und Verknüpfen von Razor-Komponenten

In Test.razor definiert Tim eine einfache String-Variable:

string test = "hello world";

string test = "hello world";

Anschließend verwendet er den @test-Ausdruck im Razor-Markup, um es im Browser darzustellen. Nach dem Kompilieren des Projekts ist die Komponente voll funktionsfähig. Dieses Beispiel zeigt das Standardverhalten beim Rendern von dynamischen Inhalten in Blazor-Komponenten unter Verwendung der .NET-Laufzeitumgebung und kompilierter Assemblies.

Visual Studio's Extract to Code-Behind Funktion

Tim demonstriert eine native Funktion von Visual Studio: das Extrahieren von Inline-Razor-Logik in eine Code-Behind-Datei mithilfe von Quick Actions > Refactor > Extract to Code Behind. Dadurch wird die logische Ebene von der Benutzeroberfläche getrennt, was eine gute Praxis für die Wartbarkeit und das Testen darstellt.

Erweiterung fügt die umgekehrte Funktionalität hinzu

Hier zeigt die Erweiterung ihren wahren Wert. Visual Studio unterstützt zwar das Verschieben von Code in eine .razor.cs-Datei, erlaubt aber nicht das Zurückschieben von Code. Mit der Erweiterung klickt Tim mit der rechten Maustaste auf die Datei .razor.cs und wählt "Move Code Behind to Razor" Sofort wird die C#-Logik zurück in die Razor-Datei verschoben.

Obwohl diese Funktion als Beta-Version gekennzeichnet ist, hält Tim sie für stabil und hilfreich, wenn Entwickler Dateien vereinfachen oder Logik inline debuggen möchten.

Erstellen von isolierten CSS- und JS-Dateien

Tim stellt eine weitere Zeitersparnis vor: Rechtsklick > Isoliertes CSS erstellen. Dadurch wird eine Datei namens Test.razor.css erstellt, ein Muster, das Blazor für komponentenspezifisches Styling verwendet. Tim erklärt, dass man ohne die Erweiterung die Datei manuell über Hinzufügen > Neues Element erstellen und sicherstellen muss, dass die Benennung übereinstimmt.

Die gleiche Funktion gibt es auch für die JavaScript-Isolierung, die es ermöglicht, einzelnen Komponenten ein bestimmtes Verhalten zuzuordnen - ein wichtiger Bestandteil der Webentwicklung bei der Erstellung interaktiver und sicherer Komponenten.

Finden Sie Komponentenverwendungen in der gesamten Anwendung

Eine weitere hilfreiche Funktion ist, dass Tim mit der rechten Maustaste auf die Komponente NotAuthorized klickt und "Find Component Usages" auswählt Dadurch werden schnell alle Dateien angezeigt, in denen auf diese Komponente verwiesen wird. Es ist unglaublich nützlich für das Refactoring, insbesondere in großen .NET-Projekten, in denen Komponenten über Seiten und Layouts hinweg wiederverwendet werden.

Erzeugen von BUnit-Tests aus Komponenten

Testen ist ein wichtiger Bestandteil jeder Webanwendung. Tim zeigt, wie man BUnit-Tests - ein Test-Framework für Blazor - automatisch generiert. Wenn Sie mit der rechten Maustaste auf eine Komponente klicken und "BUnit-Test generieren" wählen, können Sie zwischen Razor- und C#-Syntax wählen.

Das Tool generiert das notwendige Testgerüst und ermöglicht eine schnelle Einrichtung von UI-Tests. Dies ist perfekt für Entwickler, die Sicherheit, Antwortvalidierung oder UI-Verhalten durch automatisierte Tests implementieren möchten.

Extrahieren von Shared UI in wiederverwendbare Komponenten

Als Nächstes zeigt Tim, wie Sie einen beliebigen Razor UI-Block markieren und "Extract to Component" wählen können In seiner Demo extrahiert er eine Schaltfläche innerhalb eines Containers in eine neue Komponente namens TestButton. Dies ermöglicht einen saubereren Code, eine bessere Wiederverwendung und ein modulares UI-Design - besonders wichtig bei der Entwicklung von mobilen Anwendungen, hybriden Blazor-Anwendungen oder groß angelegten Webanwendungen.

Visualisierung von Routen in Ihrer Blazor App

Eine weitere herausragende Funktion ist Show Blazor Routes, die über Extensions > BLM > Show Blazor Routes aufgerufen werden kann. Dieses Tool listet alle definierten Routen in Ihrem Projekt auf, die mit der @page-Direktive in Razor-Dateien definiert wurden.

Tim demonstriert, dass die Änderung der @page-Direktive in Test.razor sofort die Routenliste aktualisiert. Mit einem Doppelklick auf eine beliebige Route in der Liste können Sie die entsprechende Komponente öffnen. Dies macht das Navigationsmanagement wesentlich effizienter, insbesondere in Anwendungen, die eine erweiterte Navigation, mehrere Render-Modi oder tief verschachtelte Komponenten verwenden.

Ausführen des Projekts mit .NET Watch

Tim gibt einen wichtigen Leistungstipp: die Verwendung von .NET Watch über PowerShell, anstatt sich auf das in Visual Studio integrierte Hot-Reload zu verlassen. Er erklärt, dass der traditionelle Reload langsamer und weniger konsistent ist. Aber mit der Erweiterung können Sie mit der rechten Maustaste auf Ihr Projekt klicken und "Run .NET Watch" auswählen

Dadurch wird ein PowerShell-Fenster gestartet und die Anwendung mit dem folgenden Befehl ausgeführt:

dotnet watch

dotnet watch

Dies ermöglicht Live-Reload, schnelleres Starten und eine reaktionsschnellere Entwicklung. Für Entwickler, die auf einem Webserver arbeiten oder sogenannte progressive Apps entwickeln, kann dieser Geschwindigkeitsschub die Entwicklungserfahrung erheblich verbessern.

Abschließende Überlegungen: Warum Sie diese Erweiterung installieren sollten

In der letzten Minute fasst Tim die Vorteile dieser Visual Studio-Erweiterung für die Blazor-Entwicklung zusammen. Ganz gleich, ob Sie eine Blazor WebAssembly-Anwendung, ein serverseitiges Projekt oder irgendetwas dazwischen erstellen, dieses Tool bietet alles:

• Schnellere Erstellung von Dateien und Komponenten

• Sauberere Trennung von Razor- und C#-Code

• Leichteres Testen und Auffinden von Routen

• Verbessertes Verständnis des Renderbaums

• Bessere Verwaltung von kompilierter Syntax und Markup

Tim empfiehlt jedem, der mit .NET, C# oder Blazor-Anwendungen arbeitet, diese Erweiterung zu installieren und in seine Standard-Toolchain zu integrieren.

Fazit: Blazor + Visual Studio = noch besser mit dieser Erweiterung

Wenn Sie moderne Webanwendungen unter Verwendung von Blazor in Visual Studio entwickeln, zeigt Tim Corey mit seinem Walkthrough, wie leistungsfähig diese kleine Erweiterung sein kann. Mit Funktionen, die die Dateiverarbeitung, das Testen, das Routing und die Build-Effizienz verbessern, bietet es große Vorteile bei minimaler Einrichtung.

Dank der Arbeit von Jimmy Engström haben Entwickler nun Zugang zu einem Tool, das sich perfekt in das Ökosystem von Blazor und .NET Core einfügt. Es reduziert die manuelle Arbeit, ermöglicht ein besseres Komponentendesign und verbessert die Interaktivität und Wartbarkeit von Projekten insgesamt.

Ganz gleich, ob Sie an Mobil-, Desktop- oder Webanwendungen arbeiten, diese Erweiterung hilft Ihnen, das volle Potenzial von Blazor, Visual Studio und der .NET-Laufzeitumgebung zu erschließen. Für weitere Details sehen Sie sich Tims Video an und abonnieren Sie seinen Channel für weitere aufschlussreiche Videos zu C# und Entwicklung.