11-17-2018, 01:37 PM
Razor support in Visual Studio Code now in Preview
<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/razor-support-in-visual-studio-code-now-in-preview.gif" width="600" height="381" title="" alt="" /></div><div><p>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.</p>
<h2 id="prerequisites">Prerequisites</h2>
<p>To use this preview of Razor support in Visual Studio Code install the following:</p>
<p>If you already installed VS Code and the C# extension in the past, make sure you have updated to the latest versions of both.</p>
<h2 id="get-started">Get started</h2>
<p>To try out the new Razor tooling, create a new ASP.NET Core web app and then edit any Razor (.cshtml) file.</p>
<ol>
<li>Open Visual Studio Code</li>
<li>Select <em>Terminal</em> > <em>New Terminal</em></li>
<li>
<p>In the new terminal run:</p>
<pre><code>dotnet<span class="hljs-built_in"> new </span>webapp -o WebApp1`
code -r WebApp1
</code></pre>
</li>
<li>
<p>Open <em>About.cshtml</em></p>
</li>
<li>
<p>Try out HTML completions</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/razor-support-in-visual-studio-code-now-in-preview.gif" alt="HTML completions" /></p>
</li>
<li>
<p>And Razor directive completions</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/razor-support-in-visual-studio-code-now-in-preview-1.gif" alt="Directive completions" /></p>
</li>
<li>
<p>And C# completions</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/razor-support-in-visual-studio-code-now-in-preview-2.gif" alt="C# completions" /></p>
</li>
<li>
<p>You also get diagnostics (red squiggles)</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/razor-support-in-visual-studio-code-now-in-preview.png" alt="C# diagnostics" /></p>
</li>
</ol>
<h2 id="limitations-and-known-issues">Limitations and known issues</h2>
<p>This is the first 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 projects (no support for ASP.NET projects or Blazor projects yet)</li>
<li>Support for tag helpers and formatting is not yet implemented</li>
<li>Limited support for colorization</li>
<li>Loss of HTML completions following C# less than (<code><</code>) operator</li>
<li>Error squiggles misaligned for expressions near the start of a new line</li>
<li>Incorrect errors in Blazor projects for event bindings</li>
<li>Emmet based abbreviation expansion is not yet supported</li>
</ul>
<p>Note that if you need to disable the Razor tooling for any reason:</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 id="feedback">Feedback</h2>
<p>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 <a href="https://github.com/aspnet/Razor.VSCode">https://github.com/aspnet/Razor.VSCode</a> repo.</p>
<p>To help us diagnose any reported issues please provide the following information in the GitHub issue:</p>
<ol>
<li>Razor (cshtml) file content</li>
<li>Generated C# code from the Razor CSharp output
<ul>
<li>Right-click inside your .cshtml file and select “Command Palette”</li>
<li>Search for and select “Razor: Show Razor CSharp”</li>
</ul>
</li>
<li>Verbose Razor log output
<ul>
<li>See instructions for capturing the Razor log output <a href="https://github.com/aspnet/Razor.VSCode/wiki/How-to-capture-verbose-log-output">here</a></li>
</ul>
</li>
<li>OmniSharp log output
<ul>
<li>Open VS Code’s “Output” pane</li>
<li>In the dropdown choose “OmniSharp Log”</li>
</ul>
</li>
</ol>
<h2 id="what-s-next-">What’s next?</h2>
<p>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 <a href="https://blazor.net">Blazor</a> tooling support as well. Follow our progress and join in the conversation on the <a href="https://github.com/aspnet/Razor.VSCode">https://github.com/aspnet/Razor.VSCode</a> repo.</p>
<p>Thanks for trying out this early preview!</p>
<p> </p>
</div>
<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/razor-support-in-visual-studio-code-now-in-preview.gif" width="600" height="381" title="" alt="" /></div><div><p>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.</p>
<h2 id="prerequisites">Prerequisites</h2>
<p>To use this preview of Razor support in Visual Studio Code install the following:</p>
<p>If you already installed VS Code and the C# extension in the past, make sure you have updated to the latest versions of both.</p>
<h2 id="get-started">Get started</h2>
<p>To try out the new Razor tooling, create a new ASP.NET Core web app and then edit any Razor (.cshtml) file.</p>
<ol>
<li>Open Visual Studio Code</li>
<li>Select <em>Terminal</em> > <em>New Terminal</em></li>
<li>
<p>In the new terminal run:</p>
<pre><code>dotnet<span class="hljs-built_in"> new </span>webapp -o WebApp1`
code -r WebApp1
</code></pre>
</li>
<li>
<p>Open <em>About.cshtml</em></p>
</li>
<li>
<p>Try out HTML completions</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/razor-support-in-visual-studio-code-now-in-preview.gif" alt="HTML completions" /></p>
</li>
<li>
<p>And Razor directive completions</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/razor-support-in-visual-studio-code-now-in-preview-1.gif" alt="Directive completions" /></p>
</li>
<li>
<p>And C# completions</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/razor-support-in-visual-studio-code-now-in-preview-2.gif" alt="C# completions" /></p>
</li>
<li>
<p>You also get diagnostics (red squiggles)</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/razor-support-in-visual-studio-code-now-in-preview.png" alt="C# diagnostics" /></p>
</li>
</ol>
<h2 id="limitations-and-known-issues">Limitations and known issues</h2>
<p>This is the first 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 projects (no support for ASP.NET projects or Blazor projects yet)</li>
<li>Support for tag helpers and formatting is not yet implemented</li>
<li>Limited support for colorization</li>
<li>Loss of HTML completions following C# less than (<code><</code>) operator</li>
<li>Error squiggles misaligned for expressions near the start of a new line</li>
<li>Incorrect errors in Blazor projects for event bindings</li>
<li>Emmet based abbreviation expansion is not yet supported</li>
</ul>
<p>Note that if you need to disable the Razor tooling for any reason:</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 id="feedback">Feedback</h2>
<p>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 <a href="https://github.com/aspnet/Razor.VSCode">https://github.com/aspnet/Razor.VSCode</a> repo.</p>
<p>To help us diagnose any reported issues please provide the following information in the GitHub issue:</p>
<ol>
<li>Razor (cshtml) file content</li>
<li>Generated C# code from the Razor CSharp output
<ul>
<li>Right-click inside your .cshtml file and select “Command Palette”</li>
<li>Search for and select “Razor: Show Razor CSharp”</li>
</ul>
</li>
<li>Verbose Razor log output
<ul>
<li>See instructions for capturing the Razor log output <a href="https://github.com/aspnet/Razor.VSCode/wiki/How-to-capture-verbose-log-output">here</a></li>
</ul>
</li>
<li>OmniSharp log output
<ul>
<li>Open VS Code’s “Output” pane</li>
<li>In the dropdown choose “OmniSharp Log”</li>
</ul>
</li>
</ol>
<h2 id="what-s-next-">What’s next?</h2>
<p>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 <a href="https://blazor.net">Blazor</a> tooling support as well. Follow our progress and join in the conversation on the <a href="https://github.com/aspnet/Razor.VSCode">https://github.com/aspnet/Razor.VSCode</a> repo.</p>
<p>Thanks for trying out this early preview!</p>
<p> </p>
</div>