節省時間的 Visual Studio Blazor 擴充功能

Tim Corey

9m 31s

Blazor迅速成為使用C#和.NET建構全功能網頁應用程式的常用技術。 不論您是在開發Blazor WebAssembly應用程式、Blazor Server專案，甚至是用於行動和桌面的混合應用程式，生產力至關重要。 在他9分鐘的影片*"Timesaving Blazor Extension for Visual Studio"*中，Tim Corey介紹了一個強大的Visual Studio擴充功能，旨在消除日常Blazor開發任務中的摩擦。

Tim沒有深入理論，而是概述了這個由Jimmy Engström開發的工具，實際操作如何在Visual Studio中更有效地建立、管理和重構Blazor檔案。 我們將詳細講解這個教程，匹配影片時間線，方便您跟隨學習。

快速概述：讓Blazor開發更輕鬆

Tim先說明了目標：幫助在Visual Studio中使用Blazor的開發者簡化工作流程。 他表示這個擴充功能旨在解決一些小問題，例如管理razor檔案、命名空間和程式碼分離——當使用多個Blazor組件或razor頁面時這些任務會變得重複。

這個Visual Studio擴充功能不僅僅關乎方便； 它還能提升渲染性能、簡化UI互動性並加快.NET開發週期——特別是針對Blazor網頁應用程式。

安裝Jimmy Engström的擴充功能

Tim介紹了一個名叫BLM的Visual Studio擴充功能，由Jimmy Engström建立。 您可以透過在Visual Studio中搜尋"BLM擴充功能"來找到它，路徑是擴充功能 > 管理擴充功能。安裝後，必須重新啟動Visual Studio。

Tim指出擴充功能包含出色的文件說明，直接從其GitHub README文件提取。這意味著即使是新開發者也能在不離開IDE的情況下了解如何使用它。

設置Blazor專案

安裝後，您需要建立一個新的Blazor專案或打開已有的專案。 Tim載入了名為"SuggestionApp"的範例專案，一個使用.NET Core的Blazor Server專案。 這是一個很好的範例，因為它展示了元件中的Razor語法和程式碼邏輯的混合使用。

處理Razor文件與程式碼分離

Tim打開了一個Profile.razor文件並說明它包含了Razor標記和C#邏輯。 如果您想將邏輯分離到一個程式碼後置文件，這個擴充功能讓您輕鬆操作，只需右鍵單擊 > 建立程式碼後置。 這會生成一個與.razor元件綁定的.razor.cs文件。

儘管範例中已經有一些程式碼，Tim刪除它來模擬重新開始，並建立了一個新的元件Test.razor。

撰寫並連接Razor元件

在Test.razor中，Tim定義了一個簡單的字串變數：

string test = "hello world";

string test = "hello world";

Dim test As String = "hello world"

Dim test As String = "hello world"

然後他使用@test 表達式在Razor標記中將其渲染到瀏覽器中。 編譯專案後，元件完全運行。 這個範例展示了使用.NET運行時和編譯過的程式集在Blazor元件中渲染動態內容的預設行為。

Visual Studio的提取至程式碼後置功能

Tim展示了Visual Studio的原生功能：使用快速動作 > 重構 > 提取至程式碼後置將內聯Razor邏輯提取到程式碼後置文件中。 這樣將邏輯層與UI分離，是提高可維護性和測試的一種好習慣。

擴充功能增加了反向功能

這就是擴充功能真正價值所在。 雖然Visual Studio支持將程式碼移動至.razor.cs文件，但不允許將其移回。 使用擴充功能，Tim右鍵單擊.razor.cs文件，選擇"將程式碼移動回Razor"。瞬間，C#邏輯被移回Razor文件中。

儘管這個功能標記為beta，Tim認為它穩定且有助於在開發者希望簡化文件或內聯除錯邏輯時使用。

建立隔離的CSS和JS文件

Tim展示了另一個省時功能：右鍵單擊 > 建立隔離CSS。 這會建立一個名為Test.razor.css的文件，這是Blazor用於元件特定樣式的模式。 Tim解釋說，沒有擴充功能，您需手動透過新增 > 新項目建立這個文件，並確保命名匹配。

