Using Blazor VSCode Extensions, you can build applications from start to finish using the C# programming language. Blazor VSCode Extensions facilitate code reusability and modularity because UI components are implemented using only C#, HTML, and CSS.
Client software using Blazor VSCode Extensions executes C# code directly in a browser using WebAssembly. This is possible because Blazor itself is a .NET application running on WebAssembly. It can also run client logic on servers as it uses SignalR. SignalR is a real-time messaging framework that ensures efficient communication with servers.
Blazor was built on and uses open web standards without plugins or code transpilation. It is universally applicable and works flawlessly in all modern web browsers, including those on mobile devices.
Since its initial release in 2018, the Blazor community has grown massively, and so has its number of tools.
In this article, we explore some of the best of Blazor’s VSCode Extensions. Blazor’s VSCode Extensions make building applications less stressful and more efficient. We also explore some Blazor Components that you can easily use while building applications.
Blazor Snippets provides common code snippets for building apps in Blazor using VS code. This extension increases productivity, letting you spend less time writing boilerplate code and more time writing main application codes.
Blazor’s Snippets was officially released by Scott Sauber in November 2018. So far, this extension is one of the most downloaded Blazor extensions on the Visual Studio Marketplace, with over 15,000 downloads.
For more information about Blazor Snippets, including how to contribute to its development, check out the official Github repository.
The Blazory extension for VS Code is known for its elegance and ease of use. Crated by Bart Van Hoey, this tool is designed to speed up your Blazor development process by providing you with useful Blazor code snippets.
Officially released on July 27, 2020, the Blazory extension is stable and also in active development. For more details regarding its release cycle and how to contribute to this project, check out the official Github repository.
Microsoft’s VSCode Blazor debugging extension is a companion extension for debugging Blazor WebAssembly applications in VS Code. It brings some improvements to the experience of debugging Blazor WebAssembly in VS Code. To use this extension, you must also install a C# extension for Visual Studio Code.
This extension was released in February 2021, and since its release, it has pulled over 1.5k downloads on the Visual Studio Marketplace. It has a vibrant development team listed on its official Github repository.
Blazor Snippet Pack includes an amazing Blazor generation feature. It is easy to use and beautifully designed with developer productivity at heart.
Razor / Blazor CSS IntelliSense is a fork of HTML CSS Class Completion, developed and released by Kevin Chatham in February 2021. This extension is a drop-in replacement for HTML CSS Class Completion and has out-of-the-box Razor and Blazor support.
Note that it cannot work together with the HTML CSS Class Completion extension. Therefore, you must uninstall the HTML CSS Class Completion extension before using this extension.
Razor / Blazor CSS IntelliSense Visual Studio Code extension provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.
It’s also very user-friendly and easy to customize to your preference. Access more information about this very active extension via Github.
ASP.NET Core Switcher enables you to quickly switch between views, controllers, pages, page models, and Blazor components in ASP.NET Core application using keybindings, a context menu, or command palette.
It was officially released in April 2019 by Adrian Wilczyński and has an impressive number of downloads — over 93k. Aside from Blazor projects, this extension can be used for Razor and MVC projects. Here are some quick commands on how to switch pages using this extension in Blazor, Razor, and MVC projects.
Switch between Component (.razor) and its CodeBehind (.razor.cs) using:
Switch between Page and its PageModel using:
Switch between View and Controller using:
Create a View for an Action using:
This is an essential extension. It makes debugging in large projects a lot easier as you can seamlessly navigate from one file to another in just a few clicks.
More information about the future of this extension, its release cycle and how to contribute to the development of this extension can be accessed on their official GitHub repository.
With over 1.1k downloads, the Blazor Addons extension helps improve the workflow for Blazor. Officially released in May 2020 by tHop, this extension lets you quickly create component classes and partial classes in your Blazor projects on VS code. Check out its official Github repository.
The Blazor Minimal Project Template works effectively in Visual Studio 2017 and 2019, providing users with a project template for a .Net Standard project with a minimal implementation of client-side Blazor (a web UI framework based on C#, Razor, and HTML that runs in the browser using WebAssembly). Access via code on its GitHub repository.
Published by Faisal Pathan in December 2019, the Blazor CRUD Template works very effectively in Visual Studio 2019.
This extension provisions templates that include CRUD (Create, Read, Update, and Delete) operations and server-side pagination, using Blazor, Dapper, and Entity Framework Core 3.1.
You can access release details and contribution guides on the GitHub repository.
It’s important to recall that Blazor apps are built using components. A component can be defined as a self-contained chunk of user interface (UI), such as a page, dialog, or a form. It includes HTML markup and the processing logic required to inject data or respond to UI events.
Components are flexible and lightweight. They can be nested, reused, and shared among projects. Components in Blazor were formerly referred to as Razor components.
GrapeCity has tons of amazing free UI components for building fast and modern web applications using Blazor. They use the C# programming language to build native UI controls for Blazor.
GrapeCity UI components are reusable, work on all platforms, and support .NET 5, .NET Core 3.1, and Blazor WebAssembly 3.2. Their collection of demonstrations lets you see each integration in action.
Some of the GrapeCity UI controls for building Blazor applications include:
Blazor is a powerful framework with cool free tools available to enhance your applications and streamline your development process.
Using GrapeCIty UI controls in Blazor applications significantly shortens the development time of any project. Make applications more robust, responsive, and scalable with GrapeCity UI controls. Check out other web development content on the GrapeCity blog.
Try GrapeCity Blazor UI controls for web apps in your next Blazor application. Our 30-day free startup package is enough to get you started, as you explore how GrapeCity can enhance your next Blazor application.