How To Run JavaScript In Visual Studio Code

Visual Studio Code will use NodeJS to run JavaScript. So, first make sure to install NodeJS.

If you haven't done it already download NodeJS from official site and install it to C:\nodejs (or similar directory, by selecting it during installation.) Make sure to memorize it, you will need it in a later step.

To run JavaScript in VSCode, you have several options.

One way to run JavaScript is by using VSCode's LiveSever extension.

Follow these steps to get started:

1. Install NodeJS on your system. (Download NodeJS here.)
2. If you are on Windows, add the location of your new NodeJS installation (C:\nodejs for example) to PATH variable in Environment Variables.
3. Run node --version in Terminal (or cmd.exe) to make sure NodeJS is installed.

How to run JavaScript on localhost in Visual Studio Code (using LiveServer extension)

To setup your computer for web development, you will want to run JavaScript in your browser on localhost address. You can't do that without NodeJS. We've just done that in previous step!

If you want to run JavaScript in your browser for web development, one way to set it up is via VSCode's LiveServer extension. NodeJS is the actual program that runs your JavaScript. But LiveServer puts everything together for you.

With NodeJS installed, go to VSCode's Extensions button, and search for LiveServer. Click on first search result and then click on Install LiveServer button.

To run JS on localhost in your Chrome or Firefox browser in Visual Studio Code you can start it with LiveServer extension:

After installing LiveServer you should have new "Go Live" button added to your VSCode status bar. Simply open your JavaScript project, add index.html and click Go Live button.

How to select which browser you want to run JavaScript in via LiveServer extension

When you click Go Live button, your JS app should launch in browser.

But how to choose which browser should open by default?

Next to Install button, go to Live Server's settings gear button and choose Extension Settings.

On the settings page that opens, click on settings.json icon in upper right corner:

Now with settings.json file open, add the following settings to your Live Server config:

"liveServer.settings.AdvanceCustomBrowserCmdLine":"chrome"

So that now part of your settings.json file will look something like:

{
    "liveServer.settings.AdvanceCustomBrowserCmdLine":"chrome",
    "editor.fontSize": 25,
}

// there might be other properties in your settings.json file

This will setup Live Server for opening your HTML file in chrome browser.

But you can also specify other values like firefox or safari for example.

If you're on Windows you must add NodeJS to Environment Variables

This is important because it allows you to run NodeJS executable from any location on your hard drive, not just from its installation folder.

This is also what will enable VSCode to run JavaScript.

Some NodeJS installers will do this step for you, but it's still best to make sure.

Hit Enter and on next screen, follow these steps:

Just to round up, in order to add C:\nodejs to PATH variable follow these steps:

1. Click on Start button and just start typing "environment variables"
2. Hit enter and on next screen click "Environment Variables" button
3. On next window go to second box below ("System Variables") and locate PATH variable
4. Click on PATH variable to select it, and click "Edit..." button
5. Click "Add" button and type C:\nodejs (or location where you actually installed Node)
6. Click Ok button on each window as they close to confirm changes.
7. That's it! You've just added NodeJS installation folder to PATH

JavaScript does not run in Visual Studio Code editor itself, it is executed by NodeJS.

YouTube video on how to run JavaScript in VSCode using Live Server extension

Video Chapters:

1. 00:00 How to Run JavaScript in VSCode
2. 00:42 Download and Install NodeJS
3. 01:38 Add Node JS to Environment Variables on Windows 10 or 11
4. 02:46 Find out which NodeJS version you're running on CMD
5. 03:13 Code Runner Extension
6. 03:49 Open JavaScript Project
7. 04:57 Run JS in VSCode Terminal
8. 05:23 Run JS in Code Runner
9. 05:57 Install Live Server
10. 06:17 How to choose browser to run JS in
11. 07:10 Run JavaScrtipt on localhost in vscode using Live Server
12. 07:43 Hot Reload

Keywords to consider when searching for topics in this tutorial:

1. how to run javascript file in visual studio code terminal
2. how to use javascript with vscode
3. how to run vanilla js in vs code