Avalonia for Visual Studio Code

Build cross‑platform .NET desktop and mobile apps with Avalonia—directly from Visual Studio Code. This extension adds rich tooling for .axaml files, giving you a fast, productive workflow.

Features

• Live XAML Previewer - See your UI update in real time as you type, without rebuilding.
• IntelliSense & Code Completion - Write XAML faster with context aware completions.
• Diagnostics & Code Fixes - Problems are surfaced directly in the editor, with automatic fixes for common mistakes.
• Code Navigation tools - Go to definitions within your code and hover for quick info.
• C# Snippets - Easily create Attached Properties, Direct , Styled Properties, and more.
• Avalonia DevTools Integration - For enhanced debugging capabilities.

Requirements

• .NET 8 SDK or above
• C# Dev Kit extension

Installation

1. Install the extension from the VS Code Marketplace.
2. Ensure the .NET 8 SDK is installed.
3. Optionally, sign in with your Avalonia license to unlock all features.

Recommended settings

Nest code-behind files under their XAML

The extension contributes a file nesting rule so that MainWindow.axaml.cs appears nested under MainWindow.axaml in the Explorer, matching the Solution Explorer in Visual Studio.

VS Code has file nesting turned off by default, so enable it in your settings to see this:

{
  "explorer.fileNesting.enabled": true,
  // Optional: keep nested children collapsed until you expand them
  "explorer.fileNesting.expand": false
}

Note that enabling file nesting also activates VS Code's built-in rules for other file types (for example package.json and tsconfig.json).

Known Issues & Feedback

Please report bugs and request features on the issue tracker.

License

This extension is proprietary software developed by AvaloniaUI OÜ. Essential functionality is available for free or a license is required to unlock all functionality. For full license terms, see avaloniaui.net/legal.