Visual Studio için Zaman Tasarrufu Sağlayan Blazor Uzantısı

Hızlı Bir Genel Bakış: Blazor Geliştirimi Kolaylaştırmak

Tim, başlangıçta amacın, Visual Studio'da Blazor kullanan geliştiricilere iş akışlarını hızlandırmalarına yardımcı olmak olduğunu açıklıyor. Bu uzantının, birden fazla Blazor bileşeni veya razor sayfası ile çalışırken tekrarlayan hale gelebilen küçük rahatsızlıkları, razor dosyalarını yönetme, isim alanlarını ve kod-arka ayrımı gibi görevleri hedef aldığını söylüyor.

Bu Visual Studio uzantısı sadece bir kolaylık meselesi değil; rendering performansını artırmak, kullanıcı arayüzü etkileşimini basitleştirmek ve .NET geliştirme döngünüzü hızlandırmak hakkında, özellikle de Blazor web uygulamaları için.

Jimmy Engström Tarafından Geliştirilen Uzantının Yüklenmesi

Tim, Jimmy Engström tarafından oluşturulmuş BLM adlı bir Visual Studio uzantısını tanıtıyor. Visual Studio'da "BLM uzantısı" araması yaparak Uzantılar > Uzantıları Yönet aracılığıyla bulabilirsiniz. Kurulduktan sonra, Visual Studio yeniden başlatılmalıdır.

Tim, uzantının harika bir dökümantasyon içerdiğini ve doğrudan GitHub README dosyasından alındığını belirtiyor. Bu, yeni geliştiricilerin bile IDE'den ayrılmadan nasıl kullanacaklarını anlayabileceği anlamına gelir.

Blazor Projesi Kurulumu

Kurulumdan sonra ya yeni bir Blazor projesi oluşturmalı ya da mevcut birini açmalısınız. Tim, "SuggestionApp" adı verilen bir örnek proje, .NET Core kullanılarak yapılmış bir Blazor Sunucu projesi yükler. Bu harika bir örnek çünkü bileşenlerde Razor söz dizimi ve kod-arka mantığı karışımını gösteriyor.

Razor Dosyaları ve Kod-arka ile Çalışma

Tim, Profile.razor dosyasını açar ve Razor işaretlemeleri ile C# mantığını içerdiğini açıklar. Eğer mantığı bir kod-arka dosyasına ayırmak istiyorsanız, uzantı bunu sağ tıklama > Kod Arkası Oluşturma kadar basit hale getirir. Bu, .razor bileşenine bağlı bir .razor.cs dosyası oluşturur.

Örnek zaten biraz kod içeriyor olsa da, Tim onu silerek sıfırdan başlama ve Test.razor adlı yeni bir bileşen oluşturma simülasyonu yapar.

Razor Bileşenleri Yazma ve Bağlama

Test.razor içinde Tim basit bir string değişkeni tanımlar:

string test = "hello world";

string test = "hello world";

Ardından test ifadesini Razor işaretlemesinde tarayıcıda renderlemek için kullanır. Projeyi derledikten sonra bileşen tam çalışır halde olur. Bu örnek, .NET çalışma zamanı ve derlenmiş derleyicileri kullanarak dinamik içeriği Blazor bileşenlerinde varsayılan olarak renderlemenin davranışını göstermektedir.

Visual Studio'nun Koda Çıkar Özelliği

Tim, inline Razor mantığını bir kod-arka dosyasına çıkarmak için bir Visual Studio doğal özelliğini gösteriyor, Hızlı İşlemler > Yeniden Düzenleme > Arkaya Kod Çıkar. Bu, mantık katmanını kullanıcı arayüzünden ayırır, sürdürülebilirlik ve testler için iyi bir uygulamadır.

Uzantı Ters Fonksiyonaliteyi Ekliyor

İşte uzantının gerçek değeri burada ortaya çıkar. Visual Studio, .razor.cs dosyasına kod taşımayı desteklerken, geri taşımayı sağlamıyor. Uzantı ile Tim, .razor.cs dosyasına sağ tıklayarak "Kod Arka'dan Razor'a Taşı" seçeneğini seçiyor. Anında C# mantığı Razor dosyasına geri taşınır.

bunun kararlı ve dosyaları basitleştirmek ya da mantığı satır içinde hata ayıklamak isteyen geliştiricilerin yararlanabileceği kullanışlı bir araç olduğunu düşünür.

İzole CSS ve JS Dosyaları Oluşturma

Tim bir başka zaman tasarrufu sağlayıcısını sergiliyor: sağ tıklama > İzole CSS Oluştur. Bu, Blazor'un bileşen specifici stil için kullandığı bir desen olan, Test.razor.css adlı bir dosya oluşturur. Tim, uzantı olmadan dosyanın elle "Ekle > Yeni Öğe" yoluyla oluşturulması gerektiğini ve adlandırmanın eşleştiğinden emin olmanız gerektiğini açıklar.

JavaScript izolasyonu için de aynı özelliğe sahiptir, böylece bireysel bileşenlere kolayca uygun davranış eklenebilir — interaktif ve güvende bileşenler oluştururken web geliştirmede en önemli parçalardan biridir.

Tüm Uygulamada Bileşen Kullanımlarını Bulma