JavaScript隔離的同樣功能也存在，允許瀏覽範圍行為輕鬆附加到單個元件上——這是構建互動和安全元件時網頁開發的重要部分。

在整個應用程式中查找元件使用

在另一個有用的功能中，Tim右鍵單擊NotAuthorized元件並選擇"查找元件使用"。這會快速顯示參考到該元件的所有文件。 這對於重構非常有用，特別是在大型.NET專案中，元件在頁面和佈局中重複使用時。

從元件生成BUnit測試

測試是任何網頁應用程式的重要部分。Tim演示了如何自動生成BUnit測試——一個用於Blazor的測試框架。 右鍵單擊元件並選擇"生成BUnit測試"可讓您在Razor或C#語法中進行選擇。

該工具生成必要的測試框架，實現UI測試的快速設置。 這對於希望通過自動化測驗實施安全性、響應驗證或UI行為的開發者來說是完美的。

提取共享UI至可重用元件

接下來，Tim展示了如何突出顯示任何Razor UI區塊並選擇"提取到元件"。在他的演示中，他將容器內的一個按鈕提取到一個新元件中，名為TestButton。 這可以實現更乾淨的程式碼，更好的重用性和模塊化UI設計——特別是在開發移動應用、Blazor混合應用或大型網頁應用程式時重要。

可視化Blazor應用程式中的路由

另一個亮點功能是顯示Blazor路由，透過擴充功能 > BLM > 顯示Blazor路由來存取。 此工具列出專案中所有已定義的路由——這些是用Razor文件中的@page指令定義的。

Tim演示了在Test.razor中修改@page指令會立即更新路由列表。您可以雙擊列表中的任何路由以打開對應的元件。 這使導航管理更加高效，特別是在使用增強導航、多重渲染模式或深度巢狀的元件的應用程式中。

使用.NET Watch運行專案

Tim分享了一個重要的性能提示：透過PowerShell使用.NET Watch，而不是依賴Visual Studio內建的熱重載。 他解釋傳統重載速度較慢且穩定性較差。 但使用擴充功能，您可以右鍵單擊專案並選擇"運行.NET Watch"。

這會啟動一個PowerShell窗口並使用以下命令運行應用：

dotnet watch

dotnet watch

dotnet watch

dotnet watch

這可以實現實時重載、更快的啟動以及更響應的開發體驗。 對於部署到網頁伺服器的開發者或構建之前稱為漸進式應用的應用程式，這種速度提升可以大大改善開發體驗。

最終想法：為什麼您應該安裝此擴充功能

在最後一分鐘，Tim重點回顧了這個Visual Studio擴充功能在Blazor開發中的強大之處。 無論您是在構建Blazor WebAssembly應用、伺服器端專案或其他任何中間應用，這個工具提供：

• 更快速的檔案和元件建立

• 更乾淨的Razor與C#程式碼分離

• 更輕鬆的測試和路由發現

• 更好的渲染樹理解

• 更好地管理已編譯的語法和標記

Tim強烈建議任何與.NET、C#或Blazor應用工作的人都應該安裝此擴充功能，並考慮將其整合到他們的預設工具鏈中。

結論：Blazor + Visual Studio = 擁有這個擴充功能更好了

如果您在Visual Studio中使用Blazor開發現代網頁應用程式，Tim Corey的演示顯示了這個小擴充功能的強大之處。 藉由增強檔案處理、測試、路由和構建效率的功能，它以最小的設置提供了巨大的收益。

多虧了Jimmy Engström的工作，開發人員現在可以使用一個完美契合Blazor和.NET Core生態系統的工具——減少了手動工作，實現了更好的元件設計，並提升了整體專案的互動性和可維護性。

無論您是在開發移動、桌面或網頁應用程式，這個擴充功能幫助我們發揮Blazor、Visual Studio和.NET運行時的全部潛力。欲了解更多詳情，請觀看Tim的影片，並訂閱他的頻道，獲得更多關於C#和開發的深刻見解的影片。