A powerful formatter for Blazor and Razor components, similar to Prettier for HTML/CSS/JS. This extension provides seamless integration with VS Code to format your Blazor components with proper indentation, smart line breaking, and configurable formatting options.
Features
- 🎨 Format on Save: Automatically format your Blazor/Razor files when you save
- 📏 Smart Line Breaking: Intelligently break attributes and content based on configurable thresholds
- ⚙️ Highly Configurable: Customize formatting rules to match your team's style guide
- 🚀 Fast Performance: Powered by Native AOT compiled CLI for instant formatting
- 📝 Supports .razor and .cshtml: Works with both Blazor components and Razor views
- 🔧 Status Bar Integration: See formatter status and version in the status bar
Requirements
The extension will automatically prompt you to install the BlazorLore Format CLI tool on first use.
You can also install it manually:
dotnet tool install --global BlazorLore.Format.Cli
Or use the command palette: Blazor Formatter: Install/Update CLI Tool
Extension Settings
This extension contributes the following settings:
blazorFormatter.formatOnSave
: Enable/disable formatting on save (default: true
)
blazorFormatter.executablePath
: Path to the blazorfmt executable (default: blazorfmt
)
blazorFormatter.indentSize
: Number of spaces for indentation
blazorFormatter.useTabs
: Use tabs instead of spaces
blazorFormatter.attributeBreakThreshold
: Number of attributes before breaking to multiple lines (default: 3
)
blazorFormatter.contentBreakThreshold
: Number of attributes before breaking content to new line (default: 2
)
blazorFormatter.breakContentWithManyAttributes
: Break content to new line when element has many attributes (default: true
)
blazorFormatter.configPath
: Path to .blazorfmt.json configuration file
Usage
- Open a
.razor
or .cshtml
file
- Use one of these methods:
- Press
Shift+Alt+F
(default VS Code format command)
- Right-click and select "Format Document"
- Command Palette: "Blazor Formatter: Format Document"
Create Configuration File
- Command Palette: "Blazor Formatter: Create Configuration File"
- This creates a
.blazorfmt.json
file in your workspace root
Configuration File
Create a .blazorfmt.json
file in your project root for project-wide settings:
{
"IndentSize": 4,
"UseTabs": false,
"AttributeFormatting": "multilineWhenMany",
"AttributeBreakThreshold": 3,
"BreakContentWithManyAttributes": true,
"ContentBreakThreshold": 2,
"QuoteStyle": "double"
}
Examples
<button class="btn btn-primary" @onclick="IncrementCount" disabled="@IsDisabled" title="Click me">Click me</button>
<button
class="btn btn-primary"
@onclick="IncrementCount"
disabled="@IsDisabled"
title="Click me">
Click me
</button>
With fewer attributes:
<button class="btn" @onclick="Click">Click me</button>
Known Issues
- The formatter requires the CLI tool to be installed globally
- Large files may take a moment to format
Release Notes
1.0.0
Initial release of BlazorLore Format for VS Code:
- Format on save functionality
- Configurable formatting options
- Status bar integration
- Support for .razor and .cshtml files
Contributing
Found a bug or have a feature request? Please open an issue on our GitHub repository.
License
MIT License - see LICENSE file for details