{"id":235572,"date":"2021-12-01T11:00:48","date_gmt":"2021-12-01T19:00:48","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/visualstudio\/?p=235572"},"modified":"2021-12-02T08:00:33","modified_gmt":"2021-12-02T16:00:33","slug":"introducing-the-new-razor-editor-in-visual-studio-2022","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/introducing-the-new-razor-editor-in-visual-studio-2022\/","title":{"rendered":"Introducing the new Razor editor in Visual Studio 2022"},"content":{"rendered":"

With the release of Visual Studio 2022\u00a0<\/span>you can now use the new Razor editor for local ASP.NET Core development with MVC, Razor Pages, and Blazor.<\/span><\/span><\/p>\n

Download Visual Studio 2022<\/a> and make sure to update to 17.0.2<\/strong> to get the latest Razor updates.<\/p>\n

Benefits of moving to a Razor Language Server Protocol<\/span><\/span><\/h3>\n

We have been working for some time on a new Razor editor for ASP.NET Core projects based on\u00a0<\/span><\/span>a Language Server Protocol (LSP)<\/a>. <\/span><\/span><\/span>The <\/span>Language Server Protocol (LSP), <\/span><\/span>is an open-source protocol that defines a standard way for an editor or IDE to enable features. The LSP model has enabled<\/span><\/span>\u00a0us 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.<\/span><\/span><\/span><\/p>\n

What\u2019s available in the new Razor editor?<\/span><\/span>\u00a0<\/span><\/h3>\n

The new model opens<\/span>\u00a0the doors to add new code fixes and\u00a0<\/span>refactorings<\/span> more easily. The most used refactoring, Add missing <\/strong><\/span>usings <\/span><\/strong>is now supported in the <\/span>R<\/span>azor editor as well as many more!<\/span><\/span>\u00a0<\/span><\/p>\n

\"Add<\/a><\/p>\n

There are also a few\u00a0<\/span>refactorings<\/span>\u00a0added that are specific to Razor development<\/span>.\u00a0<\/span>These are crucial for picking up the everyday syntax and common elements of\u00a0<\/span>R<\/span>azor.\u00a0<\/span><\/span>For example, E<\/strong><\/span><\/span><\/span>xtract\u00a0<\/span><\/span><\/span>block\u00a0<\/span><\/span><\/span>to code behind<\/span><\/span><\/span><\/strong> allows you to extract an entire code block to a code behind file <\/span><\/span><\/span>if you\u00a0<\/span><\/span><\/span>prefer the code behind pattern.<\/span><\/span><\/span><\/p>\n

\"Extract<\/a><\/p>\n

Additional new Razor refactorings include: <\/span>Add usings for component<\/strong>, <\/span>Fully qualify component<\/strong>, and <\/span>Create component<\/strong>. Many more are planned in the future as Razor evolves.\u00a0<\/span><\/p>\n

There is also more navigation support.\u00a0One of the most used navigation features throughout Visual Studio is Go to Definition<\/strong>.\u00a0Go to Definition on components helps you quickly navigate throughout files to better understand your code.\u00a0For example, pressing F12<\/strong> on a component tag will now navigate you right to the component code.<\/span>\u00a0<\/span><\/p>\n

\"Go<\/a><\/p>\n

A cutting-edge<\/span> feature like Hot Reload<\/a> i<\/span>s <\/span>best when the F5<\/strong> experience has useful diagnostics. This support\u00a0<\/span>would not have been possible without the new\u00a0<\/span>R<\/span>azor editor\u2019s LSP model.<\/span><\/p>\n

\"Hot<\/a><\/p>\n

Default colors have been updated in the new Razor editor.\u00a0<\/span>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.<\/span><\/span><\/p>\n

\"New<\/a><\/p>\n

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.<\/span>\u00a0<\/span><\/p>\n

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.<\/span>\u00a0<\/span><\/p>\n

Razor now\u00a0<\/span>fully\u00a0<\/span>supports\u00a0<\/span><\/span>Visual Studio\u00a0<\/span>Live<\/span>\u00a0<\/span>Share<\/span><\/span><\/a>. Live<\/span>\u00a0<\/span>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.<\/span>\u00a0<\/span><\/span>\u00a0<\/span><\/p>\n

Known Issues & Roadmap<\/span>\u00a0<\/span><\/h3>\n

Razor\u00a0has accumulated a large backlog<\/span>\u00a0<\/span>of feature\u00a0request<\/span>s<\/span>\u00a0<\/span>and bugs\u00a0since it was introduced over a decade ago<\/span>. 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\u2019ve 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:<\/span>\u00a0<\/span><\/p>\n