vscode-csharp icon indicating copy to clipboard operation
vscode-csharp copied to clipboard

Add Visual Studio 2022-like parameter wrapping for Blazor components

Open borislavnnikolov opened this issue 5 months ago • 0 comments

Is your feature request related to a problem? Please describe.

I'm always frustrated when working with Blazor components that have multiple parameters, as the VS Code formatter keeps all parameters on a single line or multiple lines which looks messy. This makes the code harder to read and maintain, especially when components have many parameters or long parameter values. For example:

<MudTextField T="string" Value="@this.Value" ValueChanged="@this.ValueChangedAsync" Variant="@Variant.Outlined" Immediate="true" Adornment="@Adornment.End" AdornmentIcon="@Icons.Filled.Delete" AdornmentColor="@Color.Error" OnAdornmentClick="@this.ClearValueAsync" />

Describe the solution you would like

I would like a VS Code setting that allows me to configure how Blazor component parameters are formatted, similar to how Visual Studio 2022 handles it. Specifically, I want the ability to:

  1. Wrap parameters onto separate lines
  2. Indent parameters consistently
  3. Control the indentation size

Example of desired formatting (matching Visual Studio 2022's behavior):

<MudTextField T="string" 
             Value="@this.Value" 
             ValueChanged="@this.ValueChangedAsync" 
             Variant="@Variant.Outlined" 
             Immediate="true" 
             Adornment="@Adornment.End" 
             AdornmentIcon="@Icons.Filled.Delete" 
             AdornmentColor="@Color.Error" 
             OnAdornmentClick="@this.ClearValueAsync" />

This could be controlled through VS Code settings:

{
    "[razor]": {
        "editor.defaultFormatter": "ms-dotnettools.csharp",
        "csharp.format.razor.wrapParameters": true,
        "csharp.format.razor.parameterIndentSize": 4
    }
}

Applicable Scenarios

This feature would be particularly useful in:

  1. Complex Blazor components with many parameters
  2. Components with long parameter values or expressions
  3. Team environments where consistent formatting is important
  4. Code reviews where parameter changes need to be clearly visible
  5. Large Blazor applications with many components
  6. When working with third-party component libraries (like MudBlazor) that have components with many parameters
  7. Teams transitioning from Visual Studio 2022 to VS Code who want to maintain consistent formatting

Describe alternatives you've considered

  1. Manual formatting - This is time-consuming and error-prone
  2. Using a different formatter - But this might not properly handle Blazor syntax
  3. Using a different IDE - But this would require changing the entire development workflow
  4. Creating a custom formatter - But this would require significant development effort and maintenance
  5. Using a pre-commit hook to format code - But this doesn't help during development
  6. Using Visual Studio 2022 instead - But this would mean giving up VS Code's other benefits

Additional context

This formatting style is already implemented in Visual Studio 2022, and it would be beneficial to have feature parity in VS Code. The feature would be especially helpful for teams working with large Blazor applications where code readability and maintainability are crucial, and for developers who switch between Visual Studio and VS Code.

Related issues:

  • #4997 - Razor formatting issues with indentation

borislavnnikolov avatar May 09 '25 09:05 borislavnnikolov