3

The New JavaScript/TypeScript Experience in Visual Studio 2022 Preview 3 | Visua...

 2 years ago
source link: https://devblogs.microsoft.com/visualstudio/the-new-javascript-typescript-experience-in-vs-2022-preview-3/?WT_mc_id=DOP-MVP-4025064
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

The New JavaScript/TypeScript Experience in Visual Studio 2022 Preview 3

Gabrielle

August 12th, 2021

Today we are excited to announce a new experience for JavaScript and TypeScript developers in Visual Studio. We are bringing new tooling to enhance the experience for SPA applications and front-end development.

What’s New?

With Visual Studio 2022, we really wanted to make our JavaScript & TypeScript experience shine. We spoke with many developers to understand their expectations and experiences. What we heard was that while our editing features – IntelliSense, Quick Info, Go-to-Definition, etc. – worked well, Visual Studio still had a few gaps when it came to integrated workloads like testing and getting started on front-end projects.

To better support front-end development in Visual Studio 2022, we’re introducing a new JavaScript/TypeScript project type.  With this new project type, you will be able to develop standalone Angular, React, and Vue projects. You will also be able to easily integrate your front-end projects with an ASP.NET Core backend, and even leverage existing tools in Visual Studio like the Test Explorer.

CLI-Based Front-End Project Templates

The current Angular, React, and Vue templates included with Visual Studio were often not up to date, and users told us they wanted to choose the version of the framework they are using. To address this feedback, we’re leveraging each framework’s native CLIs to create these front-end project templates:

Visual Studio will discover and use the version of the CLI installed on your path to scaffold the project.

When creating your project, Visual Studio will open a command prompt so you can see the CLI’s progression.

Note: If you do not have the CLI of choice installed, you will get an error in the New Project Dialog Window, for example:

React cannot be found on your device.

That’s okay! You’ll just need to run the appropriate npm install command:

Angular:

npm install -g @angular/cli

React:

npm install -g create-react-app

npm install -g @vue/cli

As React and Vue support both TypeScript and JavaScript, you also can specify whichever language you prefer during project creation. Visual Studio will add the proper flags to the CLI commands for your choice.

ASP.NET Core Integration

Many of our JavaScript and TypeScript developers are building their front-end projects alongside their ASP.NET Core backend projects. In one of our user studies, participants mentioned they like to keep their front-end and backend projects separated, and that they would open them in multiple editors. To create a similar setup, we moved to a two project in one solution model, where JavaScript/TypeScript projects can be easily integrated with ASP.NET Core Web APIs. You will be able to choose if you want to run, debug and edit your projects together or separately while having access to tooling for both the front-end and backend.

Starting the two-project solution is as easy as selecting the “Add integration for Empty ASP.NET Web API project” option while setting up the project in the New Project Dialog:

When you select the integration, you will notice files that have been added or modified in the JavaScript projects, that will make them differ slightly from the original templates:

  • Additional JavaScript files with an aspnetcore prefix
  • Slightly modified package.json that will include additional npm commands to start up the front–end and the backend
  • Slightly modified application files that automatically use the data created in the .NET Core project’s demo weather API

These files will allow you to add a .NET Core project to your solution and be able to run the two together, without having to add any added code.

Graphical user interface Description automatically generated with medium confidence

JavaScript/TypeScript Testing

Unit testing with the Test Explorer is one of the new features enabled when creating a JavaScript/TypeScript project. We leverage Jest for React and Vue projects, and Karma and Jasmine for Angular projects. By default, you will be able to run the default tests provided by each framework, as well as any additional tests you write.  Just hit the play button in the Test Explorer. If you don’t already have your Test Explorer open, you can find it by opening the Test menu in the menu bar.

We also support the Mocha and Tape test libraries. To use one of these, simply change the default test library in package.json to the appropriate test library’s package.

Easily Work with VS Code

To allow JavaScript/TypeScript projects to also be easily debugged using Visual Studio Code, we’ve included a launch.json file to the project template. This file will be used to set your launch configurations in Visual Studio, as well as in VS Code. As a result, you will be able to seamlessly open, edit, and debug your JavaScript/TypeScript projects in both VS and VS Code.

Getting Started

If you have Visual Studio 2022 Preview 3 installed and you would like to get started, head over to our JavaScript & TypeScript documentation page for all updated tutorials and overviews!

Gabrielle Crevecoeur

Program Manager, JavaScript/TypeScript Tools Team

Follow


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK