節省時間的Blazor Extension for Visual Studio

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

Tim 首先解釋了目標：幫助在 Visual Studio 中使用 Blazor 的開發者簡化工作流程。 他表示這個擴展針對的是像管理 razor 文件、命名空間和代碼後置分離這樣的小煩惱——當處理多個 Blazor 元件或 razor 頁面時，這些任務會變得繁瑣。

這個 Visual Studio 擴展不僅僅是關於便利； 它致力於提升渲染效能、簡化 UI 互動以及加速 .NET 開發流程——特別是針對 Blazor 網頁應用程式。

安裝由 Jimmy Engström 開發的擴展

Tim 介紹了一個由 Jimmy Engström 創建的 Visual Studio 擴展名為 BLM。 您可以透過在 Visual Studio 中 Extensions > Manage Extensions 搜尋"BLM extension"找到它。安裝完成後，Visual Studio 必須重新啟動。

Tim 指出該擴展包含了優秀的文檔，直接從其 GitHub 的 README 文件拉取。這意味著即使是新開發者也能理解如何在不離開 IDE 的情況下使用它。

設置 Blazor 專案

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

處理 Razor 文件和代碼後置

Tim 打開了 Profile.razor 文件，解釋它包含了 Razor 標記和 C# 邏輯。 如果您想將邏輯分離到代碼後置文件中，該擴展使之如右鍵單擊 > 創建代碼後置一樣簡單。 這會生成一個 .razor.cs 文件，與 .razor 元件關聯。

儘管該範例已經包含了一些代碼，但 Tim 刪除了它，來模擬從頭開始，並創建了一個名為 Test.razor 的新元件。

編寫和連接 Razor 元件

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

string test = "hello world";

string test = "hello world";

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

Visual Studio 的提取到代碼後置功能

Tim 演示了 Visual Studio 的一個內建功能：使用快速操作 > 重構 > 提取到代碼後置，將內聯 Razor 邏輯提取到代碼後置文件中。 這將邏輯層從 UI 中分離出來，是保持可維護性和可測試性的好做法。

擴展添加了反向功能

這是擴展顯示其真正價值的地方。 儘管 Visual Studio 支持將代碼移動到 .razor.cs 文件，但它不允許將其移回去。 使用擴展，Tim 右鍵單擊 .razor.cs 文件並選擇"將代碼後置移至 Razor。"瞬間，C# 邏輯返回到 Razor 文件中。

儘管此功能標記為測試版，但 Tim 發現它在簡化文件或內聯除錯邏輯時穩定且有幫助。

創建獨立的 CSS 和 JS 文件

Tim 展示了另一個節省時間的功能：右鍵單擊 > 創建獨立 CSS。 這會創建一個名為 Test.razor.css 的文件，這是 Blazor 用於元件特定樣式的模式。 Tim 解釋，如果沒有該擴展，您需要通過 Add > New Item 手動創建該文件，並確保命名符合要求。

同樣的功能也適用於 JavaScript 隔離，允許輕鬆將範圍限定的行為附加到個別元件——這是構建互動和安全元件時網頁開發的重要部分。

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

在另一個有用的功能中，Tim 右鍵單擊 NotAuthorized 元件，然後選擇"查找元件使用情況。"這迅速顯示了該元件被引用的所有文件。 這在重構時非常有用，特別是在大型 .NET 專案中，元件被重複使用於多個頁面和布局中。

從元件生成 BUnit 測試

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

該工具生成了必要的測試支架，實現快速設置 UI 測試。 這很適合希望通過自動化測試實現安全性、響應驗證或 UI 行為的開發者。

提取共享 UI 到可重用元件

接下來，Tim 展示如何突出顯示任何 Razor UI 塊，然後選擇"提取到元件。"在他的演示中，他將容器內的一個按鈕提取為一個名為 TestButton 的新元件。 這促成了更清晰的代碼、更好的重用和模塊化 UI 設計——這在開發手機應用程式、Blazor 混合應用程式或大規模網頁應用程式時尤為重要。

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

另一個突出功能是顯示 Blazor 路由，通過 Extensions > BLM > Show Blazor Routes 獲得訪問。 該工具列出了從專案中的所有定義路由——那些在 Razor 文件中用 @page 指令定義的。

Tim 演示了修改 Test.razor 中的 @page 指令會即時更新路由列表。您可以雙擊列表中的任何路由以打開相應的元件。 這使導航管理更加有效，尤其是使用增強導航、多種渲染模式或深層嵌套元件的應用程式。

使用 .NET Watch 運行專案

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

這將啟動一個 PowerShell 視窗並使用以下命令運行應用程式：

dotnet watch

dotnet watch

這實現了實時重載、更快的啟動和更響應式的開發。 對於部署到 Web 服務器或構建曾稱為漸進式應用程式的開發者來說，這個速度提升可以顯著改善開發體驗。

最後想法：為何您應該安裝這個擴展

在最後一分鐘中，Tim 回顧了這個用於 Blazor 開發的 Visual Studio 擴展的強大功能。 無論您是在構建 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# 和開發相關視頻。