Diğer bir yararlı özellikte Tim NotAuthorized bileşenine sağ tıklayarak "Bileşen Kullanımlarını Bul" seçeneğini seçer. Bu, o bileşenin referans edildiği tüm dosyaları hızla gösterir. Bu, büyük .NET projelerinde bileşenlerin sayfalar ve düzenler arasında yeniden kullanıldığı durumda, refactoring sırasında inanılmaz derecede faydalıdır.

BUnit Testlerini Bileşenlerden Üretme

Test etmek bir web uygulamasının hayati bir parçasıdır. Tim, BUnit testlerini nasıl otomatik üreteceğini —Blazor için bir test frameworku— gösteriyor. Bir bileşene sağ tıklayarak "BUnit Test Oluştur" seçeneğini seçmek, Razor veya C# sözdizimi arasında seçim yapmanıza olanak tanır.

Araç, UI testleri kurulumunu hızlandırmak için gerekli test iskeletini üretir. Bu, geliştiricilerin otomatik testler yoluyla güvenlik, yanıt doğrulama veya UI davranışını uygulamak istemesi için mükemmeldir.

Paylaşılan Kullanıcı Arayüzünü Yeniden Kullanılabilir Bileşenlere Çıkarmak

Ardından, Tim herhangi bir Razor kullanıcı arayüzü bloğunu vurgulayarak "Bileşene Çıkar" seçeneğini seçmenin nasıl mümkün olduğunu gösteriyor. Demonstrasyonunda, bir kabın içindeki bir düğmeyi TestButton adlı yeni bir bileşene çıkarıyor. Bu, daha temiz kod, daha iyi yeniden kullanımla ve modüler UI tasarımı sağlıyor — özellikle mobil, Blazor hibrit uygulamaları veya büyük ölçekli web uygulamaları geliştirirken.

Blazor Uygulamanızdaki Rotaları Görselleştirme

Öne çıkan başka bir özellik, Extensions > BLM > Blazor Routes'u Göster tarafından erişilen Blazor Rotalarını Göster. Bu araç, projenizde tanımlanmış tüm rotaları listeler — Razor dosyalarındaki @page yönergesi ile tanımlananlar.

Tim, Test.razor'daki @page yönergesini değiştirmenin hızla rota listesini güncellediğini gösteriyor. Listedeki herhangi bir rotayı çift tıklayarak karşılık gelen bileşeni açabilirsiniz. Bu, geliştirilmiş navigasyon, birden fazla render modu veya derinden eklenmiş bileşenleri kullanan uygulamalarda navigasyon yönetimini çok daha verimli kılar.

Projeyi .NET Watch ile Çalıştırma

Tim, önemli bir performans ipucunu paylaşır: Visual Studio'nun yerleşik hot reload'una güvenmek yerine PowerShell aracılığıyla .NET Watch kullanmak. Geleneksel yükleme yönteminin daha yavaş ve daha az tutarlı olduğunu açıklar. Ancak uzantı ile projenize sağ tıklayarak ".NET Watch'ı Çalıştır" seçebilirsiniz.

Bu, bir PowerShell penceresi açarak uygulamayı şu komutla çalıştırır:

dotnet watch

dotnet watch

Bu, canlı yükleme, daha hızlı başlangıç ve daha duyarlı geliştirme sağlar. Bir web sunucusuna yerleştiren geliştiriciler veya resmi olarak progressive uygulamaları olarak adlandırılan şeyleri inşa eden geliştiriciler için bu hız artışı, geliştirme deneyimini önemli ölçüde artırabilir.

Son Düşünceler: Bu Uzantıyı Neden Kurmalısınız

Son dakikada, Tim Blazor geliştirme için bu Visual Studio uzantısının gücünü özetler. Blazor WebAssembly uygulaması, sunucu-tarafı projesi veya aradaki herhangi bir şeyi yaratıyorsanız, bu araç sağlar:

• Daha hızlı dosya ve bileşen oluşturma

• Razor ve C# kodunun daha temiz ayrımı

• Daha kolay test ve rota keşfi

• İyileştirilmiş render ağacı anlayışı

• Derlenmiş söz dizimi ve işaretleme yönetiminde daha iyi yönetim

Tim, .NET, C# veya Blazor uygulamaları ile çalışan herkesin bu uzantıyı kurması ve varsayılan araç zincirlerine entegre etmeyi düşünmesi gerektiğini güçlü bir şekilde tavsiye ediyor.

Sonuç: Blazor + Visual Studio = Bu Uzantı İle Daha Da İyi

Modern web uygulamaları geliştiriyorsanız, Blazor Visual Studio'da, Tim Corey'nin incelemesi, bu küçük uzantının ne kadar güçlü olduğunu gösterir. Dosya sistemi, test, yönlendirme ve inşa işlemlerini hızlandıran özelliklerle, minimal kurulumla büyük kazanç sağlar.

Jimmy Engström'ün çalışmaları sayesinde, geliştiriciler artık Blazor ve .NET Core ekosistemiyle mükemmel şekilde hizalanan bir araca erişimine sahipler — manuel çalışmayı azaltan, daha iyi bileşen tasarımını mümkün kılan ve genel proje etkileşimini ve sürdürülebilirliğini iyileştiren.

Mobil, masaüstü veya web gibi hangi uygulama üzerinde çalışırsanız çalışın; bu uzantı, Blazor, Visual Studio ve .NET çalışma zamanı potansiyelini tamamen açığa çıkarmanıza yardımcı olur. Daha fazla detay için Tim'in videosunu izleyin ve onun C# ve geliştirme üzerine daha fazla içgörü dolu videolarını takip etmek için Kanalına abone olun.