Tell us about your PDF experience.

Visual Studio tutorials | JavaScript and

TypeScript
Create JavaScript and TypeScript apps with Visual Studio

Get started

ｅ OVERVIEW

JavaScript and TypeScript in Visual Studio

ｃ HOW-TO GUIDE

Install Visual Studio

ｂ GET STARTED

Start a guided tour

Create JavaScript and TypeScript apps

ｆ QUICKSTART

Create an Angular project

Create a React project

Create a Vue project

ｇ TUTORIAL

Create a React app

Create a web app with Angular and [Link] Core

Create a web app with React and [Link] Core

Create a web app with Vue and [Link] Core

Create a web app with [Link] and Express

Add TypeScript to an [Link] Core app

Learn Visual Studio

ｃ HOW-TO GUIDE

Write and edit code

Linting JavaScript

Compile TypeScript code using tsc

Compile TypeScript code using NuGet

Manage npm packages

Debug your code

Develop code without projects or solutions

Write and run unit tests

JavaScript and TypeScript in Visual Studio
06/09/2025

Visual Studio 2022 provides rich support for JavaScript development, both using JavaScript
directly, and also using the TypeScript programming language , which was developed to
provide a more productive and enjoyable JavaScript development experience, especially when
developing projects at scale. You can write JavaScript or TypeScript code in Visual Studio for
many application types and services.

JavaScript language service

The JavaScript experience in Visual Studio 2022 is powered by the same engine that provides
TypeScript support. This engine gives you better feature support, richness, and integration
immediately out-of-the-box.

The option to restore to the legacy JavaScript language service is no longer available. Users
have the new JavaScript language service out-of-the-box. The new language service is solely
based on the TypeScript language service, which is powered by static analysis. This service
enables us to provide you with better tooling, so your JavaScript code can benefit from richer
IntelliSense based on type definitions. The new service is lightweight and consumes less
memory than the legacy service, providing you with better performance as your code scales.
We also improved performance of the language service to handle larger projects.

TypeScript support
By default, Visual Studio 2022 provides language support for JavaScript and TypeScript files to
power IntelliSense without any specific project configuration.

For compiling TypeScript, Visual Studio gives you the flexibility to choose which version of
TypeScript to use on a per-project basis.

In MSBuild compilation scenarios such as [Link] Core, the TypeScript NuGet package is the
recommended method of adding TypeScript compilation support to your project. Visual Studio
will give you the option to add this package the first time you add a TypeScript file to your
project. This package is also available at any time through the NuGet package manager. When
the NuGet package is used, the corresponding language service version will be used for
language support in your project. Note: The minimum supported version of this package is 3.6.

Projects configured for npm, such as [Link] projects, can specify their own version of the
TypeScript language service by adding the TypeScript npm package . You can specify the
version using the npm manager in supported projects. Note: The minimum supported version
of this package is 2.1.

The TypeScript SDK has been deprecated in Visual Studio 2022. Existing projects that rely on
the SDK should be upgraded to use the NuGet package.

 Tip

For projects developed in Visual Studio 2022, we encourage you to use the TypeScript
NuGet or the TypeScript npm package for greater portability across different platforms
and environments. For more information, see Compile TypeScript code using NuGet and
Compile TypeScript code using npm.

Project templates
Starting in Visual Studio 2022, there is a new JavaScript/TypeScript project type (.esproj), called
the JavaScript Project System (JSPS), which allows you to create standalone Angular, React, and
Vue projects in Visual Studio. These front-end projects are created using the framework CLI
tools you have installed on your local machine, so the version of the template is up to you. To
migrate from existing [Link] projects to the new project system, see Migrate [Link] projects.
For MSBuild information for the new project type, see MSBuild properties for JSPS

Within these new projects, you can run JavaScript and TypeScript unit tests, easily add and
connect [Link] Core API projects and download your npm modules using the npm manager.
Check out some of the quickstarts and tutorials to get started. For more information, see Visual
Studio tutorials | JavaScript and TypeScript.

７ Note

A simplified, updated template is available starting in Visual Studio 2022 version 17.5.
Compared to the [Link] SPA templates available in Visual Studio, the .esproj SPA
templates for [Link] Core provide better npm dependency management, and better
build and publish support.
Overview of the Visual Studio IDE for
JavaScript
06/06/2025

In this 5-10 minute introduction to the Visual Studio integrated development environment
(IDE), we take a tour of some of the windows, menus, and other UI features.

If you haven't installed Visual Studio, go to the Visual Studio downloads page to install it for
free.

Start window
The first thing you see after you launch Visual Studio is the start window. The start window is
designed to help you "get to code" faster. It has options to close or check out code, open an
existing project or solution, create a new project, or simply open a folder that contains some
code files. If the start window is not open, choose File > Start Window to open it.

If this is the first time you're using Visual Studio, your recent projects list will be empty.

If you work with non-MSBuild based codebases, use the Open a local folder option to open
your code in Visual Studio. For more information, see Develop code in Visual Studio without
projects or solutions. Otherwise, you can create a new project or clone a project from a source
provider such as GitHub or Azure DevOps.

The Continue without code option simply opens the Visual Studio development environment
without any specific project or code loaded. You might choose this option to join a Live Share
session or attach to a process for debugging. You can also press Esc to close the start window
and open the IDE.

Create a project
To continue exploring Visual Studio's features, let's create a new project.

1. On the start window, select Create a new project, and then in the search box type in
javascript or typescript to filter the list of project types to those that contain "javascript"
or "typescript" in their name or language type.

Visual Studio provides various kinds of project templates that help you get started coding
quickly.

2. Choose a JavaScript Express Application project template and click Next.

3. In the Configure your new project dialog box that appears, accept the default project
name and choose Create.
 The project is created. In the right pane, select [Link] to open the file in the Editor
window. The Editor shows the contents of files, and is where you do most of your coding
work in Visual Studio.

Solution Explorer
Solution Explorer, which is typically on the right-hand side of Visual Studio, shows you a
graphical representation of the hierarchy of files and folders in your project, solution, or code
folder. You can browse the hierarchy and navigate to a file in Solution Explorer.
Menus
The menu bar along the top of Visual Studio groups commands into categories. For example,
the Project menu contains commands related to the project you're working in. On the Tools
menu, you can customize how Visual Studio behaves by selecting Options, or add features to
your installation by selecting Get Tools and Features.

Let's open the Error List window by choosing the View menu, and then Error List.

Error List
The Error List shows you errors, warning, and messages regarding the current state of your
code. If there are any errors (such as a missing brace or semicolon) in your file, or anywhere in
your project, they're listed here.

Output window
The Output window shows you output messages from building your project and from your
source control provider.

Let's build the project to see some build output. From the Build menu, choose Build Solution.
The Output window automatically obtains focus and display a successful build message.

Search box
The search box is a quick and easy way to do pretty much anything in Visual Studio. You can
enter some text related to what you want to do, and it'll show you a list of options that pertain
to the text. For example, imagine you want to increase the build output's verbosity to display
additional details about what exactly build is doing. Here's how you might do that:

1. If you don't see the search box, press Ctrl + Q to open it.

2. Type verbosity into the search box. From the displayed results, choose Projects and
Solutions --> Build and Run.

The Options dialog box opens to the Build and Run options page.

3. Under MSBuild project build output verbosity, choose Normal, and then click OK.

4. Build the project again by right-clicking the project in Solution Explorer and choosing
Rebuild from the context menu.

This time the Output window shows more verbose logging from the build process.
Send Feedback menu
Should you encounter any problems while you're using Visual Studio, or if you have
suggestions for how to improve the product, you can use the Send Feedback menu at the top
of the Visual Studio window.

Next steps
We've looked at just a few of the features of Visual Studio to get acquainted with the user
interface. To explore further:

Learn about the code editor

Learn about projects and solutions

See also
Overview of the Visual Studio IDE
More features of Visual Studio 2017
Change theme and font colors
Create a React project
Article • 12/05/2024

In this 5-10 minute introduction to the Visual Studio integrated development

environment (IDE), you create and run a simple React frontend web application.

Prerequisites
Make sure to install the following software:

Visual Studio 2022 or later. Go to the Visual Studio downloads page to install it
for free.
npm ([Link] ), which is included with [Link]

Create your app

1. In the Start window (choose File > Start Window to open), select Create a new
project.

2. Search for React in the search bar at the top and then select React App for either
JavaScript or TypeScript, based on your preference.
 Starting in Visual Studio 2022 version 11, the template name was changed from
Standalone JavaScript React Project to React App.

3. Give your project and solution a name.

4. Choose Create, and then wait for Visual Studio to create the project.

Please note that creation of the React project takes a moment because the create-
react-app command that runs at this time also runs the npm install command.

View the project properties

The default project settings allow you to build and debug the project. But, if you need to
change settings, right-click the project in Solution Explorer, select Properties, and then
go the Linting, Build or Deploy section.

For debugger configuration, use [Link].

７ Note

[Link] stores the startup settings associated with the Start button in the

Debug toolbar. Currently, [Link] must be located under the .vscode folder.

Build Your Project

Choose Build > Build Solution to build the project.

Start Your Project

Press F5 or select the Start button at the top of the window, and you'll see a command
prompt such as:

VITE v4.4.9 ready in 780 ms

７ Note

Check console output for messages, such as a message instructing you to update
your version of [Link].

Next, you should see the base React app appear!

Next steps
Create a React app

For [Link] Core integration:

Create an [Link] Core app with React

Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community

Create an Angular project
Article • 12/05/2024

In this 5-10 minute introduction to the Visual Studio integrated development

environment (IDE), you create and run a simple Angular frontend web application.

Prerequisites
Make sure to install the following software:

Visual Studio 2022 or later. Go to the Visual Studio downloads page to install it
for free.
npm ([Link] ), which is included with [Link]
Angular CLI ([Link] ), which can be the version of your
choice.

Create your app

1. In the Start window (choose File > Start Window to open), select Create a new
project.

2. Search for Angular in the search bar at the top and then select Angular App.
 Starting in Visual Studio 2022 version 11, the template name was changed from
Standalone TypeScript Angular Project to Angular App.

3. Give your project and solution a name.

4. Choose Create, and then wait for Visual Studio to create the project.

View the project properties

The default project settings allow you to build and debug the project. But, if you need to
change settings, right-click the project in Solution Explorer, select Properties, and then
go the Linting, Build or Deploy section.

For debugger configuration, use [Link].

７ Note

[Link] stores the startup settings associated with the Start button in the
Debug toolbar. Currently, [Link] must be located under the .vscode folder.

Build Your Project

Choose Build > Build Solution to build the project.

Note, the initial build may take a while, as the Angular CLI runs the npm install
command.

Start Your Project

Press F5 or select the Start button at the top of the window, and you will see a
command prompt:

The Angular CLI running the ng start command

７ Note

Check console output for messages, such as a message instructing you to

update your version of [Link].

Next, you should see the base Angular apps appear!

Next steps
For [Link] Core integration:

Create an [Link] Core app with Angular

Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community

Create a [Link] project
Article • 12/05/2024

In this 5-10 minute introduction to the Visual Studio integrated development

environment (IDE), you create and run a simple [Link] frontend web application.

Prerequisites
Make sure to install the following software:

Visual Studio 2022 or later. Go to the Visual Studio downloads page to install it
for free.
npm ([Link] ), which is included with [Link]
[Link] (Installation | [Link] ([Link]) )

Create your app

1. In the Start window (choose File > Start Window to open), select Create a new
project.

2. Search for Vue in the search bar at the top and then select Vue App for either
JavaScript or TypeScript.
 Starting in Visual Studio 2022 version 11, the template name was changed from
Standalone JavaScript Vue Project to Vue App.

3. Give your project and solution a name, and then choose Next.

4. Choose Create, and then wait for Visual Studio to create the project.

View the project properties

The default project settings allow you to build and debug the project. But, if you need to
change settings, right-click the project in Solution Explorer, select Properties, and then
go the Linting, Build or Deploy section.

For debugger configuration, use [Link].

７ Note

[Link] stores the startup settings associated with the Start button in the

Debug toolbar. Currently, [Link] must be located under the .vscode folder.

Build Your Project

Choose Build > Build Solution to build the project.
Start Your Project
Press F5 or select the Start button at the top of the window, and you'll see a command
prompt such as:

VITE v4.4.9 ready in 780 ms

７ Note

Check console output for messages, such as a message instructing you to

update your version of [Link].

Next, you should see the base [Link] app appear!

Next steps
For [Link] Core integration:

Create an [Link] Core app with Vue

Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community

Tutorial: Create a [Link] and Express app
in Visual Studio
Article • 12/18/2024

This article demonstrates how to use Visual Studio to build a basic [Link] web app that uses
the Express framework.

[Link] is a server-side JavaScript runtime environment that executes JavaScript code. By

default, [Link] uses the npm package manager to make it easy to use and share [Link]
source code libraries. The npm package manager simplifies the installation, updating, and
uninstallation of libraries.

Express is a server web application framework that [Link] uses to build web apps. With
Express, there are many different ways to create a user interface. The implementation provided
in this tutorial uses the Express application generator's default template engine, called Pug, to
render the frontend.

In this tutorial, you:

＂ Create a [Link] app by using a JavaScript template

＂ Build the app and examine the running process
＂ Debug the app in the Visual Studio debugger

Prerequisites
Visual Studio 2022 version 17.12 or later with the [Link] and web development
workload installed.

To install Visual Studio for free, go to the Visual Studio downloads page.

If you already have Visual Studio, you can install the workload from within the
Interactive Development Environment (IDE):

1. Select Tools > Get Tools and Features.

2. In the Visual Studio Installer, select the Workloads tab.

3. Select the [Link] and web development workload, and then select Modify.

4. Follow the prompts and complete the installation.

[Link] with the npm package manager and the npx package.
 You can check your [Link] installation with the node -v command. The command
output should show the installed version of [Link], such as v23.4.0 . For more
information, see Downloading and installing [Link] and npm .

The npm package manager is included in the [Link] installation. Verify the
installation with the npm -v command. The command output should show the installed
version of the package manager, such as 10.9.2 .

The npx package is part of the npm CLI. Confirm the package installation with the
npx -v command. The command output should show the installed package version,

such as 10.9.2 .

Create your app

Follow these steps to create a new [Link] app in Visual Studio:

1. In the Visual Studio Start window (File > Start Window), select Create a new project:

2. In the Search box, enter Express, and select the JavaScript Express Application template
in the list of results:
 3. Select Next to continue to the configuration page.

4. Enter a Project name and Solution name for your new app. Choose the default Location
or browse to a different path in your environment.

5. Select Create to create the new [Link] project.

Visual Studio creates your new project and opens your project hierarchy in Solution Explorer.

View your project properties

The default project settings allow you to build and debug the project. You can change the
settings as needed.

1. In Solution Explorer, right-click the project and select Properties. You can also access
these properties by selecting Project > ExpressProject Properties.

