BlazmExtension

I've been running Blazor in production seven days after it was released.
I use it for work all day and then for my hobby projects in the evening.
I clock in a lot of Blazor development hours, and I'm always looking for ways to improve my workflow. There are a few things that I've been missing in Visual Studio, and I've been thinking about creating a Visual Studio extension for a while now. So I looked at some of my pain points and how I could solve them with an extension.

Features when right-clicking a component in the solution explorer

When you right-click on a component in the Solution Explorer, you will see a new context menu with the following items:

Creating a new Isolated CSS file

I wanted to be able to create a new Isolated CSS file directly from the Solution Explorer, and I didn't want to have to type the name of the file.
So I created a new Visual Studio extension called BlazmExtension that adds a new context menu item to the Solution Explorer.
Just right-click on the component and select "Create Isolated CSS .
This will create a new CSS file with the appropriate name for that component.

Creating a new Isolated JavaScript file

I also wanted to be able to create a new Isolated JavaScript file directly from the Solution Explorer.
Just right-click on the component and select "Create Isolated JavaScript".
This will create a new JavaScript file with the same name as the component.

Creating a new Codebehind file

This feature will add a code-behind file directly from the Solution Explorer.
Just right-click on the component and select "Create Codebehind".
This will create a new code-behind file with the same name as the component.

Features when right-clicking when selecting code in a Razor file.

When you select code and right-click in a component, you will see a new context menu with the following items:

Move namespaces to _Imports

A common task when creating a new component is to add the namespace to the _Imports.razor file. Simply select the namespaces you want to move and right-click and choose "Move namespaces to _Imports".

Extract to Component

Blazor is a very component-based framework, and you often find yourself extracting parts of your code to a new component. This task is very common, and I wanted to make it as easy as possible. Simply select the code you want to extract and right-click and select "Extract to Component". This will create a new component with the selected code and replace the selected code with the new component.

Features when right-clicking a code-behind file of a Razor component.

When you right-click on a component's code behind file in the Solution Explorer you will see a new context menu with the following items:

Move code-behind to razor

This is my favorite feature of the extension. Visual Studio makes moving code from the razor file to the code-behind file easy. But it doesn't have a feature to move code from the code-behind file to the razor file. I prefer to have all my code in the razor file, and I often move code from the code-behind file to the razor file. Right-click on the component.razor.cs file and select "Move code-behind to razor". This feature is in beta. I hope I have managed to cover all the edge cases, but if you find any bugs, please let me know.

Generic features

Switching files

Switching files between razor and code-behind is common, and I wanted to make it as easy as possible. By pressing CTRL + ALT + N (N for Next file), you can switch between the razor file and the code-behind file (or any nested files).

Blazor Routes

In a large project, it can be hard to keep track of all the routes. I wanted to be able to see all the routes in one place, so I created a new window called Blazor Routes. You can open the window by going to Extensions -> Blazm-> Show Blazor Routes. The window will show all the routes in your project, and you can double-click on a route to open the file.

bUnit test generation

Think writing tests is tedious? This new feature promises to eliminate much of that monotony, letting us zero in on the exciting parts! This feature is still undergoing refinement and is in its beta phase. Your feedback and suggestions would be invaluable as we refine this tool.

This feature will automatically produce test code:

@inherits TestContext
@using Bunit
@using BlazorApp1.Pages;
@code
{
    [Fact]
    public void Test1()
    {
        //Arrange
        //Services.AddSingleton<WeatherForecastService,/*Add implementation for WeatherForecastService*/>();

        var cut = Render(@<FetchData></FetchData>);
        
        //Act

        //Assert
    }
}

For those who lean towards a pure C# syntax, the generator will provide:

public class FetchDataTests : TestContext
{
    [Fact]
    public void Test1()
    {
        //Arrange
        //Services.AddSingleton<WeatherForecastService,/*Add implementation for WeatherForecastService*/>();
        var cut = RenderComponent<FetchData>();
        
        //Act

        //Assert
    }
}

This generator is designed to seamlessly incorporate dependency-injected properties, render fragments, parameters, and much more. While I've tried to cover the most typical scenarios, there may be edge cases I've missed. Bear with me as I continue to tweak it.

There's an ongoing challenge with line break placements, but I'm optimistic about finding a resolution. To leverage this feature, right-click on a component and choose the desired command.

Conclusion

I hope you find this extension useful. I will continue to add new features to the extension and I'm open to suggestions.