07-23-2019, 11:08 AM
Updated Razor support in Visual Studio Code, now with Blazor support
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support.jpg" width="150" height="150" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support.jpg" width="58" height="58" alt="Daniel Roth" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 alignnone photo"></p>
<p>Daniel</p>
</div>
</div>
</div>
<div class="entry-meta">
<p>April 18th, 2019</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p>Today we are pleased to announce improved Razor tooling support in Visual Studio Code with the latest C# extension. This latest release includes improved Razor diagnostics and support for tag helpers and Blazor apps.</p>
<h2>Get Started</h2>
<p>To use this preview of Razor support in Visual Studio Code install the following:</p>
<p>To try out Visual Studio Code with <a href="https://blazor.net">Blazor</a> apps, also install:</p>
<ul>
<li><a href="https://aka.ms/netcore3download">.NET Core 3.0</a> (Preview 4 or later)</li>
<li>
<p>The latest Blazor CLI templates:</p>
<pre><code>dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview4-19216-03
</code></pre>
</li>
</ul>
<h2>What’s new in this release?</h2>
<h3>Improved diagnostics</h3>
<p>We’ve improved the Razor diagnostics in Visual Studio Code for a variety of scenarios, including floating <code>@</code> characters:</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support.png" alt="Floating @ character"></p>
<p>Missing end braces:</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support-1.png" alt="Missing end brace"></p>
<p>And missing end tags in code blocks:</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support-2.png" alt="Missing end tag"></p>
<h3>Tag helpers</h3>
<p>Tag helper completions are now supported in ASP.NET Core projects:</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support.gif" alt="Tag helper completion"></p>
<p>As well as completions for tag helper attribute names and values:</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support-1.gif" alt="Tag helper attribute completion"></p>
<h3>Blazor</h3>
<p>Visual Studio Code now works with <a href="https://blazor.net">Blazor</a> apps too!</p>
<p>You get completions for components and component parameters:</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support-2.gif" alt="Component completions"></p>
<p>Also data-binding, event handlers and lots of other Blazor goodies!</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support-3.gif" alt="Blazor todos"></p>
<h2>Limitations and known issues</h2>
<p>This is an alpha release of the Razor tooling for Visual Studio Code, so there are a number of limitations and known issues:</p>
<ul>
<li>Razor editing is currently only supported in ASP.NET Core and Blazor projects (no support for ASP.NET projects)</li>
<li>Limited support for colorization</li>
</ul>
<p>Note that if you need to disable the Razor tooling:</p>
<ul>
<li>Open the Visual Studio Code User Settings: <em>File</em> -> <em>Preferences</em> -> <em>Settings</em></li>
<li>Search for “razor”</li>
<li>Check the “Razor: Disabled” checkbox</li>
</ul>
<h2>Feedback</h2>
<p>Please let us know what you think about this latest update to the Razor tooling support in Visual Studio Code by reporting issues in the <a href="https://github.com/aspnet/Razor.VSCode">Razor.VSCode</a> repo. When reporting Razor tooling related issues please use the “Report a Razor Issue” command in Visual Studio Code to capture all of the relevant longs and diagnostic information. Just run the command and then follow the instructions.</p>
<p>Thanks for trying out Razor in Visual Studio Code!</p>
<div class="authorinfoarea">
<div><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support.jpg" width="96" height="96" alt="Daniel Roth" class="avatar avatar-96 wp-user-avatar wp-user-avatar-96 alignnone photo"></div>
<div>
<h5><a class="no-underline" aria-label="Daniel Roth" target="_blank" href="https://devblogs.microsoft.com/aspnet/author/danroth27/" rel="noopener noreferrer">Daniel Roth</a></h5>
<p>Principal Program Manager, ASP.NET</p>
<p><strong>Follow Daniel</strong> <a class="no-underline stayinformed" aria-label="Daniel Roth Twitter profile" target="_blank" href="https://twitter.com/danroth27" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a><a class="no-underline stayinformed" aria-label="Daniel Roth GitHub profile" target="_blank" href="https://github.com/danroth27" rel="noopener noreferrer"><i class="fa fa-github"></i></a><a class="no-underline stayinformed hvr-pop" aria-label="Daniel Roth RSS Feed" target="_blank" href="https://devblogs.microsoft.com/aspnet/author/danroth27/feed/" rel="noopener noreferrer"></a></p>
</p></div>
</p></div>
</div>
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support.jpg" width="150" height="150" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support.jpg" width="58" height="58" alt="Daniel Roth" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 alignnone photo"></p>
<p>Daniel</p>
</div>
</div>
</div>
<div class="entry-meta">
<p>April 18th, 2019</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p>Today we are pleased to announce improved Razor tooling support in Visual Studio Code with the latest C# extension. This latest release includes improved Razor diagnostics and support for tag helpers and Blazor apps.</p>
<h2>Get Started</h2>
<p>To use this preview of Razor support in Visual Studio Code install the following:</p>
<p>To try out Visual Studio Code with <a href="https://blazor.net">Blazor</a> apps, also install:</p>
<ul>
<li><a href="https://aka.ms/netcore3download">.NET Core 3.0</a> (Preview 4 or later)</li>
<li>
<p>The latest Blazor CLI templates:</p>
<pre><code>dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview4-19216-03
</code></pre>
</li>
</ul>
<h2>What’s new in this release?</h2>
<h3>Improved diagnostics</h3>
<p>We’ve improved the Razor diagnostics in Visual Studio Code for a variety of scenarios, including floating <code>@</code> characters:</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support.png" alt="Floating @ character"></p>
<p>Missing end braces:</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support-1.png" alt="Missing end brace"></p>
<p>And missing end tags in code blocks:</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support-2.png" alt="Missing end tag"></p>
<h3>Tag helpers</h3>
<p>Tag helper completions are now supported in ASP.NET Core projects:</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support.gif" alt="Tag helper completion"></p>
<p>As well as completions for tag helper attribute names and values:</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support-1.gif" alt="Tag helper attribute completion"></p>
<h3>Blazor</h3>
<p>Visual Studio Code now works with <a href="https://blazor.net">Blazor</a> apps too!</p>
<p>You get completions for components and component parameters:</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support-2.gif" alt="Component completions"></p>
<p>Also data-binding, event handlers and lots of other Blazor goodies!</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support-3.gif" alt="Blazor todos"></p>
<h2>Limitations and known issues</h2>
<p>This is an alpha release of the Razor tooling for Visual Studio Code, so there are a number of limitations and known issues:</p>
<ul>
<li>Razor editing is currently only supported in ASP.NET Core and Blazor projects (no support for ASP.NET projects)</li>
<li>Limited support for colorization</li>
</ul>
<p>Note that if you need to disable the Razor tooling:</p>
<ul>
<li>Open the Visual Studio Code User Settings: <em>File</em> -> <em>Preferences</em> -> <em>Settings</em></li>
<li>Search for “razor”</li>
<li>Check the “Razor: Disabled” checkbox</li>
</ul>
<h2>Feedback</h2>
<p>Please let us know what you think about this latest update to the Razor tooling support in Visual Studio Code by reporting issues in the <a href="https://github.com/aspnet/Razor.VSCode">Razor.VSCode</a> repo. When reporting Razor tooling related issues please use the “Report a Razor Issue” command in Visual Studio Code to capture all of the relevant longs and diagnostic information. Just run the command and then follow the instructions.</p>
<p>Thanks for trying out Razor in Visual Studio Code!</p>
<div class="authorinfoarea">
<div><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/updated-razor-support-in-visual-studio-code-now-with-blazor-support.jpg" width="96" height="96" alt="Daniel Roth" class="avatar avatar-96 wp-user-avatar wp-user-avatar-96 alignnone photo"></div>
<div>
<h5><a class="no-underline" aria-label="Daniel Roth" target="_blank" href="https://devblogs.microsoft.com/aspnet/author/danroth27/" rel="noopener noreferrer">Daniel Roth</a></h5>
<p>Principal Program Manager, ASP.NET</p>
<p><strong>Follow Daniel</strong> <a class="no-underline stayinformed" aria-label="Daniel Roth Twitter profile" target="_blank" href="https://twitter.com/danroth27" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a><a class="no-underline stayinformed" aria-label="Daniel Roth GitHub profile" target="_blank" href="https://github.com/danroth27" rel="noopener noreferrer"><i class="fa fa-github"></i></a><a class="no-underline stayinformed hvr-pop" aria-label="Daniel Roth RSS Feed" target="_blank" href="https://devblogs.microsoft.com/aspnet/author/danroth27/feed/" rel="noopener noreferrer"></a></p>
</p></div>
</p></div>
</div>