2. In the Project Properties pane, go to the Build section and configure the properties as
desired.

3. To configure debug settings, select Debug > ExpressProject Debug Properties.

 ７ Note

The [Link] file stores the startup settings associated with the Start action in the
Debug toolbar. Currently, the [Link] must be located in the .vscode folder.

Build your project

Build your project by selecting Build > Build Solution.

Start your app

Start your new app by selecting Ctrl + F5 or Start Without Debugging (green arrow outline
icon) in the toolbar.

A terminal opens and shows the executing command:

Output

> expressproject@0.0.0 start

> node ./bin/www

GET / 200 29342.066 ms - 170

GET /stylesheets/[Link] 200 18.967 ms - 111

７ Note

Check the terminal output for messages. Also check the Output pane in Visual Studio.
Watch for instructions to update your version of [Link].

When the app launches successfully, a browser window opens showing the Express app:
Debug your app
Now you're ready to explore ways to debug your app.

If your app is still running, select Shift + F5 to end the current session or Stop (red square
icon) in the Debug toolbar. You might notice that ending the session closes the browser that
shows your app, but the terminal window running the Node process remains open. For now,
go ahead and close any lingering windows. Later in this article, you review scenarios for when
you might want to leave the Node process running.

Debug the Node process

The dropdown list to the left of the Start action shows available start options for the app:

localhost (Edge)
localhost (Chrome)
Launch ExpressProject
Launch Node and Browser

Follow these steps to debug the Node process for the app:

1. In the Start dropdown list, select Launch Node and Browser.

2. In Solution Explorer, expand the routes folder and open the [Link] file.

3. In the code editor, set a breakpoint in the [Link] file:

a. Locate the code statement [Link]('index', { title: 'Express' }); .

 b. Select in the left gutter on the line for the statement. Visual Studio adds a red circle in
the gutter to indicate the set breakpoint.

 Tip

You can also place your cursor on a line of code and select F9 to toggle the
breakpoint for that line.

4. Start your app in the debugger by selecting F5 or Start Debugging (green arrow icon)
in the Debug toolbar.

Visual Studio starts execution of your app. When the debugger reaches your set
breakpoint, the debugging process pauses.

5. While execution is paused, you can inspect the state of your app. Hover over variables
and examine their properties.

6. When you're ready to continue, select F5. Processing continues and your app opens in
the browser.

This time, if you select Stop, notice that both the browser and terminal windows close. To
understand why the behavior is different, take a closer look at the [Link] file.

Examine the [Link] file

Follow these steps to examine the [Link] file for the project:

1. In Solution Explorer, expand the .vscode folder and open the [Link] file.

 Tip

If you don't see the .vscode folder in Solution Explorer, select the Show All Files
action in the Solution Explorer toolbar.

2. Take a look at the file in the code editor. If you have experience with Visual Studio Code,
the [Link] file probably looks familiar. The [Link] file in this project corresponds
to the file used by Visual Studio Code to denote launch configurations used for
debugging. Each entry specifies one or more targets to debug.

3. Examine the first two entries in the file. These entries define behavior for different internet
browsers:

JSON
 {
"name": "localhost (Edge)",
"type": "edge",
"request": "launch",
"url": "[Link]
"webRoot": "${workspaceFolder}\\public"
},
{
"name": "localhost (Chrome)",
"type": "chrome",
"request": "launch",
"url": "[Link]
"webRoot": "${workspaceFolder}\\public"
}

The supported browsers are indicated with the type property. If you launch the app with
only a browser type as the sole debug target, Visual Studio debugs only the front-end
browser process. The Node process starts without a debugger attached. Visual Studio
doesn't bind any breakpoints set in the Node process.

７ Note

Currently, edge and chrome are the only supported browser types for debugging.

When you end the session, the Node process continues to run, by design. The process is
intentionally left running when a browser is the debug target. If work is solely being done
on the frontend, having the backend process continuously running eases the
development workflow.

At the start of this section, you closed the lingering terminal window so you could set
breakpoints in the Node process. To enable Visual Studio to debug the Node process, the
process must be restarted with the debugger attached. If a nondebuggable Node process
is left running, attempting to launch the Node process in debug mode (without
reconfiguring the port) fails.

4. Review the third entry in the [Link] file. This entry specifies node as the debug type:

JSON

{
"name": "Launch ExpressProject",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}/bin",
"program": "${workspaceFolder}/bin/www",
 "stopOnEntry": true
}

The third entry launches only the Node process in debug mode. Visual Studio doesn't
launch the browser.

5. Examine the fourth entry in the [Link] file, which defines a compound launch
configuration:

JSON

{
"name": "Launch Node and Browser",
"configurations": [
"Launch ExpressProject",
"localhost (Edge)"
]
}

This compound configuration is the same as a Visual Studio Code compound launch
configuration . When you select this configuration, you can debug both the frontend
and backend. Notice that the definition simply references the individual launch
configurations for the Node and browser processes.

There are many other attributes you can use in a launch configuration. For example, you
can hide a configuration to remove it from the Start dropdown list, but allow references
to the configuration by setting the hidden attribute in the presentation object to true :

JSON

{
"name": "localhost (Chrome)",
"type": "chrome",
"request": "launch",
"url": "[Link]
"webRoot": "${workspaceFolder}\\public",
"presentation": {
"hidden": true
}
}

6. Configure options by using supported attributes to enhance your debugging experience.

Currently, only launch configurations are supported. Any attempt to use an attach
configuration results in a deployment failure. For more information, see Options .
Related links
Debug a JavaScript or TypeScript app in Visual Studio
Migrate [Link] projects in Visual Studio
Manage npm packages in Visual Studio
Create a React app in Visual Studio
Article • 04/09/2025

In this tutorial, you create a React front-end for a to-do list web app using JavaScript and Visual
Studio 2022. The code for this app can be found at ToDoJSWebApp .

Prerequisites
Make sure to install the following:

Visual Studio 2022 or later. Go to the Visual Studio downloads page to install it for free.
npm ([Link] ), which is included with [Link].

Create the React ToDo List app

1. In Visual Studio, select File > New > Project to open the Create a New Project dialog,
select the React App JavaScript template, and then choose Next.

2. Name the project TodoWebApp and select Create.

This creates the JavaScript project using the vite command line tool .

3. In Solution Explorer, right-click the src folder and choose Add > New Folder. and create
a new folder named components .
 It’s a common convention to place components in a components folder, but this is not
required.

4. Right-click the new folder, select Add > New Item, then choose React JSX Component
File in the dialog box, name it TodoList , and click Add.

This creates a new JSX file in the components folder.

5. Open the TodoList component and replace the default content with the following:

jsx

function TodoList() {
return (
<h2>TODO app contents</h2>
);
}

This component displays a header, which you will replace later.

Next, wire up this component in the app. [Link] is the main component that is loaded,
which represents the to-do list application. This component is used in the [Link] file.

6. In Solution Explorer, open [Link] , remove all imports from the top, and clear out the
contents of the return statement. The file should look like the following.
 jsx

function App() {
return (
<>
<TodoList />
</>
);
}
export default App;

7. To add the TodoList component, place your cursor inside the fragment and then type
<TodoL RETURN . This adds the component and the import statement.

Next, clear out the CSS files.

8. Open [Link] and delete all contents.

9. Open [Link] and remove all contents except the styles for :root :

css

:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
}
Run the app
Select the Start Debugging button from the toolbar or press the F5 keyboard shortcut.

The app opens in a browser window.

Add to-do list functions to the app

You can leave the app running. As you make changes, the app automatically refreshes with the
latest content using Vite's hot module replacement support. Some actions, such as adding
folders or renaming files, require that you stop debugging and then restart the app, but in
general you can leave it running in the background as you develop your app. Open the
[Link] component so that we can start to define it.

1. In Solution Explorer, open [Link] and add the UI needed to show and manage to-
do list entries. Replace the content with the following code:

jsx

function TodoList() {
return (
<div>
<h1>TODO</h1>
<div>
<input type="text" placeholder="Enter a task" required aria-
label="Task text" />
<button className="add-button" aria-label="Add task">Add</button>
</div>
 <ol id="todo-list">
<p>existing tasks will be shown here</p>
</ol>
</div>
);
}
export default TodoList;

The preceding code adds an input box for the new to-do task and a button to submit the
input. Next, you wire up the Add button. Use the useState React hook to add two state
variables, one for the task that is getting added, and another to store the existing tasks.
For this tutorial, the tasks get stored in memory and not persistent storage.

2. Add the following import statement to [Link] to import useState .

jsx

import { useState } from 'react'

3. Next, use that hook to create the state variables. Add the following code in the TodoList
function above the return statement.

jsx

const [tasks, setTasks] = useState(["Drink some coffee", "Create a TODO app",

"Drink some more coffee"]);
const [newTaskText, setNewTaskText] = useState("");

This sets up two variables, tasks and newTaskText , for the data and two functions that
you can call to update those variables, setTasks and setNewTasks . When a value for a
state variable is changed, React automatically re-renders the component.

You're almost ready to update [Link] to show the to-do items as a list, but there is an
important React concept to learn first.

In React, when you display a list of items you need to add a key to uniquely identify each
item in the list. This feature is explained in depth in the React docs at Rendering Lists ,
but here you'll learn the basics. You have a list of to-do items to display, and you need to
associate a unique key for each item. The key for each item should not change, and for
this reason you can't use the index of the item in the array as the key. You need an ID that
won't change throughout the lifetime of those values. You'll use randomUUID() to
create a unique ID for each to-do item.
4. Create [Link] using a UUID as the key for each to-do item. Update [Link] with
the following code.

jsx

import React, { useState } from 'react';

const initialTasks = [
{ id: [Link](), text: 'Drink some coffee' },
{ id: [Link](), text: 'Create a TODO app' },
{ id: [Link](), text: 'Drink some more coffee' }
];

function TodoList() {
const [tasks, setTasks] = useState(initialTasks);
const [newTaskText, setNewTaskText] = useState("");

return (
<article
className="todo-list"
aria-label="task list manager">
<header>
<h1>TODO</h1>
<form className="todo-input" aria-controls="todo-list">
<input
type="text"
placeholder="Enter a task"
value={newTaskText} />
<button
className="add-button">
Add
</button>
</form>
</header>
<ol id="todo-list" aria-live="polite" aria-label="task list">
{[Link]((task, index) =>
<li key={[Link]}>
<span className="text">{[Link]}</span>
</li>
)}
</ol>
</article>
);
}
export default TodoList;

Since the ID values are assigned outside the TodoList function, you can be sure the values
won't change if the page is re-rendered. When you try the app in this state, you'll notice
that you can't type into the todo input element. This is because the input element is
bound to newTaskText , which has been initialized to a blank string. To allow users to add
 new tasks, you need to handle the onChange event on that control. You also need to
implement the Add button support.

5. Add the required functions immediately before the return statement in the TodoList
function.

jsx

function handleInputChange(event) {
setNewTaskText([Link]);
}

function addTask() {
if ([Link]() !== "") {
setTasks(t => [...t, { id: [Link](), text:
newTaskText }]);
setNewTaskText("");
}
[Link]();
}

In the handleInputChanged function, the new value from the input field is passed in
through [Link] , and that value is used to update the value for the
newTaskText variable with setNewTaskText . In the addTask function, add the new task to

the list of existing tasks using setTasks and set the ID of the item as a new UUID value.
Update the input element to include onChange={handleInputChange} and update the Add
button to include onClick={addTask} . This code wires up the event to the function that
handles that event. Following this, you should be able to add a new task to the task list.
New tasks are added to the bottom of the list. To make this app more useful, you need to
add support to delete tasks and to move a task up or down.

6. Add the functions to support delete, move up and move down, and then update the
markup to show a button for each action. Add the following code in the TodoList function
above the return statement.

jsx

function deleteTask(id) {
const updatedTasks = [Link](task => [Link] != id);
setTasks(updatedTasks);
}

function moveTaskUp(index) {
if (index > 0) {
const updatedTasks = [...tasks];
[updatedTasks[index], updatedTasks[index - 1]] = [updatedTasks[index
- 1], updatedTasks[index]];
 setTasks(updatedTasks);
}
}

function moveTaskDown(index) {
if (index < [Link]) {
const updatedTasks = [...tasks];
[updatedTasks[index], updatedTasks[index + 1]] = [updatedTasks[index
+ 1], updatedTasks[index]];
setTasks(updatedTasks);
}
}

The delete function takes in the task ID and deletes that one from the list and uses the
Array filter() method to create a new array excluding the selected item and then calls
setTasks() . The other two functions take in the index of the item because this work is

specific to the item ordering. Both moveTaskUp() and moveTaskDown() use array
destructuring assignment to swap the selected task with its neighbor.

7. Next, update the view to include these three buttons. Update the return statement to
contain the following.

jsx

return (
<article
className="todo-list"
aria-label="task list manager">
<header>
<h1>TODO</h1>
<form className="todo-input" onSubmit={addTask} aria-
controls="todo-list">
<input
type="text"
required
autoFocus
placeholder="Enter a task"
value={newTaskText}
aria-label="Task text"
onChange={handleInputChange} />
<button
className="add-button"
aria-label="Add task">
Add
</button>
</form>
</header>
<ol id="todo-list" aria-live="polite">
{[Link]((task, index) =>
<li key={[Link]}>
<span className="text">{[Link]}</span>
 <button className="delete-button" onClick={() =>
deleteTask([Link])}>
🗑️
</button>
<button className="up-button" onClick={() =>
moveTaskUp(index)}>
⇧
</button>
<button className="down-button" onClick={() =>
moveTaskDown(index)}>
⇩
</button>
</li>
)}
</ol>
</article>
);

You've added the buttons needed to perform the tasks we discussed previously. You're
using Unicode characters as icons on the buttons. In the markup, there are some
attributes added to support adding some CSS later. You might also notice the use of aria
attributes to improve accessibility, which are optional but highly recommended. If you
run the app, it should look like the following illustration.

You should now be able to perform the following in the TODO web app.

Add task
Delete task
Move task up
Move task down
 These functions work, but you can refactor to build a reusable component to display the
to-do items. The markup for the to-do item goes into a new component, TodoItem.
Because the management of the list stays in the Todo component, you can pass callbacks
to the Delete and Move buttons.

8. To get started, right-click the components folder in Solution Explorer and select Add >
New Item.

9. In the dialog that opens, select the React JSX Component File, give it the name TodoItem,
and select Add.

10. Add the following code to the TodoItem.

In this code, you pass in the task and callbacks as properties to this new component.

jsx

import PropTypes from 'prop-types';

