New JavaScript / TypeScript projects drive web development tweaks in VS 2022 Preview 3 – Visual Studio Magazine


New JavaScript / TypeScript projects drive web development tweaks in VS 2022 Preview 3

Web developers might be particularly interested in the new version of Visual Studio 2022 Preview 3, which introduces new types of JavaScript / TypeScript projects, integration with ASP.NET Core APIs, hot reload improvements and more.

After focusing on the 64-bit redesign of its flagship IDE in VS 2022 Preview 1, Microsoft has moved on to improved debugging, including better live preview, hot reload, force execution and more, in preview 2.

This goal continues in Preview 3, which would provide more new features on the themes of personal and team productivity, modern development and constant innovation, part of Microsoft’s vision for VS 2022.

Now that the 64-bit architecture has been put to the test in preview tests, there is more emphasis on web development in VS 2022 Preview 3, which is all the more relevant survey after survey (including Stack Overflow’s recently published enormous annual survey) shows that most respondents are involved in web projects. In fact, in this new survey, SO said, “For most developers, programming is web programming.”

This 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 development team responded to them by announcing the new JavaScript and TypeScript project types in Preview 3. “New JavaScript and TypeScript project types for Angular, Vue, and React make it easier to integrating front-end applications into your Visual Studio Solution – allowing you to launch and debug your entire application from within Visual Studio, ”said Mads Kristensen, senior program manager, Visual Studio.

New types of Angular, Vue, and React projects in animated action
[Click on image for larger, animated GIF view.] New types of Angular, Vue, and React projects in animated action (source: Microsoft).

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

And that’s not all for web jockeys, as they will also be able to run unit tests and integrate them into ASP.NET Core API projects. The documentation for “Building an ASP.NET Core App with React in Visual Studio” explains more about this.

In a video, Kristensen said the above changes make it easier to build dynamic single page apps. The build output of the JavaScript project is nothing but static HTML, CSS, and JavaScript, ready to be published to your host. The news was greeted with enthusiasm by one developer, who commented, “Great !! Types of stand-alone projects for Angular, React, and Vue. ”

Blazor – Microsoft’s red ASP.NET Core scheme for building web apps with C # instead of JavaScript – also draws attention to various fronts in the new preview. Now, developers working with the client-side component of Blazor based on WebAssembly (Wasm) technology – aptly named Blazor WebAssembly – find their way in terms of hot-reload functionality. Blazor Wasm applications now support hot reload when started without the debugger (via the CTRL-F5 command instead of F5), which matches the existing support for .NET applications.

Also for ASP.NET Core and Blazor developers:

  • When updating a CSS file in an app, it is now updated in the browser in real time, so developers can use both Hot Reload to edit code behind and update the appearance of applications in the same sessions.
  • When Hot Reload is performed as part of a debugging session (F5), the browser is automatically refreshed when a Hot Reload operation is completed. This only worked for CTRL-F5 in the previous version, and it is now enabled for both scenarios.
  • Known Issue: Apply changes appears to hang when you make changes while the debugger is connected.

Other highlights of Preview 3 include:

  • New project property designer with built-in search: The all new Project Property Designer for .NET SDK projects would be easier to use and navigate, with a single column of options with clear descriptions. In addition, the search is integrated, so it is easier to find the necessary properties. In her video, Kristensen provided more: “The new project properties for SDK-style projects support themes, making them look more cohesive with the rest of Visual Studio. Another highly requested feature is search. It filters the list of properties as you type and highlights matches. You can now also see a preview of the evaluated values ​​of the properties. ”
    New project designer in animated action
    [Click on image for larger, animated GIF view.] New project designer in animated action (source: Microsoft).
  • Multi-repository git support for team collaboration: Preview 3 shows the multiple Git repository – itself in the preview – which allows developers to work with a single solution that contains 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 repositories, Visual Studio will recognize it and display it in the status bar. By clicking on it, you can see the active repository displayed in bold in the list of repositories. . You can then easily commit to active repositories from the Git changes window. Opening the git repository window will display the various repositories and allow you to browse and manage them all from there. “
  • New breakpoint options for transparent debugging: These include breakpoint gutter improvements, a new temporary breakpoint, and drag-and-drop breakpoints. “Preview 3 introduces a bunch of new features for breakpoints to make them easier to use. When the mouse hovers over the left margin of the breakpoint, 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 box. Once a temporary breakpoint is hit in a debugging session, it can be made temporary. is automatically deleted. You can also right click on the breakpoint margin to set any type of breakpoint with fewer clicks. Last but not the least, you can now also drag and drop breakpoints to move them around in your code, ”Kristensen said in the video.
  • Blocking Analyzer for Core Dump Analysis: “Core dumps are complex and finding the root cause of a problem is like looking for a needle in a haystack. With Visual Studio 2022 Preview 3, we’ve made that process easier – with the Diagnostic Analyzer. Diagnostic Tool can be used on core dumps to identify common problems encountered in .NET applications. Enabling you to resolve complex problems quickly. “
  • Remote debugging and testing on Linux: Debugging remote environments connected with Docker and the 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 feel for the general direction – but not the timeline – of Visual Studio 2022 (officially called Visual Studio 2022 v17.0) in the Visual Studio 2022 roadmap.

About the Author

David Ramel is editor and writer for Converge360.

About Jon Moses

Check Also

AlmaLinux 8.7 is now available – Latest trends in digital transformation | Cloud News

Distribution continues to closely track RHEL releases, includes enhanced Defense Information Systems Agency (DISA) technical …

Leave a Reply

Your email address will not be published.