Visual Studio Toolbox

Top 3 Blazor Extensions for Visual Studio Code

Some developers prefer to create applications with Microsoft's open-source Blazor tooling from within the open-source, cross-platform Visual Studio Code editor. Here are the top tools in the VS Code Marketplace for those folk, as measured by the number of installations.

• By David Ramel
• 04/08/2020

Microsoft's Blazor tooling, part of ASP.NET Core, lets .NET-centric developers create web applications with the C# programming language instead of JavaScript.

The red-hot project has been making waves with the promise of advantages such as:

• Stable and consistent: .NET offers standard APIs, tools, and build infrastructure across all .NET platforms that are stable, feature rich, and easy to use.
• Modern innovative languages: .NET languages like C# and F# make programming a joy and keep getting better with innovative new language features.
• Industry leading tools: The Visual Studio product family provides a great .NET development experience on Windows, Linux, and macOS.
• Fast and scalable: .NET has a long history of performance, reliability, and security for web development on the server. Using .NET as a full-stack solution makes it easier to build fast, reliable and secure applications.

Although Blazor is baked into Microsoft's flagship Visual Studio IDE, some developers prefer to work with the open source, cross-platform Visual Studio Code editor.

For that camp, several tools are available as VS Code extensions in the editor's marketplace. Blazor is still very much a Visual Studio IDE thing, though, so the selection isn't great -- yet.

For that niche market of open-source aficionados who prefer going open all the way (Blazor, like ASP.NET Core, is also open source), here's a look at the top five such offerings, as measured by the number of installations.

ASP.NET Core Switcher

This extension, created by Adrian Wilczyński, lets developers "Quickly switch between views, controllers, pages, page models and Blazor components in ASP.NET Core using keybindings, context menu or command palette." It can be used in three scenarios:

• Blazor: developers can switch between Component (.razor) and its CodeBehind (.razor.cs) using those alternative methods.
• MVC: Developers can switch between View and Controller.
• Razor Pages: Developers can switch between Page and its PageMode.

The tool has been installed 33,923 times at the time of this writing, earning a perfect 5.0 rating from the one developer who reviewed and rated it. It was released on April 7, 2019, and was last updated in December. The VS Code Marketplace entry is here. The project's GitHub site is here.

Razor+

Yes, the name bespeaks Razor, not Blazor, but this tool from Austin Cummings is designed to provide "Improved Razor support for VS Code with a mind towards Blazor." Razor is a syntax for combining HTML markup with C# code. The name "Blazor" reportedly comes from a combination of "Browser" and "Razor." So Razor Components are used in Blazor, or, as Scott Hanselman said, "Blazor is the client-side hosting model for Razor Components. I can write Razor Components. I can host them on the server or host them on the client with Blazor."

The Razor+ extension specifically provides "Improved Razor syntax colorization for VS Code," working with Razor and Blazor directives. At the time of this writing, it had been downloaded 23,365 times, earning an average 3.5 rating from six developers. It was release on March 25, 2018, and last updated shortly after. The VS Code Marketplace entry is here. The GitHub site is here.

Blazor Snippets

Blazor Snippets comes from Scott Sauber, who says it "provides common snippets for writing Blazor apps in VS Code and lets you spend less time writing boilerplate and more time writing your app."

It includes dozens of snippets, including Blazor Component snippets, Blazor Event Snippets and Blazor Razor snippets.

For example, a demo combines multiple snippets (which all start with the letter "b" in order to find them easily) from each:

1. It uses bc to create a blank Blazor Component.
2. bpara to create a parameter.
3. binjhttp to inject an HttpClient.
4. boi to create OnInitializedAsync.
5. bgja to make the AJAX call.

At the time of this writing, it had been installed 6,702 times, earning a 5.0 rating from one developer. It was released on Nov. 2, 2018, and last updated March 30, 2020. The VS Code Marketplace entry is here. The GitHub site is here.

Bonus Pick: Blazor Snippet Pack

We're throwing this one in there even though it has only 1,892 installations at the time of this writing because it relates to the previous snippets tool and also comes from Adrian Wilczyński. "A simple snippet pack for Blazor," it was created with the VS Code snippet generator hosted on Azure Websites.

It provides snippets for C#, Razor, HTML and csproj (XML, MSBuild), ranging from "Async Event Handler" to "Form Group (HTML Elements) with Bootstrap classes."

It was released on May 25, 2019, and last updated March 7, 2020. The VS Code Marketplace entry is here. Its GitHub site is here.

Look for More Soon
Given the increasing popularity of VS Code -- named the No. 1 developer tool in at least one major survey -- and Blazor, which is being pointed to Progressive Web Apps, mobile apps and more, look for the number of selections in the Visual Studio Code Marketplace to increase beyond the current nine items.

Other Blazor tools for use with the Visual Studio IDE are available via NuGet, as detailed in this article from last year.