function TodoItem({ task, deleteTaskCallback, moveTaskUpCallback,

moveTaskDownCallback }) {
return (
<li aria-label="task" >
<span className="text">{task}</span>
<button
type="button"
aria-label="Delete task"
className="delete-button"
onClick={() => deleteTaskCallback()}>
🗑️
</button>
<button
type="button"
aria-label="Move task up"
className="up-button"
onClick={() => moveTaskUpCallback()}>
⇧
</button>
<button
type="button"
aria-label="Move task down"
className="down-button"
onClick={() => moveTaskDownCallback()}>
⇩
</button>
</li>
);
}

[Link] = {
task: [Link],
deleteTaskCallback: [Link],
 moveTaskUpCallback: [Link],
moveTaskDownCallback: [Link],
};

export default TodoItem;

The preceding code contains the markup from the Todo component and at the end of it
you declare the PropTypes . Props are used to pass data from a parent component to child
components. For more info on Props, see Passing Props to a Component – React .
Because the delete and move functions are being passed in as callbacks, the onClick
handler needs to be updated to call into those callbacks.

11. Add the required code. The full code for TodoList that uses the TodoItem component is
shown here.

jsx

import React, { useState } from 'react'

import TodoItem from './TodoItem'

const initialTasks = [
{ id: [Link](), text: 'Drink some coffee' },
{ id: [Link](), text: 'Create a TODO app' },
{ id: [Link](), text: 'Drink some more coffee' }
];

function TodoList() {
const [tasks, setTasks] = useState(initialTasks);
const [newTaskText, setNewTaskText] = useState("");
function handleInputChange(event) {
setNewTaskText([Link]);
}
function addTask() {
if ([Link]() !== "") {
setTasks(t => [...t, { id: [Link](), text:
newTaskText }]);
setNewTaskText("");
}
[Link]();
}
function deleteTask(id) {
const updatedTasks = [Link](task => [Link] !== id);
setTasks(updatedTasks);
}
function moveTaskUp(index) {
if (index > 0) {
const updatedTasks = [...tasks];
[updatedTasks[index], updatedTasks[index - 1]] =
[updatedTasks[index - 1], updatedTasks[index]];
setTasks(updatedTasks);
}
 }
function moveTaskDown(index) {
if (index < [Link]) {
const updatedTasks = [...tasks];
[updatedTasks[index], updatedTasks[index + 1]] =
[updatedTasks[index + 1], updatedTasks[index]];
setTasks(updatedTasks);
}
}
return (
<article
className="todo-list"
aria-label="task list manager">
<header>
<h1>TODO</h1>
<form onSubmit={addTask} aria-controls="todo-list">
<input
type="text"
required
placeholder="Enter a task"
value={newTaskText}
aria-label="Task text"
onChange={handleInputChange} />
<button
className="add-button"
aria-label="Add task">
Add
</button>
</form>
</header>
<ol id="todo-list" aria-live="polite">
{[Link]((task, index) =>
<TodoItem
key={[Link]}
task={[Link]}
deleteTaskCallback={() => deleteTask([Link])}
moveTaskUpCallback={() => moveTaskUp(index)}
moveTaskDownCallback={() => moveTaskDown(index)}
/>
)}
</ol>
</article>
);
}

export default TodoList;

Now, the TodoItem component is used to render each to-do item. Notice that the key is
set to [Link] , which contains the UUID value for that task. When you run the app, you
shouldn’t see any changes to the look or behavior of the app because you refactored it to
use TodoItem.
 Now that you have all the basic functions supported, it’s time to start adding some styling
to this to make it look nice. Start by adding a link in [Link] for a font family, Inter, that
you will use for this app. In [Link], there are some other items that need to be
cleaned up. Specifically, the title should be updated and you want to replace the [Link]
file that is currently used as the icon.

12. Update [Link] with the following content.

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/[Link]" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>TODO app</title>
<link href='[Link]
rel='stylesheet'>
<script type="module" defer src="/src/[Link]"></script>
</head>
<body>
</body>
</html>

13. Edit [Link] file to replace root with main when calling createRoot .

The complete code for [Link] is shown here.

jsx

import { StrictMode } from 'react'

import { createRoot } from 'react-dom/client'
import App from './[Link]'
import './[Link]'

createRoot([Link]('main')).render(
<StrictMode>
<App />
</StrictMode>,
)

In addition to these changes, the file [Link] was added to the public
folder. This is an SVG from the FluentUI checkmark square image, which you can
download directly. (There's a package that you can use for a more integrated experience,
but that’s outside the scope of this article.)
 Next, update the styles of the TodoList component.

14. In the components folder, add a new CSS file named [Link]. You can right-click on
the project and select Add > New Item and then select Style Sheet. Give the file the
name [Link].

15. Add the following code to [Link].

css

.todo-list {
background-color: #1e1e1e;
padding: 1.25rem;
border-radius: 0.5rem;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
width: 100%;
max-width: 25rem;
}

.todo-list h1 {
text-align: center;
color: #e0e0e0;
}

.todo-input {
display: flex;
justify-content: space-between;
margin-bottom: 1.25rem;
}

.todo-input input {
flex: 1;
padding: 0.625rem;
border: 0.0625rem solid #333;
border-radius: 0.25rem;
margin-right: 0.625rem;
background-color: #2c2c2c;
color: #e0e0e0;
}

.todo-input .add-button {
padding: 0.625rem 1.25rem;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 0.25rem;
cursor: pointer;
}

.todo-input .add-button:hover {
background-color: #0056b3;
}
 .todo-list ol {
list-style-type: none;
padding: 0;
}

.todo-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.625rem;
border-bottom: 0.0625rem solid #333;
}

.todo-list li:last-child {
border-bottom: none;
}

.todo-list .text {
flex: 1;
}

.todo-list li button {
background: none;
border: none;
cursor: pointer;
font-size: 1rem;
margin-left: 0.625rem;
color: #e0e0e0;
}

.todo-list li button:hover {
color: #007bff;
}

.todo-list li [Link]-button {
color: #ff4d4d;
}

.todo-list li [Link]-button,
.todo-list li [Link]-button {
color: #4caf50;
}

16. Next, edit [Link] to add the following import at the top of the file.

jsx

import './[Link]';

17. Refresh the browser after saving the changes. This should improve the styling of the app.
The app should look like the following.
 Now you've built a working to-do list app that stores the to-do items in memory. From
this point, you could update the app to store the to-do items in
localStorage /IndexedDb , or integrate this with a server-side database, or other
backend, for more permanent storage.

Summary
In this tutorial, you created a new React app using Visual Studio. The app consists of a to-do
list, which includes support to add tasks, delete tasks, and reorder them. You created two new
React components and used those throughout this tutorial.

Resources
Code for this sample at ToDoJSWebApp
Visual Studio JavaScript and TypeScript projects
Tutorial: Create an [Link] Core app with
React in Visual Studio
Article • 04/09/2025

In this article, you learn how to build an [Link] Core project to act as an API backend and a
React project to act as the UI.

Currently, Visual Studio includes [Link] Core Single Page Application (SPA) templates that
support Angular and React. The templates provide a built-in Client App folder in your [Link]
Core projects that contains the base files and folders of each framework.

You can use the method described in this article to create [Link] Core Single Page
Applications that:

Put the client app in a separate project, outside from the [Link] Core project
Create the client project based on the framework CLI installed on your computer

７ Note

This article describes the project creation process using the updated template in Visual
Studio 2022 version 17.11, which uses the Vite CLI. Vite determines the version of React
using project dependencies, such as those configured in [Link].

Prerequisites
Visual Studio 2022 version 17.11 or later with the [Link] and web development
workload installed. Go to the Visual Studio downloads page to install it for free. If you
need to install the workload and already have Visual Studio, go to Tools > Get Tools and
Features..., which opens the Visual Studio Installer. Choose the [Link] and web
development workload, then choose Modify.
npm ([Link] ), which is included with [Link]

Create the app

1. In the Start window, select Create a new project.
2. Search for React in the search bar at the top and then select React and [Link] Core.
This template is a JavaScript template.
 3. Name the project ReactWithASP and then select Next.

In the Additional Information dialog, make sure that Configure for HTTPS is enabled. In
most scenarios, leave the other settings at the default values.

4. Select Create.

Solution Explorer shows the following project information:

Compared to the standalone React template, you see some new and modified files for
integration with [Link] Core:

[Link]
[Link] (modified)

5. Select an installed browser from the Debug toolbar, such as Chrome or Microsoft Edge.

If the browser you want is not yet installed, install the browser first, and then select it.

Set the project properties

1. In Solution Explorer, right-click the [Link] project and choose Properties.
2. In the Properties page, open the Debug tab and select Open debug launch profiles UI
option. Uncheck the Launch Browser option for the https profile or the profile named
after the [Link] Core project, if present.
 This value prevents opening the web page with the source weather data.

７ Note

In Visual Studio, [Link] stores the startup settings associated with the Start
button in the Debug toolbar. Currently, [Link] must be located under the
.vscode folder.

3. Right-click the solution in Solution Explorer and select Properties. Verify that the Startup
project settings are set to Multiple projects, and that the Action for both projects is set to
Start.

Start the project

Press F5 or select the Start button at the top of the window to start the app. Two command
prompts appear:

The [Link] Core API project running

The Vite CLI showing a message such as VITE v4.4.9 ready in 780 ms

７ Note

Check console output for messages. For example, there might be a message to
update [Link].

The React app appears and is populated via the API (the localhost port may vary from the
screenshot).
If you don't see the weather forecast data in the browser, see Troubleshooting.

Publish the project

1. In Solution Explorer, right-click the [Link] project and select Add > Project
Reference.

Make sure the [Link] project is selected.

2. Choose OK.

3. Right-click the [Link] Core project again and select Edit Project File.

This opens the .csproj file for the project.

4. In the .csproj file, make sure the project reference includes a <ReferenceOutputAssembly>
element with the value set to false .

This reference should look like the following.

XML

<ProjectReference
Include="..\[Link]\[Link]">
<ReferenceOutputAssembly>false</ReferenceOutputAssembly>
</ProjectReference>

5. Right-click the [Link] Core project and choose Reload Project if that option is available.

6. In [Link], make sure the following code is present.

 C#

[Link]();
[Link]();

// Configure the HTTP request pipeline.

if ([Link]())
{
[Link]();
[Link]();
}

7. To publish, right click the [Link] Core project, choose Publish, and select options to
match your desired publish scenario, such as Azure, publish to a folder, etc.

The publish process takes more time than it does for just an [Link] Core project, since
the npm run build command gets invoked when publishing. The BuildCommand runs npm
run build by default.

If you publish to a folder, see [Link] Core directory structure for more information on
the files added to the publish folder.

Troubleshooting

Proxy error
You may see the following error:

Windows Command Prompt

[HPM] Error occurred while trying to proxy request /weatherforecast from

localhost:4200 to [Link] (ECONNREFUSED)
([Link]

If you see this issue, most likely the frontend started before the backend.

Once you see the backend command prompt up and running, just refresh the React app
in the browser.
Also, verify that the backend is configured to start before the front end. To verify, select
the solution in Solution Explorer, choose Properties from the Project menu. Next, select
Configure Startup Projects and make sure that the backend [Link] Core project is first
in the list. If it's not first, select the project and use the Up arrow button to make it the
first project in the launch list.
Verify ports
If the weather data doesn't load correctly, you may also need to verify that your ports are
correct.

1. Make sure that the port numbers match. Go to the [Link] file in the
[Link] Core [Link] project (in the Properties folder). Get the port number
from the applicationUrl property.

If there are multiple applicationUrl properties, look for one using an https endpoint. It
looks similar to [Link] .

2. Open the [Link] file for the React project. Update the target property to match
the applicationUrl property in [Link]. The updated value looks similar to the
following:

JavaScript

target: '[Link]

Privacy error
You may see the following certificate error:

Your connection isn't private

Try deleting the React certificates from %appdata%\local\[Link]\https or

%appdata%\roaming\[Link]\https, and then retry.

Docker
If you create the project with Docker support enabled, take the following steps:

1. After the app loads, get the Docker HTTPS port using the Containers window in Visual
Studio. Check the Environment or Ports tab.
 ７ Note

If you do not see the environment name ASPNETCORE_HTTPS_PORT , add it manually using the
[Link] file. In the section Container (Dockerfile) and after the entry
"useSSL": true , add "sslPort": <any port> . In this example, use the following:
"sslPort": 44307

2. Open the [Link] file for the React project. Update the target variable to match
the HTTPS port in the Containers window. For example, in the following code:

JavaScript

const target = env.ASPNETCORE_HTTPS_PORT ?

`[Link] :
env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] :
'[Link]

change [Link] to the matching HTTPS port (in this example,

[Link] ).

3. Restart the app.

Next steps
For more information about SPA applications in [Link] Core, see the React section under
Developing Single Page Apps. The linked article provides additional context for project files
such as [Link], although details of the implementation are different based on the
template differences. For example, instead of a ClientApp folder, the React files are contained
in a separate project.

For MSBuild information specific to the client project, see MSBuild properties for JSPS.
Tutorial: Create an [Link] Core app with
Angular in Visual Studio
04/10/2025

In this article, you learn how to build an [Link] Core project to act as an API backend and an
Angular project to act as the UI.

Visual Studio includes [Link] Core Single Page Application (SPA) templates that support
Angular and React. The templates provide a built-in Client App folder in your [Link] Core
projects that contains the base files and folders of each framework.

You can use the method described in this article to create [Link] Core Single Page
Applications that:

Put the client app in a separate project, outside from the [Link] Core project
Create the client project based on the framework CLI installed on your computer

７ Note

This article describes the project creation process using the updated template in Visual
Studio 2022 version 17.8.

Prerequisites
Make sure to install the following:

Visual Studio 2022 version 17.8 or later with the [Link] and web development
workload installed. Go to the Visual Studio downloads page to install it for free. If you
need to install the workload and already have Visual Studio, go to Tools > Get Tools and
Features..., which opens the Visual Studio Installer. Choose the [Link] and web
development workload, then choose Modify.
npm ([Link] ), which is included with [Link]
Angular CLI ([Link] ), which can be the version of your choice. The
front-end project is created using the framework CLI tools you have installed on your
local machine, so this determines the Angular version used in the template.

Create the app

1. In the Start window (choose File > Start Window to open), select Create a new project.
2. Search for Angular in the search bar at the top and then select Angular and [Link]
Core.
3. Name the project AngularWithASP and then select Next.

In the Additional Information dialog, make sure that Configure for HTTPS is enabled. In
most scenarios, leave the other settings at the default values.

4. Select Create.

Solution Explorer shows the following:

Compared to the standalone Angular template, you see some new and modified files for
integration with [Link] Core:

[Link]
[Link]
[Link](modified)
[Link](modified)
[Link]
[Link]

For more information on some of these project files, see Next steps.
Set the project properties
1. In Solution Explorer, right-click the [Link] project and choose
Properties.

2. In the Properties page, open the Debug tab and select Open debug launch profiles UI
option. Uncheck the Launch Browser option for the https profile or the profile named
after the [Link] Core project, if present.
 This value prevents opening the web page with the source weather data.

７ Note

In Visual Studio, [Link] stores the startup settings associated with the Start
button in the Debug toolbar. [Link] must be located under the .vscode folder.

3. Right-click the solution in Solution Explorer and select Properties. Verify that the Startup
project settings are set to Multiple projects, and that the Action for both projects is set to
Start.

Start the project

Press F5 or select the Start button at the top of the window to start the app. Two command
prompts appear:

The [Link] Core API project running

The Angular CLI running the ng start command

７ Note

Check console output for messages. For example there might be a message to update
[Link].
The Angular app appears and is populated via the API (the localhost port may vary from the
screenshot).

If you don't see the weather forecast data in the browser, see Troubleshooting.

Publish the project

Starting in Visual Studio 2022 version 17.3, you can publish the integrated solution using the
Visual Studio Publish tool.

７ Note

To use publish, create your JavaScript project using Visual Studio 2022 version 17.3 or
later.

1. In Solution Explorer, right-click the [Link] project and select Add >
Project Reference.

Make sure the [Link] project is selected.

2. Choose OK.

3. Right-click the [Link] Core project again and select Edit Project File.

This opens the .csproj file for the project.

4. In the .csproj file, make sure the project reference includes a <ReferenceOutputAssembly>
element with the value set to false .

This reference should look like the following:

 XML

<ProjectReference
Include="..\[Link]\[Link]">
<ReferenceOutputAssembly>false</ReferenceOutputAssembly>
</ProjectReference>

5. Right-click the [Link] Core project and choose Reload Project if that option is available.

6. In [Link], make sure the following code is present.

C#

[Link]();
[Link]();

// Configure the HTTP request pipeline.

if ([Link]())
{
[Link]();
[Link]();
}

7. To publish, right click the [Link] Core project, choose Publish, and select options to
match your desired publish scenario, such as Azure, publish to a folder, etc.

The publish process takes more time than it does for just an [Link] Core project, since
the npm run build command gets invoked when publishing. The BuildCommand runs npm
run build by default.

If you publish to a folder, see [Link] Core directory structure for more information on
the files added to the publish folder.

Troubleshooting

Proxy error
You may see the following error:

Windows Command Prompt

[HPM] Error occurred while trying to proxy request /weatherforecast from

localhost:4200 to [Link] (ECONNREFUSED)
([Link]
If you see this issue, most likely the frontend started before the backend.

Once you see the backend command prompt up and running, just refresh the Angular
app in the browser.
Also, verify that the backend is configured to start before the front end. To verify, select
the solution in Solution Explorer, choose Properties from the Project menu. Next, select
Configure Startup Projects and make sure that the backend [Link] Core project is first
in the list. If it's not first, select the project and use the Up arrow button to make it the
first project in the launch list.

Verify port
If the weather data doesn't load correctly, you may also need to verify that your ports are
correct.

1. Go to the [Link] file in your [Link] Core project (in the Properties folder).
Get the port number from the applicationUrl property.

If there are multiple applicationUrl properties, look for one using an https endpoint. It
should look similar to [Link] .

2. Then, go to the [Link] file for your Angular project (look in the src folder). Update
the target property to match the applicationUrl property in [Link]. When
you update it, that value should look similar to this:

JavaScript

target: '[Link]

Docker
If you create the project with Docker support enabled, take the following steps:

1. After the app loads, get the Docker HTTPS port using the Containers window in Visual
Studio. Check the Environment or Ports tab.
 2. Open the [Link] file for the Angular project. Update the target variable to match
the HTTPS port in the Containers window. For example, in the following code:

JavaScript

const target = env.ASPNETCORE_HTTPS_PORT ?

`[Link] :
env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] :
'[Link]

