如何在 Visual Studio 2022 中为 Blazor 文件 (*.razor) 创建自定义代码段

Question

有没有办法可以在 Visual Studio 2022 中为 Blazor 文件创建自己的自定义代码片段？我可以使用 .snippet 文件中的

<Code Language="CSharp">

为 C# 创建自定义代码片段，但是，不存在

<Code Language="blazor">

这样的东西。我可以使用

CSharp

或

HTML

进行代码语言导入，但在对

*.razor

文件进行编码时无法使用它。当我开始输入时会显示快捷方式，但按 Tab 键不会显示代码片段。

有任何解决方法或扩展可以做到这一点吗？

Answer 1

我相信这是一个很好的例子

1. 创建新的 HTML 代码片段：您可以创建自定义 HTML 代码片段，其中包含您要使用的 Blazor 特定代码。为此，请按照下列步骤操作：

2. 导航到 Visual Studio 存储用户代码片段的文件夹。它通常位于 %USERPROFILE%\Documents\Visual Studio 2022\Code Snippets\HTML。 创建一个扩展名为 .snippet 的新 XML 文件。例如，您可以将其命名为 BlazorComponent.snippet。 在文本编辑器中打开 XML 文件并在元素内定义 HTML 代码片段。您可以使用 $name$、$end$ 等占位符来定义动态内容的插入点。 定义代码片段：在元素内，您可以定义特定于 Blazor 的代码片段。例如：

<Code Language="HTML">
<![CDATA[
<MyBlazorComponent @param1="@value1" @param2="@value2">
    <ChildComponent />
</MyBlazorComponent>
]]>
</Code>

3. 导入代码片段：创建自定义代码片段后，通过键入代码片段快捷方式（例如 blazorcomp）并按 Tab 键，将其导入 Blazor Razor 组件 (*.razor) 文件中。这应该将自定义代码片段插入到您的 Blazor 文件中。

4. 自定义代码片段：您可以通过添加动态内容的占位符（例如参数或值）来进一步自定义代码片段。

5. 测试代码片段：将代码片段导入 Blazor 文件后，通过检查代码片段是否正确插入以及占位符是否正确定位来验证其是否按预期工作。