Razor support in Visual Studio Code now in Preview

Earlier this week we released a preview of support for working with Razor files (.cshtml) in the C# extension for Visual Studio Code (1.17.1). This initial release introduces C# completions, directive completions, and basic diagnostics (red squiggles for errors) for ASP.NET Core projects.

Prerequisites

To use this preview of Razor support in Visual Studio Code install the following:

• .NET Core SDK
• Visual Studio Code
• C# extension

If you already installed VS Code and the C# extension in the past, make sure you have updated to the latest versions of both.

Get started

To try out the new Razor tooling, create a new ASP.NET Core web app and then edit any Razor (.cshtml) file.

1. Open Visual Studio Code
2. Select Terminal > New Terminal

3. In the new terminal run:

   dotnet new webapp -o WebApp1`
   code -r WebApp1
   

4. Open About.cshtml

5. Try out HTML completions

6. And Razor directive completions

7. And C# completions

8. You also get diagnostics (red squiggles)

Limitations and known issues

This is the first alpha release of the Razor tooling for Visual Studio Code, so there are a number of limitations and known issues:

• Razor editing is currently only supported in ASP.NET Core projects (no support for ASP.NET projects or Blazor projects yet)
• Support for tag helpers and formatting is not yet implemented
• Limited support for colorization
• Loss of HTML completions following C# less than (<) operator
• Error squiggles misaligned for expressions near the start of a new line
• Incorrect errors in Blazor projects for event bindings
• Emmet based abbreviation expansion is not yet supported

Note that if you need to disable the Razor tooling for any reason:

• Open the Visual Studio Code User Settings: File -> Preferences -> Settings
• Search for "razor"
• Check the "Razor: Disabled" checkbox

Feedback

Even though the functionality of Razor tooling is currently pretty limited, we are shipping this preview now so that we can start collecting feedback. Any issues or suggestions for the Razor tooling in Visual Studio Code should be reported on the https://github.com/aspnet/Razor.VSCode repo.

To help us diagnose any reported issues please provide the following information in the GitHub issue:

1. Razor (cshtml) file content
2. Generated C# code from the Razor CSharp output
   • Right-click inside your .cshtml file and select "Command Palette"
   • Search for and select "Razor: Show Razor CSharp"
3. Verbose Razor log output
   • See instructions for capturing the Razor log output here
4. OmniSharp log output
   • Open VS Code's "Output" pane
   • In the dropdown choose "OmniSharp Log"

What's next?

Next up we are working on tag helper support. This will include support for tag helper completions and IntelliSense. Once we have tag helper tooling support in place we can then start work on enabling Blazor tooling support as well. Follow our progress and join in the conversation on the https://github.com/aspnet/Razor.VSCode repo.

Thanks for trying out this early preview!