News

New JavaScript/TypeScript Projects Lead Web-Dev Tweaks in VS 2022 Preview 3

• By David Ramel
• 08/10/2021

Web developers might be especially interested in the new Visual Studio 2022 Preview 3 release, which introduces new JavaScript/TypeScript project types, integration with ASP.NET Core APIs, Hot Reload improvements and more.

After focusing on the landmark 64-bit revamp of its flagship IDE in VS 2022 Preview 1, Microsoft shifted to improving nuts-and-bolts debugging, including better Live Preview, Hot Reload, Force Run and more, in Preview 2.

That focus continues in Preview 3, which reportedly provides more new capabilities on the themes of personal and team productivity, modern development, and constant innovation, all part of Microsoft's vision for VS 2022.

Now that the 64-bit architecture has been put through its paces in preview testing, there is more of a focus on web development in VS 2022 Preview 3, which is all the more pertinent as survey after survey (including Stack Overflow's just-published huge annual survey) show most respondents are involved with web projects. In fact, in that new survey, SO said: "For most developers, programming is web programming."

That SO survey also listed popular web frameworks, with React, Angular and Vue each making the top five. So it's no surprise that the VS dev team catered to them in announcing the new JavaScript and TypeScript project types in Preview 3. "The new JavaScript and TypeScript project types for Angular, Vue, and React make it easy to incorporate front end applications within your Visual Studio solution -- empowering you to launch and debug your entire app from Visual Studio," said Mads Kristensen, senior program manager, Visual Studio.

The Preview 3 release notes state that those projects will be created using the framework command-line interface (CLI) already installed on local machines, which means that the template version is based on the CLI versions installed locally.

And that's not all for the web jockeys, as they will also be able to run unit tests and integrate them with ASP.NET Core API projects. Documentation to "Create an ASP.NET Core app with React in Visual Studio" explains more about that.

In a video, Kristensen said the above changes make it "super easy to build dynamic single page applications. The build output of the JavaScript project is nothing but static HTML, CSS and JavaScript, ready to publish to your web host." The news was met enthusiastically by one developer, who commented: "Great!! Standalone project types for Angular, React and Vue."

Blazor -- Microsoft's red-hot ASP.NET Core scheme to create web apps with C# instead of JavaScript -- also gets some attention on various fronts in the new preview. Now, developers working with the client-side component of Blazor that's based on WebAssembly (Wasm) tech -- aptly named Blazor WebAssembly -- get caught up in terms of Hot Reload functionality. Blazor Wasm apps now support Hot Reload when they are started without the debugger (via CTRL-F5 command as opposed to just F5), matching the existing support for .NET apps.

Also for ASP.NET Core and Blazor developers:

• When updating a CSS file within an app it is now updated within the browser in real-time, so that devs can use both Hot Reload to change the code-behind and update the apps look and feel in the same sessions.
• When Hot Reload is running under a debug session (F5) the browser will be automatically refreshed when a Hot Reload operation is completed. This used to only work for CTRL-F5 in the previous release, and it's now enabled for both scenarios.
• Known Issue: Apply changes appears to hang when making changes while debugger is attached.

Some other highlights of Preview 3 include:

• New project properties designer with built-in search: The brand-new project properties designer for .NET SDK projects is said to be easier to use and browse, sporting a single column of options with clear descriptions. Also, search is built in so it's easier to find needed properties. In his video, Kristensen provided more: "The new project properties for SDK-style projects supports theming, giving them a more consistent look with the rest of Visual Studio. Another highly requested feature is search. It filters the property list as you type and highlights the matches. You can also now see a preview of the evaluated values of the properties."

  

• Multi-repo git support for cross-team collaboration: Preview 3 introduces the multiple Git repository -- itself in preview -- which lets developers work with a single solution that has projects in multiple repositories and contribute to them from a single VS instance. As Kristensen explained in the video: "So when you open a solution that spans multiple repos, Visual Studio will recognize that and display it in the status bar. Clicking on it, you can see the active repo showing up in bold in the repo list. You'll then be able to commit across the active repos easily from the Git changes window. Opening the git repository window will show the different repos and let you browse and manage them all from there."
• New breakpoint options for seamless debugging: These include breakpoint gutter improvements, a new temporary breakpoint and drag-and-drop breakpoints. "Preview 3 introduces a bunch of new features to breakpoints to make them easier to use. As the mouse hovers over the left breakpoint margin you can see where you can set a breakpoint. There is also a new type of temporary breakpoint. Any type of breakpoint can be made temporary by checking this checkbox. Once a temporary breakpoint is hit in a debugging session, it is automatically removed. You can also right-click the breakpoint margin to set any type of breakpoint with fewer clicks. Last but not least, you can now also drag and drop breakpoints to move them around your code," Kristensen said in the video.
• Deadlock analyzer for memory dump analysis: "Memory dumps are complex and finding the root cause of an issue is like looking for a needle in a haystack. With Visual Studio 2022 Preview 3 we've made that process a breeze -- with the diagnostic analyzer. The diagnostic analyzer can be used on memory dumps to identify common problems seen in .NET applications. Empowering you to root cause complex issues in no time."
• Remote debugging and testing on Linux: Debugging remote environments connected with Docker and Windows Subsystem for Linux (WSL) is now possible, and developers can also debug over SSH connections if they are connected to Linux.

Developers can get a sense of the general direction -- though not the timing -- of Visual Studio 2022 (officially called Visual Studio 2022 v17.0) in the Visual Studio 2022 Roadmap.