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

Gabrielle

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.

Text Description automatically generated

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

Vue:

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.

Graphical user interface, application Description automatically generated

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:

Graphical user interface, text, application Description automatically generated

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.

Graphical user interface, application, Word Description automatically generated

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!

 

11 comments

Leave a comment

  • David Lowndes

    Creating a TS or JS React project currently results in this at the end of the process for me.
    I don’t normally run VS As Administrator – do we have to for this?

    npm ERR! code EPERM
    npm ERR! syscall mkdir
    npm ERR! path D:\Visual Studio 2022\Preview\Common7\IDE\node_modules
    npm ERR! errno -4048
    npm ERR! Error: EPERM: operation not permitted, mkdir 'D:\Visual Studio 2022\Preview\Common7\IDE\node_modules'
    npm ERR!  [OperationalError: EPERM: operation not permitted, mkdir 'D:\Visual Studio 2022\Preview\Common7\IDE\node_modules'] {
    npm ERR!   cause: [Error: EPERM: operation not permitted, mkdir 'D:\Visual Studio 2022\Preview\Common7\IDE\node_modules'] {
    npm ERR!     errno: -4048,
    npm ERR!     code: 'EPERM',
    npm ERR!     syscall: 'mkdir',
    npm ERR!     path: 'D:\\Visual Studio 2022\\Preview\\Common7\\IDE\\node_modules'
    npm ERR!   },
    npm ERR!   errno: -4048,
    npm ERR!   code: 'EPERM',
    npm ERR!   syscall: 'mkdir',
    npm ERR!   path: 'D:\\Visual Studio 2022\\Preview\\Common7\\IDE\\node_modules',
    npm ERR!   parent: '@jest/types'
    npm ERR! }
    npm ERR!
    npm ERR! The operation was rejected by your operating system.
    npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
    npm ERR! or that you lack permissions to access it.
    npm ERR!
    npm ERR! If you believe this might be a permissions issue, please double-check the
    npm ERR! permissions of the file and its containing directories, or try running
    npm ERR! the command again as root/Administrator.
    
    • Gabrielle CrevecoeurMicrosoft employee

      Hey David

      It looks like youre trying to make your project in the VS install directory: D:\Visual Studio 2022\Preview\Common7\IDE\

      If you try to create your project in a different folder it should work 🙂

      Gabby

      • David Lowndes

        Hi Gabby,

        It may look like that, but no, I’m not. The project location is C:\Users\David\Source\Repos.
        At the start of the npm command window, it shows:

        Creating a new React app in c:\users\david\source\repos\tsreactproject1\tsreactproject1.
        

        Bug report here.

  • Michael Stuart

    When using the “Standalone TypeScript Vue Template”, the checkbox “Add integration for Empty ASP.NET Web API Project.” doesn’t create any web api project in the resulting solution. I tried it twice to make sure. Also, I switched it to a black theme, and it also did the same for my VS 2019. I thought they were supposed to not interfere with each other, which is why I decided to try out the preview. I’m not worried about a theme switching, but now wondering what else it might do. Anyway, looking forward to the new features mentioned in this blog post.

  • Marko A

    Regarding “CLI-Based Front-End Project Templates”, is it possible not to force users to install these CLI tools globally? Specifically, create-react-app advises people not to install their CLI globally (https://github.com/facebook/create-react-app#quick-overview), but rather use npx to download and run the latest version at all times. I’m guessing that it’s a bit more complex with Angular and Vue CLI tools since they offer bunch of other functionality after you bootstrap the project, but I’m quite sure it can be done.

    I feel like current approach would push people into using outdated versions of these tools since people rarely update their global npm modules, so generating new projects would use their outdated global installs.

  • David De Smet

    Very excited about it! Just got a couple of questions…

    It is possible we can switch to yarn instead of using npm?
    Also, how’s the integration with Vue SFC (aka .vue files)? Does the IDE provide any Intellisense in such files?

    • Gabrielle CrevecoeurMicrosoft employee

      Hey David

      We have gotten a lot of asks to support yarn so we do have that as a feature we want to explore! Thanks for the suggestion. We are also investigating how we can support .vue files. Sorry about the delay on that 🙂

      Gabby