How to Run JavaScript Program in Visual Studio

What is Visual Studio code?

Visual Studio code also known as VS code is a popular software developed by Microsoft so developers can write and edit code in various programming languages like JavaScript.

With the help of Visual Studio code, we can run the program inside the editor for a more enjoyable and efficient coding experience for the developers.

We can run the JavaScript program in VS code by using a built-in terminal or we can use a code debugger that is provided by VS code. There is another way to run a JavaScript program we can use the code runner extension from the extension store of Visual Studio.

How to Setup Your JavaScript Environment

Before we run the JavaScript program we need to set up the environment for the developer. There are some points that we need to follow to achieve that.

Install Visual Studio code

Before we start running the JavaScript program in Visual Studio, we need to install the IDE on our device. Let's see how to install the Visual Studio:

• First, we need to download the VS code installer for our Operating systems like Windows, Linux, or Mac.
• Then we need to run the installer and accept the permissions it brings up after that install the VS code in our device.
• After all this Visual Studio will be running smoothly.

Setting up Node.js

If we want to run a JavaScript Program within the VS code, then we need to have Node.js installed on our device. In JavaScript, Node.js is runtime built on the Chrome v8 JavaScript engine we can directly download the latest version of Node.js from their official website.

We need to make sure before downloading whether the Node.js version is long-term supported or not. Because LTS gives us stability in the long term and makes it ideal for a development environment.

After installing the Node.js we need to verify the correct versions of Node.js and NPM with the use of command prompt.

Output:

Installing VS Code Extension

With the help of Code Extension, we can enhance the experience of developers. To run JavaScript code in VS code, we need to install the Code Runner extension.

• Open the Vs code.
• Then Click on the extension button on the side window bar. Search for code runner in the extension sidebar.
• Click on the first extension in the search results and install the extension.

Creating a JavaScript file

After setting up the environment, we will create a JavaScript file so we can run that file in Visual Studio. There are some steps that we need to follow:

• First, open the Visual Studio code.
• In VS code, we need to create a new file for our program by clicking on the File menu, and then selecting the "New file". It will open an empty new file.
• We need to save the file with the .js extension so it can indicate that it's a JavaScript file. For Example, we could name it script.js. To save the file we need to go to the file menu select save as and choose the location on your computer.
• Now we can write the code in a newly created file.

Example

This simple JavaScript program will print the output when we execute it "Hello, My Name is Rohit".

How to Run JavaScript Program in Visual Studio

After writing the program we have our JavaScript file now let's run it in VS Code. There are two ways that we use to run the JavaScript Program in Visual Studio:

Using the Integrated Terminal

With the help of an integrated terminal in VS code, we can run the code or command directly in the editor. Let's see how we run our JavaScript program:

First, we need to open the integrated terminal by going to the terminal menu and selecting the new terminal. It will open a new terminal at the bottom of your screen.

Now to run your program you need to use the node command simply type node <file name> for example node script.js.

It runs the program and also shows the output in the terminal.

Using the Code Runner Extension

In Visual Studio, Code Runner is a very helpful extension that helps us so we can run the program quickly and test code snippets right within Visual Studio code. We can use it to run code for other programs like Java, C++, etc. Let's see how we can use it:

We can simply run the program with the help of the shortcut key Ctrl+ Alt+ N or we can play the button at the top right of our screen in Visual Studio.

After playing the button it will run the program and display the output right in our VS Code.

Using the VS Code Debugger

In Visual Studio Code, the debugger is one of the most useful tools that help us to run and debug the program. It also provides some helpful features like breakpoints, log points, etc.

We can use these features to the test JavaScript program in the provided terminal. Open JavaScript extension.

Let's see how we use .install node

First, we need to click on the debug icon on the side of the Visual Studio code workspace code extension.

After that in the menu, it will appear, select Run and Debug.

VS Code will prompt you to choose the debugger. We can also select the node JS if our program has no html file.

Once we select the debugger it will run the code. We can add breakpoints within our code to pause and evaluate it.