Narrated, with original music and captions. Recorded in VS Code on a Blazor Web App: Roslyn hovers in the markup, completion inside a Razor expression, HTML completion and hover, a C# error on its Razor line, F12 into the @code block, references and rename, F12 from Program.cs into App.razor, then linked tag editing and folding.

Blazor and Razor in VS Code with SharpLsp: C# hover, completion, diagnostics, go to definition, references and rename in a .razor component, and HTML from VS Code's HTML service

Read the guide: Blazor and Razor

Transcript

Blazor components get the same C# engine as the rest of your code. Hover any expression in the markup, and Roslyn answers, with your XML docs.

Completion works inside Razor expressions too. The members come from Roslyn, and each edit lands in the Razor file, never in generated code.

The markup around it is still HTML. Element names and HTML hovers come from VS Code's own HTML service.

Make a mistake, and the error shows on the Razor line that caused it, in the editor and in the Problems panel.

Go to Definition jumps from the markup into the code block. Find All References lists every use in the Razor file, with the generated scaffolding left out.

Rename a field in the code block, and every use in the markup follows.

From C#, Go to Definition on a component opens its Razor file, not a generated class.

Rename a tag, and its closing tag changes with it. Elements and code blocks fold, too.