Change [Link] to the matching HTTPS port (in this example,

[Link] ).

７ Note

If the HTTPS port is missing in the Containers window, you can use
[Link] file to add the port. In the section Container (Dockerfile) and
after the entry "useSSL": true , add "sslPort": <any port> . In this example, use the
following: "sslPort": 62958 .

3. Restart the app.

Next steps
For more information about SPA applications in [Link] Core, see the Angular section under
Developing Single Page Apps. The linked article provides additional context for project files
such as [Link] and [Link], although details of the implementation are
different due to project template differences. For example, instead of a ClientApp folder, the
Angular files are contained in a separate project.

For MSBuild information specific to the client project, see MSBuild properties for JSPS.
Tutorial: Create an [Link] Core app with
Vue in Visual Studio
Article • 04/09/2025

In this article, you learn how to build an [Link] Core project to act as an API backend and a
Vue project to act as the UI.

Visual Studio includes [Link] Core Single Page Application (SPA) templates that support
Angular, React, and Vue. The templates provide a built-in Client App folder in your [Link]
Core projects that contains the base files and folders of each framework.

You can use the method described in this article to create [Link] Core Single Page
Applications that:

Put the client app in a separate project, outside from the [Link] Core project
Create the client project based on the framework CLI installed on your computer

７ Note

This article describes the project creation process using the updated template in Visual
Studio 2022 version 17.11, which uses the Vite CLI. Vite determines the version of Vue
using project dependencies, such as those configured in [Link].

Prerequisites
Make sure to install the following:

Visual Studio 2022 version 17.11 or later with the [Link] and web development
workload installed. Go to the Visual Studio downloads page to install it for free. If you
need to install the workload and already have Visual Studio, go to Tools > Get Tools and
Features..., which opens the Visual Studio Installer. Choose the [Link] and web
development workload, then choose Modify.
npm ([Link] ), which is included with [Link].

Create the app

1. In the Start window (choose File > Start Window to open), select Create a new project.
2. Search for Vue in the search bar at the top and then select Vue and [Link] Core with
either JavaScript or TypeScript as the selected language.
 3. Name the project VueWithASP and then select Next.

In the Additional Information dialog, make sure that Configure for HTTPS is enabled. In
most scenarios, leave the other settings at the default values.

4. Select Create.

Solution Explorer shows the following project information:

Compared to the standalone Vue template, you see some new and modified files for
integration with [Link] Core:

[Link] (modified)
[Link] (modified)
[Link] (modified)

Set the project properties

1. In Solution Explorer, right-click the [Link] and choose Properties.
2. In the Properties page, open the Debug tab and select Open debug launch profiles UI
option. Uncheck the Launch Browser option for the https profile or the profile named
after the [Link] Core project, if present.
 This value prevents opening the web page with the source weather data.

７ Note

In Visual Studio, [Link] stores the startup settings associated with the Start
button in the Debug toolbar. Currently, [Link] must be located under the
.vscode folder.

3. Right-click the solution in Solution Explorer and select Properties. Verify that the Startup
project settings are set to Multiple projects, and that the Action for both projects is set to
Start.

Start the project

Press F5 or select the Start button at the top of the window to start the app. Two command
prompts appear:

The [Link] Core API project running

The Vite CLI showing a message such as VITE v4.4.9 ready in 780 ms

７ Note

Check console output for messages. For example there might be a message to update
[Link].

The Vue app appears and is populated via the API (the localhost port may vary from the
screenshot).
If you don't see the weather forecast data in the browser, see Troubleshooting.

Publish the project

Starting in Visual Studio 2022 version 17.3, you can publish the integrated solution using the
Visual Studio Publish tool.

７ Note

To use publish, create your JavaScript project using Visual Studio 2022 version 17.3 or
later.

1. In Solution Explorer, right-click the [Link] project and select Add > Project
Reference.

Make sure the [Link] project is selected.

2. Choose OK.

3. Right-click the [Link] Core project again and select Edit Project File.

This opens the .csproj file for the project.

4. In the .csproj file, make sure the project reference includes a <ReferenceOutputAssembly>
element with the value set to false .

This reference should look like the following.

XML

<ProjectReference Include="..\[Link]\[Link]">
<ReferenceOutputAssembly>false</ReferenceOutputAssembly>
</ProjectReference>

5. Right-click the [Link] Core project and choose Reload Project if that option is available.

6. In [Link], make sure the following code is present.

C#

[Link]();
[Link]();

// Configure the HTTP request pipeline.

if ([Link]())
 {
[Link]();
[Link]();
}

7. To publish, right click the [Link] Core project, choose Publish, and select options to
match your desired publish scenario, such as Azure, publish to a folder, etc.

The publish process takes more time than it does for just an [Link] Core project, since
the npm run build command gets invoked when publishing. The BuildCommand runs npm
run build by default.

If you publish to a folder, see [Link] Core directory structure for more information on
the files added to the publish folder.

Troubleshooting

Proxy error
You may see the following error:

[HPM] Error occurred while trying to proxy request /weatherforecast from

