为 Visual Studio 节省时间的 Blazor 扩展

Tim Corey

9分31秒

Blazor 正迅速成为使用 C# 和 .NET 构建全功能网络应用程序的首选技术。 无论您是在开发 Blazor WebAssembly 应用程序、Blazor Server 项目，甚至是移动和桌面混合应用程序，工作效率都至关重要。 在名为*"为 Visual Studio 节省时间的 Blazor 扩展"*的 9 分钟视频中，Tim Corey 演示了功能强大的 Visual Studio 扩展，该扩展旨在消除 Blazor 日常开发任务中的摩擦。

蒂姆没有深入探讨理论，而是手把手地演示了这个由吉米-恩格斯特罗姆（Jimmy Engström）开发的工具如何在 Visual Studio 中更高效地创建、管理和重构 Blazor 文件。 我们将详细介绍本教程，并与视频时间轴相匹配，以便您可以跟读。

快速概览：让 Blazor 开发更轻松

Tim 首先解释了目标：帮助在 Visual Studio 中使用 Blazor 的开发人员简化工作流程。 他说，这个扩展针对的是一些小麻烦，比如管理 razor 文件、命名空间和代码背后的分离--在使用多个 Blazor 组件或 razor 页面时，这些任务可能会变得重复。

Visual Studio 扩展不仅仅是为了方便； 这是关于提高渲染性能、简化用户界面交互性和加快.NET开发周期--特别是对于Blazor网络应用程序。

安装扩展，作者：Jimmy Engström.

Tim 介绍了由 Jimmy Engström 创建的名为 BLM 的 Visual Studio 扩展。 您可以通过 Visual Studio 中的扩展 > 管理扩展，搜索 "BLM 扩展 "找到它。安装后，必须重新启动 Visual Studio。

Tim 指出，该扩展包含优秀的文档，直接取自 GitHub 的 README 文件。这意味着即使是新开发人员，也可以在不离开集成开发环境的情况下了解如何使用它。

建立 Blazor 项目

安装后，您需要创建一个新的 Blazor 项目或打开一个现有项目。 Tim 加载了一个名为 "SuggestionApp "的示例项目，这是一个使用 .NET Core 的 Blazor 服务器项目。 这是一个很好的例子，因为它展示了组件中 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"

然后，他在 Razor 标记中使用 @test 表达式将其呈现在浏览器中。 编译完项目后，该组件就能完全发挥作用。 本示例展示了使用 .NET 运行时和编译过的程序集在 Blazor 组件中渲染动态内容的默认行为。

Visual Studio 的 Extract to Code-Behind 功能

Tim 演示了 Visual Studio 的一个本地功能：使用快速操作 > 重构 > 提取到代码后面，将内联 Razor 逻辑提取到代码后面的文件中。 这就将逻辑层与用户界面分离开来，是一种有利于可维护性和测试的良好做法。

扩展添加了反向功能

这就是扩展功能的真正价值所在。 尽管 Visual Studio 支持将代码移至 .razor.cs 文件，但不允许将其移回。 有了这个扩展，Tim 右键单击 .razor.cs 文件并选择 "将后面的代码移到 Razor"。瞬间，C# 逻辑就被移回了 Razor 文件。

虽然这项功能还处于测试阶段，但 Tim 发现它非常稳定，对开发人员简化文件或内联调试逻辑非常有帮助。

创建独立的 CSS 和 JS 文件

Tim 展示了另一个省时工具：右键单击 > 创建隔离 CSS。 这将创建一个名为 Test.razor.css 的文件，这是 Blazor 用于特定组件样式设计的一种模式。 Tim 解释说，如果没有扩展名，就需要通过添加 > 新项手动创建文件，并确保命名匹配。

JavaScript 隔离具有相同的功能，可以轻松地将作用域行为附加到单个组件上--这是网络开发中构建交互式安全组件的重要部分。

在整个应用程序中查找组件用法

另一个有用的功能是，Tim 右键单击 NotAuthorized 组件并选择 "查找组件用法"。这将快速显示引用该组件的所有文件。 它对于重构非常有用，尤其是在大型 .NET 项目中，组件会在页面和布局中重复使用。

从组件生成 BUnit 测试

测试是任何网络应用程序的重要组成部分。Tim 演示了如何自动生成 BUnit 测试--Blazor 的测试框架。 右键单击组件并选择 "生成 BUnit 测试"，您可以选择 Razor 或 C# 语法。

该工具可生成必要的测试脚手架，从而快速设置用户界面测试。 这对于希望通过自动测试实现安全性、响应验证或用户界面行为的开发人员来说是再合适不过了。

将共享 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 回顾了这个用于 Blazor 开发的 Visual Studio 扩展的强大功能。 无论您是在构建 Blazor WebAssembly 应用程序、服务器端项目，还是介于两者之间的任何项目，本工具都能提供：

• 更快地创建文件和组件

• 更清晰地分离 Razor 和 C# 代码

• 更方便的测试和路由发现

• 提高对呈现树的理解

• 更好地管理编译语法和标记

蒂姆强烈建议任何使用 .NET、C# 或 Blazor 应用程序的人安装此扩展，并考虑将其集成到默认工具链中。

结论：使用此扩展，Blazor + Visual Studio = 更好

如果您正在使用 Visual Studio 中的 Blazor 开发现代网络应用程序，Tim Corey 的攻略将向您展示这个小扩展的强大功能。 它具有增强文件处理、测试、路由和构建效率的功能，只需最少的设置就能带来巨大的收益。

由于 Jimmy Engström 的工作，开发人员现在可以使用与 Blazor 和 .NET Core 生态系统完美匹配的工具--减少手工劳动，实现更好的组件设计，提高整个项目的交互性和可维护性。

无论您是在开发移动、桌面还是 Web 应用程序，这个扩展都可以帮助解锁 Blazor、Visual Studio 和 .NET 运行时的全部潜力。欲了解更多详情，请观看 Tim 的视频并订阅他的频道，以获取更多关于 C# 和开发的见解丰富的视频。