Visual Studio İçin Zamandan Tasarruf Ettiren Blazor Eklentisi

Hızlı Bakış: Blazor Geliştirmesini Kolaylaştırma

Tim, Blazor'u Visual Studio'da kullanan geliştiricilerin iş akışlarını kolaylaştırmasına yardımcı olmayı hedeflediklerini açıklayarak başlıyor. Bu eklentinin, razor dosyalarını yönetmek, namespace'ler ve code-behind ayrımı gibi küçük rahatsızlıklara odaklandığını söylüyor—birden fazla Blazor bileşeni veya razor sayfalarıyla çalışırken tekrarlayıcı hale gelebilen görevler.

Bu Visual Studio eklentisi yalnızca kolaylıkla ilgili değil; özellikle Blazor web uygulamaları için işleme performansını artırmak, kullanıcı arayüzü etkileşimini basitleştirmek ve .NET geliştirme döngünüzü hızlandırmakla ilgilidir.

Jimmy Engström Tarafından Uzantının Kurulumu

Tim, Jimmy Engström tarafından oluşturulan BLM adlı bir Visual Studio uzantısını tanıtır. Visual Studio'da Uzantılar > Uzantıları Yönet yoluyla arama yaparak "BLM uzantısı" olarak bulabilirsiniz. Kurulumdan sonra Visual Studio'nun yeniden başlatılması gerekir.

Tim, uzantının mükemmel bir belgelenmesi olduğunu, doğrudan GitHub README dosyasından çekildiğini not eder. Bu, yeni geliştiricilerin IDE'yi terk etmeden nasıl kullanılacağını anlayabileceği anlamına gelir.

Blazor Projesi Kurulumu

Kurulumdan sonra, yeni bir Blazor projesi oluşturmanız veya mevcut bir projeyi açmanız gerekecek. Tim, .NET Core kullanan bir Blazor Sunucu projesi olan "SuggestionApp" adlı bir örnek projeyi açar. Bu harika bir örnek çünkü bileşenlerde Razor sözdizimi ve arka plan kodu mantığını birleştirir.

Razor Dosyaları ve Arka Kod ile Çalışma

Tim, Profil.razor dosyasını açar ve Razor işaretlemesi ile C# mantığı içerdiğini açıklar. Mantığı bir arka kod dosyasına ayırmak isterseniz, uzantı bunu sağ tıklama > Arka Kod Oluştur kadar basit hale getirir. Bu, .razor bileşenine bağlı bir .razor.cs dosyası oluşturur.

Örneğin zaten biraz kod içermesine rağmen, Tim sıfırdan başlamak için onu siler ve Test.razor adlı yeni bir bileşen oluşturur.

Razor Bileşenleri Yazma ve Bağlama

Test.razor'da, Tim basit bir dize değişkeni tanımlar:

string test = "hello world";

string test = "hello world";

Daha sonra Razor işaretlemesinde @test ifadesini kullanarak bunu tarayıcıda yeniden işler. Projeyi derledikten sonra bileşen tamamen işlevseldir. Bu örnek, .NET çalışma zamanı ve derlenmiş derlemeler kullanarak Blazor bileşenlerinde dinamik içerik işleme varsayılan davranışını sergiler.

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

Tim, satır içi Razor mantığını Hızlı İşlemler > Yeniden Düzenle > Arka Koda Çıkar kullanarak bir arka kod dosyasına çıkarmayı sağlayan doğal bir Visual Studio özelliğini gösterir. Bu, sürdürme ve test edilme için iyi bir uygulama olarak mantık katmanını UI'den ayırır.

Uzantı Ters İşlevselliği Ekler

İşte uzantının gerçek değerini gösterdiği yer. Visual Studio, kodu bir .razor.cs dosyasına taşımayı desteklerken, geri taşımanıza izin vermez. Uzantı ile Tim, .razor.cs dosyasına sağ tıklar ve "Arka Kodu Razor'a Taşı"yı seçer. Anında C# mantığı Razor dosyasına geri taşınır.

Bu özellik beta olarak işaretlenmiş olsa da Tim, 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.

Yalıtılmış CSS ve JS Dosyaları Oluşturma

Tim başka bir zaman kazandırıcıyı gösterir: sağ tıklama > Yalıtılmış CSS Oluştur. Bu, Blazor'un bileşenlere özgü stillendirme için kullandığı bir desen olan Test.razor.css adında bir dosya oluşturur. Tim, uzantı olmadan dosyayı Manuel olarak Ekle > Yeni Öğe üzerinden oluşturmanız ve isim eşleşmesini sağlamanız gerektiğini açıklar.

Aynı özellik, bireysel bileşenlere kolayca eklenen kapsamlama davranışına izin veren JavaScript izolasyonu için de mevcut -- etkileşimli ve güvenli bileşenler oluştururken web geliştirme için önemli bir parça.

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

Başka bir yararlı özellikte, Tim NotAuthorized bileşenine sağ tıklar ve "Bileşen Kullanımlarını Bul"u seçer. Bu, o bileşenin referans alındığı tüm dosyaları hızlıca gösterir. Bu, özellikle bileşenlerin sayfalar ve düzenler arasında yeniden kullanıldığı büyük .NET projelerinde yeniden yapılandırma için inanılmaz derecede kullanışlıdır.