localhost:4200 to [Link] (ECONNREFUSED)
([Link]

If you see this issue, most likely the frontend started before the backend.

Once you see the backend command prompt up and running, just refresh the Vue app in
the browser.
Also, verify that the backend is configured to start before the front end. To verify, select
the solution in Solution Explorer, choose Properties from the Project menu. Next, select
Configure Startup Projects and make sure that the backend [Link] Core project is first
in the list. If it's not first, select the project and use the Up arrow button to make it the
first project in the launch list.

Otherwise, if the port is in use, try incrementing the port number by 1 in [Link]
and [Link].

Privacy error
You may see the following certificate error:
 Your connection isn't private

Try deleting the Vue certificates from %appdata%\local\[Link]\https or

%appdata%\roaming\[Link]\https, and then retry.

Verify ports
If the weather data doesn't load correctly, you may also need to verify that your ports are
correct.

1. Make sure that the port numbers match. Go to the [Link] file in your
[Link] Core project (in the Properties folder). Get the port number from the
applicationUrl property.

If there are multiple applicationUrl properties, look for one using an https endpoint. It
should look similar to [Link] .

2. Then, go to the [Link] file for your Vue project. Update the target property to
match the applicationUrl property in [Link]. When you update it, that value
should look similar to this:

JavaScript

target: '[Link]

Outdated version of Vue

If you see the console message Could not find the file
'C:\Users\Me\source\repos\vueprojectname\[Link]' when you create the project, you
may need to update your version of the Vite CLI. After you update the Vite CLI, you may also
need to delete the .vuerc file in C:\Users\[yourprofilename].

Docker
If you create the project with Docker support enabled, take the following steps:

1. After the app loads, get the Docker HTTPS port using the Containers window in Visual
Studio. Check the Environment or Ports tab.
 2. Open the [Link] file for the Vue project. Update the target variable to match
the HTTPS port in the Containers window. For example, in the following code:

JavaScript

const target = env.ASPNETCORE_HTTPS_PORT ?

`[Link] :
env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] :
'[Link]

change [Link] to the matching HTTPS port (in this example,

[Link] ).

７ Note

If the HTTPS port is missing in the Containers window, you can use
[Link] file to add the port. In the section Container (Dockerfile) and
after the entry "useSSL": true , add "sslPort": <any port> . In this example, use the
following: "sslPort": 60833

3. Restart the app.

If you are using a Docker configuration created in older versions of Visual Studio, the backend
may start up using the Docker profile and not listen on the configured port 5173. To resolve:

Edit the Docker profile in the [Link] by adding the following properties:

JSON

"httpPort": 5175,
"sslPort": 5173

Next steps
For more information about SPA applications in [Link] Core, see Developing Single Page
Apps. The linked article provides additional context for project files such as [Link],
although details of the implementation are different due to differences between the project
templates and the [Link] framework vs. other frameworks. For example, instead of a ClientApp
folder, the Vue files are contained in a separate project.

For MSBuild information specific to the client project, see MSBuild properties for JSPS.
Tutorial: Add TypeScript to an existing
[Link] Core app in Visual Studio
Article • 05/14/2025

In this tutorial for Visual Studio development using [Link] Core and TypeScript, you create a
simple web application, add some TypeScript code, and then run the app.

In Visual Studio 2022 and later, if you want to use Angular or Vue with [Link] Core, it's
recommended that you use the [Link] Core Single Page Application (SPA) templates to
create an [Link] Core app with TypeScript. For more information, see the Visual Studio
tutorials for Angular or Vue.

In this tutorial, you learn how to:

＂ Create an [Link] Core project

＂ Add the NuGet package for TypeScript support
＂ Add some TypeScript code
＂ Run the app
＂ Add a third-party library using npm

Prerequisites
You must have Visual Studio installed and the [Link] web development workload.

If you haven't already installed Visual Studio, go to the Visual Studio downloads page
to install it for free.

If you need to install the workload but already have Visual Studio, go to Tools > Get Tools
and Features... to open the Visual Studio Installer. Choose the [Link] and web
development workload, then select Modify.

Create a new [Link] Core MVC project

Visual Studio manages files for a single application in a project. The project includes source
code, resources, and configuration files.

７ Note

To start with an empty [Link] Core project and add a TypeScript frontend, see [Link]
Core with TypeScript instead.
In this tutorial, you begin with a simple project containing code for an [Link] Core MVC app.

1. Open Visual Studio. If the start window isn't open, choose File > Start Window.

2. On the start window, choose Create a new project.

3. On the Create a new project window, enter web app in the search box. Next, choose C#
as the language.

After you apply the language filter, choose [Link] Core Web App (Model-View-
Controller), and then select Next.

７ Note

If you don't see the [Link] Core Web Application project template, you must add
the [Link] and web development workload. For detailed instructions, see the
Prerequisites.

4. In the Configure your new project window, enter a name for your project in the Project
name box. Then, select Next.

5. In the Additional information window, ensure .NET 8.0 is selected in the Framework
dropdown menu, and then select Create.

Visual Studio opens your new project.

Add some code

1. In Solution Explorer (right pane), right-click the project node and select Manage NuGet
Packages for Solutions.

2. In the Browse tab, search for [Link].

3. Select Install to install the package.

 Visual Studio adds the NuGet package under the Dependencies node in Solution
Explorer.

4. Right-click the project node and select Add > New Item. Choose the TypeScript JSON
Configuration File, and then select Add.

If you don't see all the item templates, select Show All Templates, and then choose the
item template.

Visual Studio adds the [Link] file to the project root. You can use this file to
configure options for the TypeScript compiler.

5. Open [Link] and replace the default code with the following code:

JSON

{
"compileOnSave": true,
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "ES6",
"outDir": "wwwroot/js"
},
"include": [
"scripts/**/*"
],
"exclude": [
"node_modules",
"wwwroot"
]
}
 The outDir option specifies the output folder for the plain JavaScript files that the
TypeScript compiler transpiles.

This configuration provides a basic introduction to using TypeScript. In other scenarios,

such as when using gulp or webpack , you might want a different intermediate location
for the transpiled JavaScript files instead of wwwroot/js. The location depends on your
tools and configuration preferences.

6. In Solution Explorer, right-click the project node and select Add > New Folder. Use the
name scripts for the new folder.

7. Right-click the scripts folder and select Add > New Item. Choose the TypeScript File, type
the name [Link] for the filename, and then select Add.

If you don't see all the item templates, select Show All Templates, and then choose the
item template.

Visual Studio adds [Link] to the scripts folder.

8. Open [Link] and add the following TypeScript code.

ts

function TSButton() {
let name: string = "Fred";
[Link]("ts-example").innerHTML = greeter(user);
}

class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public
lastName: string) {
[Link] = firstName + " " + middleInitial + " " + lastName;
}
}

interface Person {
firstName: string;
lastName: string;
}

function greeter(person: Person) {

return "Hello, " + [Link] + " " + [Link];
}

let user = new Student("Fred", "M.", "Smith");

Visual Studio provides IntelliSense support for your TypeScript code.

 To try this feature, remove .lastName from the greeter function, reenter the period (.),
and notice the IntelliSense updates.

Select lastName to add the last name back to the code.

9. Open the Views/Home folder, and then open [Link].

10. Add the following HTML code to the end of the file.

HTML

<div id="ts-example">
<br />
<button type="button" class="btn btn-primary btn-md"
onclick="TSButton()">
Click Me
</button>
</div>

11. Open the Views/Shared folder, and then open _Layout.cshtml.

12. Add the following script reference before the call to @await
RenderSectionAsync("Scripts", required: false) :

JavaScript

<script src="~/js/[Link]"></script>

13. Select File > Save All (Ctrl + Shift + S) to save your changes.

Build the application

1. Select Build > Build Solution.

Although the app builds automatically when you run it, we want to take a look at
something that happens during the build process.

2. Open the wwwroot/js folder to see two new files: [Link] and the source map file,
[Link]. The TypeScript compiler generates these files.
 Source map files are required for debugging.

Run the application

1. Press F5 (Debug > Start Debugging) to run the application.

The app opens in a browser.

In the browser window, you see the Welcome heading and the Click Me button.

2. Select the button to display the message we specified in the TypeScript file.

Debug the application

1. Set a breakpoint in the greeter function in [Link] by clicking in the left margin in the
code editor.

2. Press F5 to run the application.

You might need to respond to a message to enable script debugging.

 ７ Note

Chrome or Edge is required for client-side script debugging.

3. When the page loads, press Click Me.

The application pauses at the breakpoint. Now, you can inspect variables and use
debugger features.

Add TypeScript support for a third-party library

1. Follow the instructions in npm package management to add a [Link] file to your
project. This task adds npm support to your project.

７ Note

For [Link] Core projects, you can also use Library Manager or yarn instead of npm
to install client-side JavaScript and CSS files.

2. In this example, add a TypeScript definition file for jQuery to your project. Include the
following code in your [Link] file.

JSON

"devDependencies": {
"@types/jquery": "3.5.1"
}

This code adds TypeScript support for jQuery. The jQuery library itself is already included
in the MVC project template (look under wwwroot/lib in Solution Explorer). If you're using
a different template, you might need to include the jquery npm package as well.

3. If the package in Solution Explorer isn't installed, right-click the npm node and choose
Restore Packages.

７ Note

In some scenarios, Solution Explorer might indicate that an npm package is out of
sync with [Link] due to a known issue described here . For example, the
package might appear as not installed when it is installed. In most cases, you can
 update Solution Explorer by deleting [Link], restarting Visual Studio, and re-
adding the [Link] file as described earlier in this article.

4. In Solution Explorer, right-click the scripts folder and choose Add > New Item.

If you don't see all the item templates, choose Show All Templates, and then choose the
item template.

5. Choose TypeScript File, type [Link], and choose Add.

6. In [Link], add the following code.

ts

var jqtest = {
showMsg: function (): void {
let v: any = [Link]();
let content: any = $("#ts-example-2")[0].innerHTML;
alert([Link]() + " " + v + "!!");
$("#ts-example-2")[0].innerHTML = content + " " + v + "!!";
}
};

[Link]();

For simplicity, this code displays a message using jQuery and an alert.

With TypeScript type definitions for jQuery added, you get IntelliSense support on jQuery
objects when you enter a period (.) following a jQuery object, as shown here.

7. In _Layout.cshtml, update the script references to include [Link] .

 HTML

<script src="~/js/[Link]"></script>
<script src="~/js/[Link]"></script>

8. In [Link], add the following HTML to the end of the file.

HTML

<div>
<p id="ts-example-2">jQuery version is:</p>
</div>

9. Press F5 (Debug > Start Debugging) to run the application.

The app opens in the browser.

Select OK in the alert to see the page updated to jQuery version is: 3.3.1!!.

Next steps
You might want to learn more details about using TypeScript with [Link] Core. If you're
interested in Angular programming in Visual Studio, you can use the Angular language service
extension for Visual Studio.

[Link] Core and TypeScript

Angular language service extension

Migrate [Link] projects in Visual
Studio
Article • 01/12/2024

Starting in Visual Studio 2022 version 17.7 Preview 1, you can convert existing projects
based on the older [Link] project system (.njsproj) to the new JavaScript project system
(.esproj). By migrating the project, you can benefit from project system updates such as
npm dependency management, unit testing support, and launch config settings.

To migrate from a [Link] project to a JavaScript project:

Right-click the project node for your [Link] project. You should see one of two options:
Convert to New JavaScript Project Experience or Convert to New TypeScript Project
Experience. Select the available option to migrate your project to the new project
system.

After you choose Convert, a conversion log text file gets created and then it opens. The
log file details the steps that occurred during the migration.
If anything goes wrong during the migration, you can choose the Revert Project to Old
Experience option so that the conversion will be reverted. If you encounter any problem
during this process, please the Report a problem feature in Visual Studio.

Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community

Learn to use the code editor for JavaScript
Article • 05/05/2025

In this short introduction to the code editor in Visual Studio, we'll look at some of the ways that
Visual Studio makes writing, navigating, and understanding code easier.

 Tip

If you haven't already installed Visual Studio, go to the Visual Studio downloads page
to install it for free. For more information in getting the language service for TypeScript,
see TypeScript support.

This article assumes you're already familiar with JavaScript development. If you aren't, we
suggest you look at a tutorial such as Create a [Link] and Express app first.

Add a new project file

You can use the IDE to add new files to your project.

1. With your project open in Visual Studio, right-click on a folder or your project node in
Solution Explorer (right pane), and choose Add > New Item.

If you don't see all the item templates, choose Show All Templates, and then choose the
item template.

2. In the New File dialog box, under the General category, choose the file type that you
want to add, such as JavaScript File, and then choose Open.

The new file gets added to your project and it opens in the editor.

Use IntelliSense to complete words

IntelliSense is an invaluable resource when you're coding. It can show you information about
available members of a type, or parameter details for different overloads of a method. In the
following code, when you type Router() , you see the argument types that you can pass. This is
called signature help.
You can also use IntelliSense to complete a word after you type enough characters to
disambiguate it. If you put your cursor after the data string in the following code and type
get , IntelliSense will show you functions defined earlier in the code or defined in a third-party

library that you've added to your project.

IntelliSense can also show you information about types when you hover over programming
elements.

To provide IntelliSense information, the language service can use TypeScript [Link] files and JSDoc
comments. For most common JavaScript libraries, [Link] files are automatically acquired. For
more details about how IntelliSense information is acquired, see JavaScript IntelliSense.

Check syntax
The language service uses ESLint to provide syntax checking and linting. If you need to set
options for syntax checking in the editor, select Tools > Options > JavaScript/TypeScript >
Linting. The linting options point you to the global ESLint configuration file.

In the following code, you see green syntax highlighting (green squiggles) on the expression.
Hover over the syntax highlighting.
The last line of this message tells you that the language service expected a comma ( , ). The
green squiggle indicates a warning. Red squiggles indicate an error.

In the lower pane, you can click the Error List tab to see the warning and description along
with the filename and line number.

You can fix this code by adding the comma ( , ) before "data" .

For additional information on linting, see Linting .

Comment out code

The toolbar, which is the row of buttons under the menu bar in Visual Studio, can help make
you more productive as you code. For example, you can toggle IntelliSense completion mode
(IntelliSense is a coding aid that displays a list of matching methods, amongst other things),
increase or decrease a line indent, or comment out code that you don't want to compile. In this
section, we'll comment out some code.

Select one or more lines of code in the editor and then choose the Comment out the selected
lines button on the toolbar. If you prefer to use the keyboard, press Ctrl+K, Ctrl+C.

The JavaScript comment characters // are added to the beginning of each selected line to
comment out the code.
Collapse code blocks
If you need to unclutter your view of some regions of code, you can collapse it. Choose the
small gray box with the minus sign inside it in the margin of the first line of a function. Or, if
you're a keyboard user, place the cursor anywhere in the constructor code and press Ctrl+M,
Ctrl+M.

The code block collapses to just the first line, followed by an ellipsis ( ... ). To expand the code
block again, click the same gray box that now has a plus sign in it, or press Ctrl+M, Ctrl+M
again. This feature is called Outlining and is especially useful when you're collapsing long
functions or entire classes.

View definitions
The Visual Studio editor makes it easy to inspect the definition of a type, function, etc. One way
is to navigate to the file that contains the definition, for example by choosing Go to Definition
anywhere the programming element is referenced. An even quicker way that doesn't move
your focus away from the file you're working in is to use Peek Definition. Let's peek at the
definition of the render method in the example below.

Right-click on render and choose Peek Definition from the content menu. Or, press Alt+F12.

A pop-up window appears with the definition of the render method. You can scroll within the
pop-up window, or even peek at the definition of another type from the peeked code.
Close the peeked definition window by choosing the small box with an "x" at the top right of
the pop-up window.

View inlay hints

Starting in Visual Studio 2022 version 17.12, inlay hints show additional information about
source code that is rendered inline. This is usually used to show inferred types, parameter
names, and other implicit information from your code directly in your editor.

To configure inlay hints:

1. Go to Tools > Options > Text Editor > All Languages > Inlay Hints, and select an option
for viewing inlay hints.

2. Go to Tools > Options > Text Editor > JavaScript/TypeScript > Advanced > General and
configure the inlay hints you want to hide or show.

By default, most of these options are disabled.

Use code snippets

Visual Studio provides useful code snippets that you can use to quickly and easily generate
commonly used code blocks. Code snippets are available for different programming languages
including JavaScript. Let's add a for loop to your code file.

Place your cursor where you want to insert the snippet, right-click and choose Snippet > Insert
Snippet.
An Insert Snippet box appears in the editor. Choose General and then double-click the for
item in the list.

This adds the for loop snippet to your code:

JavaScript

for (var i = 0; i < length; i++) {

You can look at the available code snippets for your language by choosing Edit > IntelliSense
> Insert Snippet, and then choosing your language's folder.
Configure the text editor
You can configure other text editor options for JavaScript and TypeScript by choosing Tools >
Options > Text Editor > JavaScript/TypeScript.

Available options include properties to control formatting, code validation, and many other
aspects of the text editor.

Related content
Code snippets
Navigate code
Outlining
Go To Definition and Peek Definition
Refactoring
Use IntelliSense
JavaScript IntelliSense
Article • 05/05/2025

Visual Studio provides a powerful JavaScript editing experience right out of the box. Powered
by a TypeScript-based language service, Visual Studio delivers rich IntelliSense, support for
modern JavaScript features, and productivity features such as Go to Definition, refactoring, and
more.

For more information about the general IntelliSense functionality of Visual Studio, see Using
IntelliSense.

JavaScript IntelliSense displays information on parameter and member lists. This information is
provided by the TypeScript language service, which uses static analysis behind the scenes to
better understand your code.

TypeScript uses several sources to build up this information:

IntelliSense based on type inference

IntelliSense based on JSDoc
IntelliSense based on TypeScript declaration files
Automatic acquisition of type definitions

IntelliSense based on type inference

In JavaScript, most of the time there's no explicit type information available. Luckily, it's usually
easy to figure out a type given the surrounding code context. This process is called type
inference.

For a variable or property, the type is typically the type of the value used to initialize it or the
most recent value assignment.

JavaScript

var nextItem = 10;

nextItem; // here we know nextItem is a number

nextItem = "box";
nextItem; // now we know nextItem is a string

For a function, the return type can be inferred from the return statements.

For function parameters, there's currently no inference, but there are ways to work around this
using JSDoc or TypeScript .[Link] files (see later sections).
Additionally, there's special inference for the following:

"ES3-style" classes, specified using a constructor function and assignments to the

prototype property.
CommonJS-style module patterns, specified as property assignments on the exports
object, or assignments to the [Link] property.

JavaScript

function Foo(param1) {
[Link] = param1;
}
[Link] = function () { return [Link]; };
// Foo will appear as a class, and instances will have a 'prop' property and a
'getIt' method.

[Link] = Foo;
// This file will appear as an external module with a 'Foo' export.
// Note that assigning a value to "[Link]" is also supported.

IntelliSense based on JSDoc

Where type inference doesn't provide the desired type information (or to support
documentation), type information may be provided explicitly via JSDoc annotations. For
example, to give a partially declared object a specific type, you can use the @type tag as shown
here:

JavaScript

/**
* @type {{a: boolean, b: boolean, c: number}}
*/
var x = {a: true};
x.b = false;
x. // <- "x" is shown as having properties a, b, and c of the types specified

As mentioned, function parameters are never inferred. However, using the JSDoc @param tag
you can add types to function parameters as well.

JavaScript

/**
* @param {string} param1 - The first argument to this function
*/
function Foo(param1) {
[Link] = param1; // "param1" (and thus "[Link]") are now of type
 "string".
}

See the JSDoc information in Type Checking JavaScript Files for the JSDoc annotations
currently supported.

IntelliSense based on TypeScript declaration files

Because JavaScript and TypeScript are based on the same language service, they're able to
interact in a rich way. For example, JavaScript IntelliSense can be provided for values declared
in a .[Link] file (see TypeScript documentation ), and types such as interfaces and classes
declared in TypeScript are available for use as types in JSDoc comments.

Below, we show a simple example of a TypeScript definition file providing such type
information (via an interface) to a JavaScript file in the same project (using a JSDoc tag).

Automatic acquisition of type definitions

In the TypeScript world, most popular JavaScript libraries have their APIs described by .[Link] files,
and the most common repository for such definitions is on DefinitelyTyped .

By default, the language service tries to detect which JavaScript libraries are in use, and then
automatically download and reference the corresponding .[Link] file that describes the library in
order to provide richer IntelliSense. The files are downloaded to a cache located under the user
folder at %LOCALAPPDATA%\Microsoft\TypeScript.

７ Note

This feature is disabled by default if you're using a [Link] configuration file, but may
be set to enabled as outlined further in this section.

Currently, auto-detection works for dependencies downloaded from npm (by reading the
[Link] file), Bower (by reading the [Link] file), and for loose files in your project that
match a list of roughly the top 400 most popular JavaScript libraries. For example, if you have
[Link] in your project, the file [Link] will be fetched and loaded in order to
provide a better editing experience. This .[Link] file will have no impact on your project.

Configure IntelliSense
You can use change the behavior of IntelliSense statement completion by selecting Tools >
Options > Text Editor > JavaScript/TypeScript > IntelliSense > General.

When you select Only use Tab or Enter to commit, the JavaScript code editor appends
statements with items selected in the completion list only after you choose the Tab or Enter
key. When you deselect this check box, other characters – such as a period, comma, colon,
open parenthesis, and open brace ({) – can also append statements with the selected items.

Related content
Using IntelliSense
Linting JavaScript in Visual Studio
Article • 05/02/2025

Linting JavaScript and TypeScript in Visual Studio is powered by ESLint . If you're new to
ESLint, you can begin by checking their documentation .

Enable linting support

To enable linting support in Visual Studio 2022 or later versions, enable the Enable ESLint
setting in Tools > Options > Text Editor > JavaScript/TypeScript > Linting.

In the options page, you can also modify the set of files that you want to lint. By default, all file
extensions that can be linted (.js, .jsx, .ts, .tsx, .vue, .html) will be linted. The HTML LSP-based
editor must be enabled for linting Vue and HTML files. The respective setting can be found in
Tools > Options > Environment > Preview Features > HTML LSP-based editor.

You can override these options in some project types, like the standalone React project
templates. In these projects, you can override the settings from the Tools > Options page
using project properties:
Install ESLint dependencies
Once linting is enabled, the necessary dependencies need to be installed. Dependencies
include the ESLint npm package and other plugins applicable to your project. This package
can be installed locally in each project where you want to enable linting, or you can install it
globally using npm install -g eslint . However, a global installation isn't recommended
because plugins and shareable configs always need to be installed locally.

Starting in Visual Studio 2022 version 17.7 Preview 2, you can also use the ESLint Path setting
in Tools > Options > Text Editor > JavaScript/TypeScript > Linting to specify a directory from
which to load ESLint. This setting is useful when ESLint is installed globally, where you might
set the corresponding path to C:\Program Files\nodejs\node_modules.

Depending on the files you want to lint, other ESLint plugins may be needed. For example,
you may need TypeScript ESLint , which enables ESLint to run on TypeScript code and
includes rules that are specific to the extra type information.

When ESLint is enabled but the ESLint npm package isn't found, a gold bar is displayed. This
message allows you to install ESLint as a local npm development dependency.
Similarly, when an .eslintrc file isn't found, a gold bar is displayed. This message allows you to
run a configuration wizard that installs the plugins applicable to the current project.

Disable linting rules and autofixes

You can disable linting errors on a specific line or file . You can disable the errors by using the
Quick Actions lightbulb menu:

The following illustration shows the result if you disable a linting error for the selected line of
code.

In addition, autofix code actions allow you to apply an autofix to address the respective linting
error.
Troubleshooting
You can open the ESLint Language Extension pane in the Output window to see any error
messages or other logs that might explain the problem.
Compile TypeScript code using npm
06/24/2025

Use the TypeScript npm package to add TypeScript support to projects based on the JavaScript
Project System (JSPS), or .esproj. Starting in Visual Studio 2019, it's recommended that you use
the npm package instead of the TypeScript SDK. The TypeScript npm package provides greater
portability across different platforms and environments.

） Important

For [Link] Core projects, use the NuGet package instead of npm to add TypeScript
support.

Add TypeScript support using npm

The TypeScript npm package adds TypeScript support. When the npm package for
TypeScript 2.1 or higher is installed into your project, the corresponding version of the
TypeScript language service gets loaded in the editor.

1. Check if you need to install any development workload for Visual Studio or the [Link]
runtime.

For projects created using the JavaScript Project System (JSPS), or .esproj, no additional
workloads are needed. You just need to install npm ([Link] ), which is
included with [Link].

2. If your project doesn't already include it, install the TypeScript npm package .

From Solution Explorer (right pane), open the [Link] in the project root. The
packages listed correspond to packages under the npm node in Solution Explorer. For
more information, see Manage npm packages.

Check the npm option in the Output window to see package installation progress. The
installed package shows up under the npm node in Solution Explorer.

3. If your project doesn't already include it, add a [Link] file to your project root. To
add the file, right-click the project node and choose Add > New Item. Choose the
TypeScript JSON Configuration File, and then click Add.

If you don't see all the item templates, choose Show All Templates, and then choose the
item template.
 Visual Studio adds the [Link] file to the project root. You can use this file to
configure options for the TypeScript compiler.

4. Open [Link] and update to set the compiler options that you want.

An example of a simple [Link] file follows.

JSON

{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"outDir": "dist"
},
"include": [
"scripts/**/*"
]
}

In this example:

include tells the compiler where to find TypeScript (*.ts) files.

outDir option specifies the output folder for the plain JavaScript files that are
transpiled by the TypeScript compiler.
sourceMap option indicates whether the compiler generates sourceMap files.

The previous configuration provides only a basic introduction to configuring TypeScript.

For information on other options, see [Link] .

Build the application

1. Add TypeScript (.ts) or TypeScript JSX (.tsx) files to your project, and then add TypeScript
code. A simple example of TypeScript follows:

TypeScript

let message: string = 'Hello World';

[Link](message);

2. In [Link], add support for Visual Studio build and clean commands using the
following scripts.
 JSON

"scripts": {
"build": "tsc --build",
"clean": "tsc --build --clean"
},

To build using a third-party tool like webpack, you can add a command-line build script
to your [Link] file:

JSON

"scripts": {
"build": "webpack-cli [Link] --config [Link]"
}

3. If you need to configure build and deployment options such as the app URL or runtime
commands, right-click the project node in Solution Explorer, and choose Properties.

７ Note

When configuring third-party tools, projects using the JavaScript Project System
(JSPS), or .esproj, don't use the paths that are configured under Tools > Options >
Projects and solutions > Web Package Management > External Web Tools. These
settings are used for other project types.

4. Choose Build > Build Solution.

The app builds automatically when you run it. However, the following might occur during
the build process:

If you generated source maps, open the folder specified in the outDir option and you find
the generated *.js file(s) along with the generated *[Link] file(s).

Source map files are required for debugging.

Run the application

For instructions to run the app after you compile it, see Create a [Link] and Express app.

Automate build tasks

You can use Task Runner Explorer in Visual Studio to help automate tasks for third-party tools
like npm and webpack.

NPM Task Runner - Adds support for npm scripts defined in [Link]. Supports
yarn.
Webpack Task Runner - Adds support for webpack.

Related content
Properties, React, Angular, Vue
Compile TypeScript code ([Link] Core)
Article • 05/15/2025

Use the TypeScript NuGet package to add TypeScript support to your [Link] Core projects.
Starting in Visual Studio 2019, it's recommended that you use the NuGet package instead of
the TypeScript SDK. The TypeScript NuGet package provides greater portability across different
platforms and environments.

For [Link] Core projects, one common usage for the NuGet package is to compile TypeScript
using the .NET Core CLI. In .NET scenarios, the NuGet package is the preferred option, and it's
the only way to enable TypeScript compilation using .NET Core CLI commands such as dotnet
build and dotnet publish . Also, for MSBuild integration with [Link] Core and TypeScript,
choose the NuGet package.

） Important

For projects based on the JavaScript Project System (JSPS), or .esproj projects, use the
npm package instead of NuGet to add TypeScript support.

Add TypeScript support with NuGet

The TypeScript NuGet package adds TypeScript support. When the NuGet package for
TypeScript 3.2 or higher is installed into your project, the corresponding version of the
TypeScript language service gets loaded in the editor.

If Visual Studio is installed, then the [Link] bundled with it will automatically be picked up
by Visual Studio. If you don't have [Link] installed, we recommend you install the LTS version
from the [Link] website.

1. Open your [Link] Core project in Visual Studio.

2. In Solution Explorer (right pane). right-click the project node and choose Manage NuGet
Packages. In the Browse tab, search for [Link], and then click
Install to install the package.
 Visual Studio adds the NuGet package under the Dependencies node in Solution
Explorer. The following package reference gets added to your *.csproj file.

XML

<PackageReference Include="[Link]" Version="5.8.3">

<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers;
buildtransitive</IncludeAssets>
</PackageReference>

3. Right-click the project node and choose Add > New Item. Choose the TypeScript JSON
Configuration File, and then click Add.

If you don't see all the item templates, choose Show All Templates, and then choose the
item template.

Visual Studio adds the [Link] file to the project root. You can use this file to
configure options for the TypeScript compiler.

4. Open [Link] and update to set the compiler options that you want.

Use the following example, which shows a simple [Link] file.

JSON

{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"outDir": "wwwroot/js"
 },
"include": [
"scripts/**/*"
]
}

In this example:

include tells the compiler where to find TypeScript (*.ts) files.

outDir option specifies the output folder for the plain JavaScript files transpiled by
the TypeScript compiler.
sourceMap option indicates whether the compiler generates sourceMap files.

The previous configuration provides only a basic introduction to configuring TypeScript.

For information on other options, see [Link] .

Build the application

1. Add TypeScript (.ts) or TypeScript JSX (.tsx) files to your project, and then add TypeScript
code. For a simple example of TypeScript, use the following code:

TypeScript

let message: string = 'Hello World';

[Link](message);

2. If you're using an older non-SDK style project, follow instructions in Remove default
imports before building.

3. Choose Build > Build Solution.

Although the app builds automatically when you run it, we want to take a look at
something that happens during the build process:

If you generated source maps, open the folder specified in the outDir option and you find
the generated *.js file(s) along with the generated *[Link] file(s).

Source map files are required for debugging.

4. If you want to compile every time you save the project, use the compileOnSave option in
[Link].

JSON

{
"compileOnSave": true,
 "compilerOptions": {
}
}

For an example of using gulp with the Task Runner to build your app, see [Link] Core and
TypeScript .

If you run into issues where Visual Studio is using a version of [Link] or a third-party tool that
is different than what the version you expected, you may need to set the path for Visual Studio
to use. Choose Tools > Options. Under Projects and solutions, choose Web Package
Management > External Web Tools.

Run the application

Press F5 or select the Start button at the top of the window.

NuGet package structure details

[Link] contains two main folders:

build folder

Two files are located in this folder. Both are entry points - for the main TypeScript target
file and props file respectively.

1. [Link]

This file sets variables that specify the run-time platform, such as a path to
[Link], before importing [Link] from the tools
folder.

2. [Link]

This file imports [Link] from the tools folder and sets
properties indicating that the build has been initiated through NuGet.

tools folder

Package versions prior to 2.3 only contain a tsc folder. [Link] and
[Link] are located at the root level.

In package versions 2.3 and later, the root level contains [Link]
and [Link] . For more details on these files, see MSBuild
Configuration .
 Additionally, the folder contains three subfolders:

1. net45

This folder contains [Link] and other DLLs on which it depends.

When building a project on a Windows platform, MSBuild uses the DLLs from this
folder.

2. netstandard1.3

This folder contains another version of [Link] , which is used when

building projects on a non-Windows machine.

3. tsc

This folder contains [Link] , [Link] and all dependency files required to run
them as node scripts.

７ Note

If Visual Studio is installed, then the NuGet package automatically picks up the
version of [Link] bundled with Visual Studio. Otherwise, [Link] must be
installed on the machine.

Versions prior to 3.1 contained a [Link] executable to run the compilation. In

version 3.1, the executable was removed in favor of using [Link] .

Remove default imports

In older [Link] Core projects that use the non-SDK-style format, you may need to remove
some project file elements.

If you're using the NuGet package for MSBuild support for a project, the project file must not
import [Link] or [Link] . The files get
imported by the NuGet package, so including them separately may cause unintended behavior.

1. Right-click the project and choose Unload Project.

2. Right-click the project and choose Edit <project file name>.

The project file opens.

3. Remove references to [Link] and

[Link] .
The imports to remove look similar to the following XML:

XML

<Import

Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVer
sion)\TypeScript\[Link]"

Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(Visua
lStudioVersion)\TypeScript\[Link]')" />

<Import

Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVer
sion)\TypeScript\[Link]"

Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(Visua
lStudioVersion)\TypeScript\[Link]')" />
Manage npm packages in Visual Studio
Article • 02/11/2025

npm allows you to install and manage packages for use in both [Link] and [Link]
Core applications. Visual Studio makes it easy to interact with npm and issue npm
commands through the UI or directly. If you're unfamiliar with npm and want to learn
more, go to the npm documentation .

Visual Studio integration with npm is different depending on your project type.

CLI-based projects (.esproj)

[Link] Core
Open folder ([Link])

） Important

npm expects the node_modules folder and [Link] in the project root. If your
app's folder structure is different, you should modify your folder structure if you
want to manage npm packages using Visual Studio.

CLI-based project (.esproj)

Starting in Visual Studio 2022, the npm package manager is available for CLI-based
projects, so you can now download npm modules similarly to the way you download
NuGet packages for [Link] Core projects. Then you can use [Link] to modify
and delete packages.

To open the package manager, from Solution Explorer, right-click the npm node in your
project and choose Add npm package.
Next, you can search for npm packages, select one, and install by selecting Install
Package.
[Link] Core projects
For projects such as [Link] Core projects, you can add npm support in your project
and use npm to install packages.

７ Note

For [Link] Core projects, you can also use Library Manager or yarn instead of
npm to install client-side JavaScript and CSS files. One of these options might be
necessary if you require integration with MSBuild or the dotnet CLI for package
management, which is not provided by npm.

If your project does not already include a [Link] file, you can add one to enable
npm support by adding a [Link] file to the project.

1. To add the [Link] file, right-click the project in Solution Explorer and choose
Add > New Item (or press Ctrl + SHIFT + A). Use the search box to find the npm
file, choose the npm Configuration File, use the default name, and click Add.

2. Include one or more npm packages in the dependencies or devDependencies

section of [Link]. For example, you might add the following to the file:

JSON

"devDependencies": {
"gulp": "4.0.2",
"@types/jquery": "3.5.29"
}

When you save the file, Visual Studio adds the package under the Dependencies /
npm node in Solution Explorer. If you don't see the node, right-click [Link]
and choose Restore Packages. To view package installation status, select npm
output in the Output window.

７ Note

The npm node is available for most [Link] Core project types, including
Blazor. For MAUI Blazor projects, you must use the npm command line
because no npm node will be present in Solution Explorer.

You can configure npm packages using [Link] . Either open [Link]
directly, or right-click the npm node in Solution Explorer and choose Open
 [Link].

Troubleshooting npm packages

If you see any errors when building your app or transpiling TypeScript code, check
for npm package incompatibilities as a potential source of errors. To help identify
errors, check the npm Output window when installing the packages, as described
previously in this article. For example, if one or more npm package versions has
been deprecated and results in an error, you might need to install a more recent
version to fix errors. For information on using [Link] to control npm package
versions, see [Link] configuration.

In some [Link] Core scenarios, Solution Explorer might not show the correct
status for installed npm packages due to a known issue described here . For
example, the package might appear as not installed when it is installed. In most
cases, you can update Solution Explorer by deleting [Link], restarting Visual
Studio, and re-adding the [Link] file as described earlier in this article. Or,
when installing packages, you can use the npm Output window to verify
installation status.

In some [Link] Core scenarios, the npm node in Solution Explorer might not be
visible after you build the project. To make the node visible again, right-click the
project node and choose Unload Project. Then right-click the project node and
choose Reload Project.

Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community

Develop JavaScript and TypeScript code
in Visual Studio without solutions or
projects
Article • 01/12/2024

Starting in Visual Studio 2017, you can develop code without projects or solutions,
which enables you to open a folder of code and immediately start working with rich
editor support such as IntelliSense, search, refactoring, debugging, and more. In
addition to these features, the [Link] Tools for Visual Studio adds support for building
TypeScript files, managing npm packages, and running npm scripts.

To get started, select File > Open > Folder from the toolbar. Solution Explorer displays
all the files in the folder, and you can open any of the files to begin editing. In the
background, Visual Studio indexes the files to enable npm, build, and debug features.

 Tip

Before using an Open Folder project, try creating a solution from existing [Link]
code. In some scenarios, this method provides better feature support in Visual
Studio. To create the project, choose File > New Project > JavaScript > From
Existing [Link] code, and then choose your project folder as the source.

Prerequisites
Visual Studio 2017 version 15.8 or later versions
Visual Studio [Link] development workload must be installed

npm integration
If the folder you open contains a [Link] file, you can right-click [Link] to
show a context menu (shortcut menu) specific to npm.
In the shortcut menu, you can manage the packages installed by npm in the same way
that you manage npm packages when using a project file.

In addition, the menu also allows you to run scripts defined in the scripts element in
[Link]. These scripts will use the version of [Link] available on the PATH
environment variable. The scripts run in a new window. This is a great way to execute
build or run scripts.

Build and debug

[Link]
If the [Link] in the folder specifies a main element, the Debug command will be
available in the right-click shortcut menu for [Link]. Clicking this will start
[Link] with the specified script as its argument.

JavaScript files
You can debug JavaScript files by right-clicking a file and selecting Debug from the
shortcut menu. This starts [Link] with that JavaScript file as its argument.

７ Note
 If you don't see the Debug menu option, you may need to create the project from
existing [Link] code, as described previously.

TypeScript files and [Link]

If there is no [Link] present in the folder, you can right-click a TypeScript file to
see shortcut menu commands to build and debug that file. When you use these
commands, you build or debug using [Link] with default options. (You need to build the
file before you can debug.)

７ Note

When building TypeScript code, we use the newest version installed in C:\Program
Files (x86)\Microsoft SDKs\TypeScript .

If there is a [Link] file present in the folder, you can right-click a TypeScript file to
see a menu command to debug that TypeScript file. The option appears only if there is
no outFile specified in [Link]. If an outFile is specified, you can debug that file
by right-clicking [Link] and selecting the correct option. The [Link] file
also gives you a build option to allow you to specify compiler options.

７ Note

You can find more information about [Link] in the [Link] TypeScript
Handbook page .

Unit Tests
You can enable the unit test integration in Visual Studio by specifying a test root in your
[Link]:

JSON

{
// ...
"vsTest":{
"testRoot": "./tests"
}
// ...
}
The test runner enumerates the locally installed packages to determine which test
framework to use. If none of the supported frameworks are recognized, the test runner
defaults to ExportRunner. The other supported frameworks are:

Mocha ([Link] )
Jasmine ([Link] )
Tape ([Link]/substack/tape )
Jest ([Link] )

After opening Test Explorer (choose Test > Windows > Test Explorer), Visual Studio
discovers and displays tests.

７ Note

The test runner will only enumerate the JavaScript files in the test root, if your
application is written in TypeScript you need to build those first.

Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community

Debug a JavaScript or TypeScript app in
Visual Studio
07/30/2025

You can debug JavaScript and TypeScript code using Visual Studio. You can hit breakpoints,
attach the debugger, inspect variables, view the call stack, and use other debugging features.

 Tip

If you haven't already installed Visual Studio, go to the Visual Studio downloads page
to install it for free.

Configure debugging
For .esproj projects in Visual Studio 2022, Visual Studio Code uses a [Link] file to configure
and customize the debugger. [Link] is a debugger configuration file.

Visual Studio attaches the debugger only to user code. For .esproj projects, you can configure
user code (also called Just My Code settings) in Visual Studio using the skipFiles setting in
[Link]. This works the same as the [Link] settings in VS Code. For more information
about skipFiles and other debugger configuration options, see Skipping Uninteresting Code
and Launch configuration attributes .

Debug server-side script

1. With your project open in Visual Studio, open a server-side JavaScript file (such as
[Link]), click in the gutter to set a breakpoint:

Breakpoints are the most basic and essential feature of reliable debugging. A breakpoint
indicates where Visual Studio should suspend your running code, so you can look at the
 values of variables or the behavior of memory, or whether or not a branch of code is
getting run.

2. To run your app, press F5 (Debug > Start Debugging).

The debugger pauses at the breakpoint you set (IDE highlights the statement in the
yellow background). Now, you can inspect your app state by hovering over variables
currently in scope, using debugger windows like the Locals and Watch windows.

3. Press F5 to continue the app.

4. If you want to use the Chrome Developer Tools, press F12 in the Chrome browser. Using
these tools, you can examine the DOM or interact with the app using the JavaScript
Console.

Debug client-side script

Visual Studio provides client-side debugging support only for Chrome and Microsoft Edge. In
some scenarios, the debugger automatically hits breakpoints in JavaScript and TypeScript code
and embedded scripts on HTML files.

For debugging client-side script in [Link] apps, choose Tools > Options > Debugging,
and then select Enable JavaScript Debugging for [Link] (Chrome, Edge, and IE).

If you prefer to use Chrome Developer Tools or F12 Tools for Microsoft Edge to debug
client-side script, you should disable this setting.

For more detailed information, see this blog post for Google Chrome . For debugging
TypeScript in [Link] Core, see Add TypeScript to an existing [Link] Core app.

For .esproj projects in Visual Studio 2022, you can debug client-side script using standard
debugging methods to hit breakpoints. To configure debugging, you can modify
[Link] settings, which work the same as in VS Code. For more information about
debugger configuration options, see Launch configuration attributes .

７ Note
 For [Link] and [Link] Core, debugging embedded scripts in .CSHTML files is not
supported. JavaScript code must be in separate files to enable debugging.

Prepare your app for debugging

If your source is minified or created by a transpiler like TypeScript or Babel, use source maps
for the best debugging experience. You can even attach the debugger to a running client-side
script without the source maps. However, you may only be able to set and hit breakpoints in
the minified or transpiled file, not in the source file. For example, in a [Link] app, the minified
script gets passed as a string to an eval statement, and there's no way to step through this
code effectively using the Visual Studio debugger unless you use source maps. For complex
debugging scenarios, you may want to use Chrome Developer Tools or F12 Tools for Microsoft
Edge instead.

For help with generating source maps, see Generate source maps for debugging.

Manually configure the browser for debugging

In Visual Studio 2022, the procedure described in this section is available only in [Link] and
[Link] Core applications. It is required only in uncommon scenarios where you need to
customize browser settings. In .esproj projects, the browser is configured for debugging by
default.

For this scenario, use either Microsoft Edge or Chrome.

1. Close all windows for the target browser, either Microsoft Edge or Chrome instances.

Other browser instances can prevent the browser from opening with debugging enabled.
(Browser extensions may be running and intercept full debug mode, so you may need to
open Task Manager to find and close unexpected instances of Chrome or Edge.)

For best results, shut down all instances of Chrome, even if you're working with Microsoft
Edge. Both the browsers use the same chromium code base.

2. Start your browser with debugging enabled.

Starting in Visual Studio 2019, you can set the --remote-debugging-port=9222 flag at
browser launch by selecting Browse With... > from the Debug toolbar.
If you don't see the Browse With... command in the Debug toolbar, select a different
browser, and then retry.

From the Browse With dialog box, choose Add, and then set the flag in the Arguments
field. Use a different friendly name for the browser, like Edge Debug Mode or Chrome
Debug Mode. For details, see the Release Notes.

Select Browse to start your app with the browser in debug mode.

Alternatively, open the Run command from the Windows Start button (right-click and
choose Run), and enter the following command:

msedge --remote-debugging-port=9222

or,

[Link] --remote-debugging-port=9222
 This starts your browser with debugging enabled.

The app isn't yet running, so you get an empty browser page. (If you start the browser
using the Run command, you need to paste in the correct URL for your app instance.)

Attach the debugger to client-side script

In some scenarios, you may need to attach the debugger to a running app.

To attach the debugger from Visual Studio and hit breakpoints in the client-side code, it needs
help with identifying the correct process. Here's one way to enable it.

1. Make sure your app is running in the browser in debug mode, as described in the
preceding section.

If you created a browser configuration with a friendly name, choose that as your debug
target, and then press Ctrl+F5 (Debug > Start Without Debugging) to run the app in the
browser.

2. Switch to Visual Studio and then set a breakpoint in your source code, which might be a
JavaScript file, TypeScript file, or a JSX file. (Set the breakpoint in a line of code that allows
breakpoints, such as a return statement or a var declaration.)

To find the specific code in a transpiled file, use Ctrl+F (Edit > Find and Replace > Quick
Find).

For client-side code, to hit a breakpoint in a TypeScript file, .vue, or JSX file typically
requires the use of source maps . A source map must be configured correctly to support
debugging in Visual Studio.

3. Choose Debug > Attach to Process.

 Tip

Starting in Visual Studio 2017, after you attach to the process the first time by
following these steps, you can quickly reattach to the same process by choosing
Debug > Reattach to Process.
4. In the Attach to Process dialog, select JavaScript and TypeScript (Chrome Dev Tools/V8
Inspector) as the Connection Type.

The debugger target, such as [Link] should appear in the Connection

Target field.

5. In the list of browser instances, select the browser process with the correct host port
( [Link] in this example), and select Attach.

The port (for example, 7184) may also appear in the Title field to help you select the
correct browser instance.

The following example shows how this looks for the Microsoft Edge browser.

 Tip

If the debugger does not attach and you see the message "Failed to launch debug
adapter" or "Unable to attach to the process. An operation is not legal in the current
state.", use the Windows Task Manager to close all instances of the target browser
before starting the browser in debugging mode. Browser extensions may be running
and preventing full debug mode.
 6. The code with the breakpoint may have already been executed, refresh your browser
page. If necessary, take action to cause the code with the breakpoint to execute.

While paused in the debugger, you can examine your app state by hovering over
variables and using debugger windows. You can advance the debugger by stepping
through code (F5, F10, and F11). For more information on basic debugging features, see
First look at the debugger.

You may hit the breakpoint in either a transpiled .js file or source file, depending on
your app type, which steps you followed previously, and other factors such as your
browser state. Either way, you can step through code and examine variables.

If you need to break into code in a TypeScript, JSX, or .vue source file and are
unable to do it, make sure that your environment is set up correctly, as described in
the Source maps section of the VS Code documentation.

If you need to break into code in a transpiled JavaScript file (for example, app-
[Link]) and are unable to do it, remove the source map file, [Link].

Debug JavaScript in dynamic files using Razor

([Link])
In Visual Studio 2022, you can debug Razor pages using breakpoints. For more information,
see Using Debugging Tools in Visual Studio.

Related content
Properties, React, Angular, Vue
Unit testing JavaScript and TypeScript in
Visual Studio
08/08/2025

You can write and run unit tests in Visual Studio using some of the more popular JavaScript
frameworks without the need to switch to a command prompt. Both [Link] and [Link] Core
projects are supported.

The supported frameworks are:

Mocha ([Link] )
Jasmine ([Link] )
Tape ([Link]/substack/tape )
Jest ([Link] )
Vitest ([Link] )

Write unit tests for a CLI-based project (.esproj)

The CLI-based projects supported in Visual Studio 2022 work with Test Explorer. Vitest is the
built-in test framework for React and Vue projects (previously Jest), and Karma and Jasmine is
used for Angular projects. By default, you'll be able to run the default tests provided by each
framework, as well as any additional tests you write. Just hit the Run button in Test Explorer. If
you don’t already have Test Explorer open, you can find it by selecting Test > Test Explorer in
the menu bar.

To run unit tests from the command-line, right-click the project in Solution Explorer, choose
Open in Terminal, and run the command specific to the test type.

For information on setting up unit tests, see the following:

Testing with Vitest

Testing React with Jest
Angular testing
Testing [Link]

A simple example is also provided here. However, use the preceding links for complete
information.

Add a unit test (.esproj)

The following example is based on the TypeScript React project template provided in Visual
Studio 2022 version 17.12 or later, which is the Standalone TypeScript React Project template.
For Vue and Angular, the steps are similar.

1. In Solution Explorer, right-click the React project and choose Edit Project File.

2. Make sure that the following properties are present in the .esproj file with the values
shown.

XML

<PropertyGroup>
<JavaScriptTestRoot>src\</JavaScriptTestRoot>
<JavaScriptTestFramework>Vitest</JavaScriptTestFramework>
</PropertyGroup>

This example specifies Vitest as the test framework. You could specify Mocha, Tape,
Jasmine, or Jest instead.

The JavaScriptTestRoot element specifies that your unit tests will be in the src folder of
the project root. It's also common to specify the test folder.

3. In Solution Explorer, right-click the npm node and choose Install new npm packages.

Use the npm package installation dialog to install the following npm packages:

vitest

This package is added to the [Link] file under dependencies.

７ Note

If you're using jest, the jest-editor-support npm package is required as well as the
jest package.

4. In [Link], add the test section at the end of the scripts section:

JSON

"scripts": {
...
"test": "vitest"
},
5. In Solution Explorer, right-click the src folder and choose Add > New Item, and then add
a new file named [Link].

This adds the new file under the src folder.

6. Add the following code to [Link].

JavaScript

import { describe, it, expect } from 'vitest';

describe('testAsuite', () => {
it('testA1', async () => {
expect(2).toBe(2);
});
});

7. Open Test Explorer (choose Test > Test Explorer) and Visual Studio discovers and displays
tests. If tests aren't showing initially, then rebuild the project to refresh the list.

７ Note

For TypeScript, don't use the outfile option in [Link], because Test Explorer
won't be able to find your unit tests. You can use the outdir option, but make sure
that configuration files such as [Link] and [Link] are in the project
root.

） Important

If the output from Tests in the Output window shows a ReadOnlySpan error during
test discovery, use the following workaround for a known MSBuild issue . Open the
folder, Program Files\Microsoft Visual Studio\2022\
 <version>\Common7\IDE\Extensions\TestPlatform, and rename [Link] to
a different name. This fix enables test discovery.

Run tests (.esproj)

You can run the tests by clicking the Run All link in Test Explorer. Or, you can run tests by
selecting one or more tests or groups, right-clicking, and selecting Run from the shortcut
menu. Tests run in the background, and Test Explorer automatically updates and shows the
results. Furthermore, you can also debug selected tests by right-clicking and selecting Debug.

The following illustration shows the example with a second unit test added.

For some unit test frameworks, unit tests are typically run against the generated JavaScript
code.

７ Note

In most TypeScript scenarios, you can debug a unit test by setting a breakpoint in
TypeScript code, right-clicking a test in Test Explorer, and choosing Debug. In more
complex scenarios, such as some scenarios that use source maps, you may have difficulty
hitting breakpoints in TypeScript code. As a workaround, try using the debugger keyword.

７ Note

Profiling tests and code coverage aren't currently supported.

Run unit tests from the command line for a CLI-

based project (.esproj)
You can run unit tests directly from the command line for your unit test framework the same
way you would if you weren't using Visual Studio.

You may also choose to run the tests from the command line using [Link]. For example,
you may want to use [Link] to maintain consistency with C# unit tests, or to run in
Azure DevOps. Use the following command, but replace MyProj with your project name.

[Link] .\[Link] /TestAdapterPath:"C:\Program Files\Microsoft Visual

Studio\2022\Enterprise\Common7\IDE\Extensions\Microsoft\JavaScript"

Write unit tests for [Link] Core

To add support for unit testing of JavaScript and TypeScript in an [Link] Core project, you
need to add TypeScript, npm, and unit testing support to the project by including required
NuGet packages.

Add a unit test ([Link] Core)

The following example is based on the [Link] Core Model-View-Controller project template,
and includes adding a Jest or Mocha unit test.

1. Create an [Link] Core Model-View-Controller project.

For an example project, see Add TypeScript to an existing [Link] Core app. For unit
testing support, we recommend you start with a standard [Link] Core project template.

2. In Solution Explorer (right pane), right-click the [Link] Core project node and select
Manage NuGet Packages for Solutions.

3. In the Browse tab, search for the following packages and install each one:

[Link]
Npm

Use the NuGet package to add TypeScript support instead of the npm TypeScript
package.

4. In Solution Explorer, right-click the project node and choose Edit Project File.

The .csproj file opens in Visual Studio.

5. Add the following elements to the .csproj file in the PropertyGroup element.
 This example specifies Jest or Mocha as the test framework. You could specify Tape or
Jasmine instead.

Jest

The JavaScriptTestRoot element specifies that your unit tests will be in the tests
folder of the project root.

XML

<PropertyGroup>
...
<JavaScriptTestRoot>tests\</JavaScriptTestRoot>
<JavaScriptTestFramework>Jest</JavaScriptTestFramework>
<GenerateProgramFile>false</GenerateProgramFile>
</PropertyGroup>

6. In Solution Explorer, right-click the [Link] Core project node and select Add > New
Item. Choose the TypeScript JSON Configuration File, and then select Add.

If you don't see all the item templates, select Show All Templates, and then choose the
item template.

Visual Studio adds the [Link] file to the project root. You can use this file to
configure options for the TypeScript compiler.

7. Open [Link] and replace the default code with the following code:

Jest

JSON

{
"compileOnSave": true,
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"outDir": "wwwroot/js"
},
"include": [
"scripts/**/*"
],
"exclude": [
"node_modules",
 "tests"
]
}

For Jest, if you want to compile TypeScript tests to JavaScript, remove the tests folder
from the exclude section.

The scripts folder is where you can put the TypeScript code for your app. For an
example project that adds code, see Add TypeScript to an existing [Link] Core app.

8. Right-click the project in Solution Explorer and choose Add > New Item (or press Ctrl +
SHIFT + A). Use the search box to find the npm file, choose the npm Configuration File,
use the default name, and click Add.

A [Link] file is added to the project root.

9. In Solution Explorer, right-click the npm node under Dependencies and choose Install
new npm packages.

７ Note

In some scenarios, Solution Explorer might not show the npm node due to a known
issue described here . If you need to see the npm node, you can unload the project
(right-click the project and choose Unload Project) and then reload the project to
make the npm node re-appear. Alternatively, you can add the package entries to
[Link] and install by building the project.

Use the npm package installation dialog to install the following npm packages:

Jest

jest
jest-editor-support
@types/jest

These packages are added to the [Link] file under devDependencies.

TypeScript

"@types/jest": "^29.5.8",
"jest": "^29.7.0",
"jest-editor-support": "^31.1.2"
10. In [Link], add the test section at the end of the scripts section:

Jest

JSON

"scripts": {
...
"test": "jest"
},

11. In Solution Explorer, right-click the test folder and choose Add > New Item, and then add
a new file named [Link].

This adds the new file under the test folder.

12. Add the following code to [Link].

Jest

JavaScript

describe('testAsuite', () => {
it('testA1', async () => {
expect(2).toBe(2);
});
});

13. Open Test Explorer (choose Test > Windows > Test Explorer) and Visual Studio discovers
and displays tests. If tests aren't showing initially, then rebuild the project to refresh the
list. The following illustration shows the Jest example, with two different unit test files.
 ７ Note

For TypeScript, don't use the outfile option in [Link], because Test Explorer
won't be able to find your unit tests. You can use the outdir option, but make sure
that configuration files such as [Link] and [Link] are in the project
root.

） Important

If the output from Tests in the Output window shows a ReadOnlySpan error during
test discovery, use the following workaround for a known MSBuild issue . Open the
folder, Program Files\Microsoft Visual Studio\2022\
<version>\Common7\IDE\Extensions\TestPlatform, and rename [Link] to
a different name. This fix enables test discovery.

Run tests ([Link] Core)

You can run the tests by clicking the Run All link in Test Explorer. Or, you can run tests by
selecting one or more tests or groups, right-clicking, and selecting Run from the shortcut
menu. Tests run in the background, and Test Explorer automatically updates and shows the
results. Furthermore, you can also debug selected tests by right-clicking and selecting Debug.

The following illustration shows the Jest example, with a second unit test added.

For some unit test frameworks, unit tests are typically run against the generated JavaScript
code.

７ Note
In most TypeScript scenarios, you can debug a unit test by setting a breakpoint in
TypeScript code, right-clicking a test in Test Explorer, and choosing Debug. In more
complex scenarios, such as some scenarios that use source maps, you may have difficulty
hitting breakpoints in TypeScript code. As a workaround, try using the debugger keyword.

７ Note

Profiling tests and code coverage aren't currently supported.

Property pages for React, Angular, and Vue
projects in Visual Studio
06/24/2025

This article applies to React, Angular, and Vue projects created in Visual Studio that use the
JavaScript Project System (JSPS), which is the .esproj project format. This format is supported
starting in Visual Studio 2022.

The Property Pages provides access to project settings. To open the property pages, select the
project in Solution Explorer and then select the Properties icon, or right-click the project and
select Properties.

７ Note

Your computer might show different names or locations for some of the Visual Studio user
interface elements in this article. You might be using a different edition of Visual Studio or
different environment settings. For more information, see Personalize the IDE.

The following pages and options appear in the Property Pages.

Build tab
Under the General tab, the following properties are available.

Build Command

Specifies the command to run when you build the project. (Build > Build Solution, or when
you run the project.) If used, this value is typically an npm command. This property
corresponds to the BuildCommand property in the project file.

Production Build Command

Specifies the command to run when you build the project, when the project is integrated with
the [Link] Core Web API project. Generates production-ready files. By default, this command
is npm run build .

Starting in Visual Studio 2022 version 17.5, this option is not present in the recommended
project templates for React, Vue, and Angular.

Build Output Folder

Specifies the output folder for production build objects. For older projects, use this property
when you use the Production Build Command.

Clean Command

Specifies the command to run when you clean the project. (Build > Clean Solution) If used, this
value is typically an npm command. This property corresponds to the CleanCommand property
in the project file.

Working Directory

Specifies the working directory for the build command. This value is the project root, by
default.

Deploy tab
Startup Command

Specifies the command to execute when you start the project. For example, an Angular project
uses npm start by default. This property corresponds to the StartupCommand property in the
project file.

Working Directory

Specifies the working directory for the startup command. By default, this value is the project
root. Relative paths are relative to the project root.

７ Note

In Visual Studio, [Link] stores the startup settings associated with the Start button in
the Debug toolbar. [Link] must be located under the .vscode folder.

See also
JavaScript and TypeScript in Visual Studio
MSBuild reference for the JavaScript
Project System
Article • 11/07/2024

This article provides reference information for the MSBuild properties and items that
you can use to configure projects based on the JavaScript Project System (JSPS), which
use the .esproj format.

７ Note

The properties described in this article extend the properties MSBuild provides by
default. For a list of common MSBuild properties, see Common MSBuild
properties.

ShouldRun properties
The following MSBuild properties are documented in this section:

ShouldRunNpmInstall
ShouldRunBuildScript

ShouldRunNpmInstall
The ShouldRunNpmInstall property specifies whether to run or not run npm install on
Build and Restore commands. The default value for the property is true if unset.

XML

<PropertyGroup>
<ShouldRunNpmInstall>false</ShouldRunNpmInstall>
</PropertyGroup>

Two common scenarios where not running npm install is desirable are:

1. When a non-npm package manager (such as yarn or pnpm) is used. In this

scenario, the best solution is to create a target that runs before BeforeRestore to
manually run the installation.
2. When a global package installation mechanism exists in the solution that makes
running individual installations unnecessary.
ShouldRunBuildScript
The ShouldRunBuildScript property specifies whether or not to run npm run build on
Build commands. The default value for the property is true if unset.

XML

<PropertyGroup>
<ShouldRunBuildScript>false</ShouldRunBuildScript>
</PropertyGroup>

For projects containing only JavaScript that don't require building, set this property to
false . Newly created React, Vue, and Angular projects usually fall in this category. In

this scenario, build is used for production and not for debugging. Note that the Build
and Publish commands are separate in JSPS projects, and Publish still runs even if this
property is set.

Command Properties
Command properties are properties intended to map common [Link] scripts to
MSBuild targets. Default values are supported for all of these properties, as described in
this section.

Set these properties when using package managers other than npm, or scripting
engines such as gulp .

The following MSBuild properties are described in this section:

BuildCommand
StartupCommand
TestCommand
CleanCommand
PublishCommand

BuildCommand
The BuildCommand property specifies the behavior for the build target. If the associated
[Link] contains a build or compile script, the default BuildCommand value is
already set to run them.

To modify the command, include npm run when using npm .

 XML

<PropertyGroup>
<BuildCommand>npm run build</BuildCommand>
</PropertyGroup>

StartupCommand
The StartupCommand property specifies the behavior for the dotnet run target. If the
associated [Link] contains a start , server , or dev script, the default
StartupCommand value is already set to run these scripts.

If you modify the command, include npm run when using npm .

XML

<PropertyGroup>
<StartupCommand>npm run serve</StartupCommand>
</PropertyGroup>

TestCommand
The TestCommand property specifies the behavior for the test target. If the associated
[Link] contains a test script, the default TestCommand value is already set to run

this script.

If you modify the command, include npm run when using npm .

XML

<PropertyGroup>
<TestCommand>ng test</TestCommand>
</PropertyGroup>

CleanCommand
The CleanCommand property specifies the behavior for the clean target. If the associated
[Link] contains a clean script, the default CleanCommand value is already set to

run this script.

If you modify the command, include npm run when using npm .
 XML

<PropertyGroup>
<CleanCommand>npm run clean</CleanCommand>
</PropertyGroup>

PublishCommand
The PublishCommand property specifies the behavior for the publish target. If the
associated [Link] contains a publish script, the default PublishCommand value is
already set to run this script. In npm, it's common to have pre- and post- publish scripts,
which will also run.

If you modify the command, include npm run when using npm .

XML

<PropertyGroup>
<PublishCommand>npm run publish</PublishCommand>
</PropertyGroup>

See also
MSBuild schema reference
Common MSBuild properties
MSBuild properties for NuGet pack
MSBuild properties for NuGet restore
Customize a build

Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community

[Link] configuration
Article • 04/30/2022

If you are developing a [Link] app with a lot of npm packages, it's not uncommon to
run into warnings or errors when you build your project if one or more packages has
been updated. Sometimes, a version conflict results, or a package version has been
deprecated. Here are a couple of quick tips to help you configure your [Link]
file and understand what is going on when you see warnings or errors. This is not a
complete guide to [Link] and is focused only on npm package versioning.

The npm package versioning system has strict rules. The version format follows here:

[major].[minor].[patch]

Let's say you have a package in your app with a version of 5.2.1. The major version is 5,
the minor version is 2, and the patch is 1.

In a major version update, the package includes new features that are backwards-
incompatible, that is, breaking changes.
In a minor version update, new features have been added to the package that are
backwards-compatible with earlier package versions.
In a patch update, one or more bug fixes are included. Bug fixes are always
backwards-compatible.

It's worth noting that some npm package features have dependencies. For example, to
use a new feature of the TypeScript compiler package (ts-loader) with webpack, it is
possible you would also need to update the webpack npm package and the webpack-cli
package.

To help manage package versioning, npm supports several notations that you can use in
the [Link]. You can use these notations to control the type of package updates
that you want to accept in your app.

Let's say you are using React and need to include the react and react-dom npm
package. You could specify that in several ways in your [Link] file. For example,
you can specify use of the exact version of a package as follows.

JSON

"dependencies": {
"react": "16.4.2",
 "react-dom": "16.4.2",
},

Using the preceding notation, npm will always get the exact version specified, 16.4.2.

You can use a special notation to limit updates to patch updates (bug fixes). In this
example:

JSON

"dependencies": {
"react": "~16.4.2",
"react-dom": "~16.4.2",
},

you use the tilde (~) character to tell npm to only update a package when it is patched.
So, npm can update react 16.4.2 to 16.4.3 (or 16.4.4, etc.), but it will not accept an
update to the major or minor version. So, 16.4.2 will not get updated to 16.5.0.

You can also use the caret (^) symbol to specify that npm can update the minor version
number.

JSON

"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
},

Using this notation, npm can update react 16.4.2 to 16.5.0 (or 16.5.1, 16.6.0, etc.), but it
will not accept an update to the major version. So, 16.4.2 will not get updated to 17.0.0.

When npm updates packages, it generates a [Link] file, which lists the actual
npm package versions used in your app, including all nested packages. While
[Link] controls the direct dependencies for your app, it does not control nested
dependencies (other npm packages required by a particular npm package). You can use
the [Link] file in your development cycle if you need to make sure that other
developers and testers are using the exact packages that you are using, including nested
packages. For more information, see [Link] in the npm documentation.

For Visual Studio, the [Link] file is not added to your project, but you can
find it in the project folder.
Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community