Introducing the new Razor editor in Visual Studio 2022

Mika Dumont

With the release of Visual Studio 2022 you can now use the new Razor editor for local ASP.NET Core development with MVC, Razor Pages, and Blazor.

Download Visual Studio 2022 and make sure to update to 17.0.2 to get the latest Razor updates.

Benefits of moving to a Razor Language Server Protocol

We have been working for some time on a new Razor editor for ASP.NET Core projects based on a Language Server Protocol (LSP). The Language Server Protocol (LSP), is an open-source protocol that defines a standard way for an editor or IDE to enable features. The LSP model has enabled us to add significant new functionality, bringing many more of the C# editing features to Razor and enabling other new Razor specific productivity improvements at an accelerated pace.

What’s available in the new Razor editor? 

The new model opens the doors to add new code fixes and refactorings more easily. The most used refactoring, Add missing usings is now supported in the Razor editor as well as many more! 

Add missing usings refactoring

There are also a few refactorings added that are specific to Razor developmentThese are crucial for picking up the everyday syntax and common elements of Razor. For example, Extract block to code behind allows you to extract an entire code block to a code behind file if you prefer the code behind pattern.

Extract to code behind refactoring

Additional new Razor refactorings include: Add usings for component, Fully qualify component, and Create component. Many more are planned in the future as Razor evolves. 

There is also more navigation support. One of the most used navigation features throughout Visual Studio is Go to Definition. Go to Definition on components helps you quickly navigate throughout files to better understand your code. For example, pressing F12 on a component tag will now navigate you right to the component code. 

Go to Definition

A cutting-edge feature like Hot Reload is best when the F5 experience has useful diagnostics. This support would not have been possible without the new Razor editor’s LSP model.

Hot Reload

Default colors have been updated in the new Razor editor. A major difference in this area is the removal of the code background highlight that was present in previous versions. This highlight made selections difficult to distinguish and added visual clutter for many developers.

New default colors

Formatting is an active area as more code styles, refactoring, and completion capabilities are added regularly. The new editor provides improved formatting that is better able to keep up with these changes helping code stay visually consistent. 

The new Razor editor supports the latest compiler features and polishes existing syntax interactions. Smarter Razor syntax completions, such as <text> completion and auto complete are now supported. The new editor also changes how diagnostics flow to ensure only the most important diagnostics are shown and diagnostics generated by the compiler are shown in their intended fidelity. 

Razor now fully supports Visual Studio Live Share. Live Share is a useful tool for collaborating remotely with other developers which enables code sharing from within the IDE. That shared context is an important part of the daily cycle of co-programming for many developers.  

Known Issues & Roadmap 

Razor has accumulated a large backlog of feature requests and bugs since it was introduced over a decade ago. Addressing these issues in the legacy Razor editor was difficult and costly. The new Razor editor sets the team up for success in order to deliver bug fixes and features faster. We’ve been monitoring the feedback on the new editor (thank you all for your help!) and understand we have a long way to go. Our focus has been bringing the new Razor editor to functional parity with the previous Razor editor and improving quality and performance. There are still a handful of functional gaps to address, and we expect to fill these gaps in upcoming releases. Below is a list of known limitations that we are working to address: 

  • Snippets support (expansion with Tab) 
  • Wrap div shortcut Shift+Alt+W
  • Ctrl+Click Go to Definition
  • #region code folding
  • Embedded JavaScript formatting 
  • Drag & Drop support for HTML, CSS, and JavaScript files 
  • Performance and reliability improvements 
  • Hot Reload support for Blazor Web Assembly projects when debugging 

You can learn more about our roadmap and when we plan to address these issues on GitHub. If you find that your developer productivity is limited in the new editor, you can revert back to the legacy editor by going to Tools > Options > Text Editor > HTML > Advanced and select True from the dropdown next to Use legacy Razor editor for ASP.NET Core. Keep in mind that the legacy Razor editor will have limited functionality and not include the productivity improvements mentioned in this post that we added in the new Razor editor.

Give us your feedback! 

We would love to get your feedback on the new Razor editor so please give it a try and let us know what you think! You can share your feedback with us by creating an issue on GitHubWe appreciate your feedback!