Birim Testlerinden BUnit Testleri Oluştur

Test etme, herhangi bir web uygulamasının önemli bir parçasıdır. Tim, Blazor için bir test çerçevesi olan BUnit testlerini otomatik oluşturmayı nasıl göstereceğini sunar. Bir bileşene sağ tıklayıp "BUnit Testi Üret" seçeneğini seçmek, Razor veya C# sözdizimi arasında seçim yapmanıza olanak tanır.

Araç, UI testleri için hızlı kurulum sağlayan gerekli test iskeletini oluşturur. Bu, otomatik testler yoluyla güvenlik, yanıt doğrulama veya UI davranışı uygulamak isteyen geliştiriciler için mükemmeldir.

Paylaşılan UI'yi Yeniden Kullanılabilir Bileşenlere Çıkar

Sonra, Tim herhangi bir Razor UI bloğunu vurgulayıp "Bileşene Çıkar" seçeneğini nasıl seçebileceğinizi gösterir. Demo altında, bir kap içindeki bir düğmeyi TestButton adlı yeni bir bileşene çıkarır. Bu, daha temiz kod, daha iyi yeniden kullanım ve modüler UI tasarımı sağlar -- özellikle mobil uygulamalar, Blazor hibrit uygulamalar veya büyük ölçekli web uygulamaları geliştirirken önemlidir.

Blazor Uygulamanızdaki Yolları Görselleştirme

Öne çıkan başka bir özellik de Çıkışlar > BLM > Blazor Yollarını Göster yoluyla erişilen Blazor Yollarını Göster'dir. Bu araç, Razor dosyalarındaki @sayfa yönergesi ile tanımlanan tüm tanımlı yolları projenizden listeler.

Tim, Test.razor içinde @sayfa yönergesini değiştirmenin anında yol listesini nasıl güncellediğini gösterir. Listeden herhangi bir yola çift tıklayarak karşılık gelen bileşeni açabilirsiniz. Bu, özellikle geliştirilmiş gezinme kullanan, birden fazla render modu içeren veya derinlemesine yerleştirilmiş bileşenlere sahip uygulamalarda gezinme yönetimini daha verimli hale getirir.

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

Tim, önemli bir performans ipucu paylaşıyor: Yerleşik Visual Studio yeniden yüklemesine güvenmek yerine PowerShell üzerinden .NET Watch kullanmak. Geleneksel yeniden yüklemenin daha yavaş ve daha az tutarlı olduğunu açıklar. Ancak uzantı ile proje üzerine sağ tıklayıp ".NET Watch Çalıştır"ı seçebilirsiniz.

Bu, bir PowerShell penceresi başlatarak uygulamayı şu komutları kullanarak çalıştırır:

dotnet watch

dotnet watch

Bu, canlı yeniden yükleme, daha hızlı başlangıç ve daha duyarlı bir geliştirme sağlar. Web sunucusuna dağıtan geliştiriciler veya formal olarak ilerlemeli uygulamalar için binayı inşa edenler için bu hız artışı geliştirme deneyimini önemli ölçüde iyileştirebilir.

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

Son dakikada, Tim bu Visual Studio uzantısının Blazor geliştirme için gücünü özetliyor. Bir Blazor WebAssembly uygulaması, bir sunucu taraflı proje veya aradaki herhangi bir şeyi oluşturuyor olun, bu araç şunları sağlar:

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

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

• Daha kolay test ve yol keşfi

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

• Derlenmiş sözdizimi ve işaretleme yönetiminin daha iyi hale getirilmesi

Tim, .NET, C# veya Blazor uygulamalarında çalışan herkesin bu uzantıyı kurmasını ve bunu varsayılan araç zincirine dahil etmeyi düşünmesini şiddetle tavsiye eder.

Sonuç: Blazor + Visual Studio = Bu Uzantıyla Daha da İyi

Modern web uygulamaları geliştiriyorsanız, Blazor'u Visual Studio'da kullanarak, Tim Corey'nin yol gösterimi bu küçük uzantının ne kadar güçlü olabileceğini gösterir. Dosya işleme, test etme, yönlendirme ve derleme verimliliğini artıran özelliklerle, minimum kurulumlarla büyük kazançlar sağlar.

Jimmy Engström'ün çalışması sayesinde, geliştiriciler artık Blazor ve .NET Core ekosistemine mükemmel bir şekilde uyum sağlayan bir araca erişime sahip - manuel çalışmayı azaltır, daha iyi bileşen tasarımına olanak tanır ve genel proje etkileşimini ve sürdürülebilirliğini artırır.

Mobil, masaüstü veya web uygulamaları üzerinde çalışıyor olun, bu uzantı Blazor, Visual Studio ve .NET çalışma zamanı potansiyelini tam olarak ortaya çıkarmanıza yardımcı olur. Daha fazla ayrıntı için Tim'in videosunu izleyin ve C# ve gelişim üzerine daha fazla fikir verici videolar için Kanalına abone olun.