How to Run Javascript In Visual Studio Code

Visual Studio Code (VS Code) is a powerful code editor made by Microsoft which is also free. It’s one of the most popular choices for developers because it’s simple to use and comes with useful features. It’s used by all types of developers including those who just starting with JavaScript or working on big projects. Coding on VS Code is better.

Unlike heavy software that takes up a lot of space VS Code is lightweight and runs fast. It supports many programming languages, including JavaScript so it’s a great tool for beginners and professionals alike. It has numerous built-in features and useful extensions Code Runner and Live Server with which you can write, run, and debug code all in one place.

Debugging is also simple with VS Code. If your code has errors, VS Code’s built-in debugger helps you find and fix them step by step. You can set breakpoints, check variables, and see exactly what’s going wrong. And what’s even more advantageous is that it works on any system. You can use it on Windows, macOS, or Linux and VS Code runs smoothly on all of them. So compatibility is not an issue.

Now let’s look at three simple ways to run JavaScript in Visual Studio Code:

One of the ways how to run JS file in VS code is by using Node.js. To start running JavaScript with Node.js, you first need to install Node.js on your computer. After that, create a new folder on your computer to keep your project files, open this folder in Visual Studio Code. Then, create a JavaScript file, write your code in it and save it with the “.js” extension. This will help you set up everything to run your JavaScript code using Node.js in Visual Studio Code.

Steps to Run JavaScript Using Node.js

Running JavaScript with Node.js in Visual Studio Code is straightforward. Here's a detailed breakdown of the steps, including how to run node JS in VS code: 

Install Node.js: Before you begin, you need to have Node.js installed on your system. You can download it from the Node.js official website.

Check Node.js Version: After installation, open Visual Studio Code and access the Terminal (use Ctrl + ~ or Cmd + ~ on Mac). Run this command to check if Node.js is properly installed:

node -v

You should see the Node.js version if it has been installed correctly.

1. Create a JavaScript File: In Visual Studio Code, you can create a new JavaScript file. You can name it app.js, script.js, or anything you like.

2. Write Your JavaScript Code: Add some basic JavaScript code to the file. Something like this:

console.log("Hello, Node.js!"); 

3. Open the Terminal in Visual Studio Code: Use the shortcut Ctrl + ~ (Windows/Linux) or Cmd + ~ (Mac) to open the terminal in VS Code.

4. Run Your Code Using Node.js: In the terminal, navigate to the directory where your JavaScript file is located. Use cd to change directories if needed. Once you're in the correct folder, run the following command:

node app.js

The output will be printed in the terminal, confirming your script ran successfully.

Hello, Node.js!

Example 2: Performing a Simple Calculation

This program declares two numbers, adds them, and prints the result.

let num1 = 20;
let num2 = 10;
let sum = num1 + num2;
console.log("The sum is:", sum);

Output

The sum is: 30

Example 3: Using a Function

Here, we define a function called greet() that takes a name as input and prints a greeting message.

function greet(name) {
	console.log("Hello, " + name + "! Welcome to Node.js.");
}
 
greet("Amit");
greet("Neha");

Output

Hello, Amit! Welcome to Node.js.
Hello, Neha! Welcome to Node.js.

The second way how to run JavaScript in Visual Studio code, is by using the code runner extension. With this extension, you can easily run JavaScript code without using the terminal manually every time. It’s beneficial for beginners who want a quick way to execute code. 

Steps to Use Code Runner Extension

1. Install the Code Runner Extension

• Open Visual Studio Code and go to the Extensions view by clicking on the Extensions icon in the sidebar. You can press Ctrl + Shift + X (Windows/Linux) or Cmd + Shift + X (Mac).
• Search for Code Runner in the search bar.
• Click Install to add the extension to your Visual Studio Code.

2. Write Your JavaScript Code

• Create a new JavaScript file (e.g., script.js) in Visual Studio Code.
• Add your JavaScript code to the file.

3. Run the Code

• Right-click anywhere in your JavaScript file and select Run Code from the context menu.
• Alternatively, you can use the shortcut Ctrl + Alt + N (Windows/Linux) or Cmd + Option + N (Mac) to run the code instantly.

4. View the Output

• The output of your JavaScript code will appear in the Output tab at the bottom of the Visual Studio Code window, not in the terminal.

Example 1: Print a message

We’ll look at an example to see how this works:

In the following we use console.log() to print a simple message to the output. This confirms that Code Runner is working properly.

console.log("Hello, Code Runner!");

Output

Hello, Code Runner!

Example 2: Simple Math Calculation

In this example, we define two variables, a and b, and perform basic mathematical operations. The results are then printed using console.log().

Code

let a = 10;
let b = 5;
console.log("Sum:", a + b);
console.log("Difference:", a - b);

Output

Sum: 15
Difference: 5

Example 3: Looping Through an Array

In this we create an array called fruits and use the forEach() method to loop through it. Inside the loop, we print a custom message for each fruit.

Code

let fruits = ["Apple", "Banana", "Mango"];
fruits.forEach((fruit) => {
	console.log("I love " + fruit);
});

Output

I love Apple
I love Banana
I love Mango

Finally, this article discusses how to run JavaScript code in Visual Studio by utilising HTML. Combining JavaScript with HTML is an effective way to enhance interactivity on web pages. Instead of using Node.js or extensions, you can write and test JavaScript directly in an HTML file. Here’s how to do it:

Steps to Run JavaScript with HTML

1. Create an HTML File

• Open Visual Studio Code and create a new file. Name it something like index.html.
• Start with a basic HTML structure.

Code

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript with HTML</title>
</head>
<body>
	<h1>Welcome to JavaScript with HTML</h1>
</body>
</html>

Output

The HTML file is ready, but it does not yet contain JavaScript. When opened in a browser, only the <h1> text will be displayed.

Welcome to JavaScript with HTML

2. Write JavaScript Code Inside <script> Tags

Add a <script> section within your HTML file. Write your JavaScript code inside these tags.

Code

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript in HTML</title>
</head>
<body>
	<h1>Welcome to JavaScript with HTML</h1>
	<script>
    	console.log("Hello, JavaScript is running!");
	</script>

The JavaScript code runs when the browser loads the page. The console.log message does not appear on the web page but can be seen in the browser’s Console.

Output

Hello, JavaScript is running!

3. Open the HTML File in a Browser

• Right-click the index.html file in Visual Studio Code and select ‘open with Live Server’ if you have the Live Server extension installed.
• Alternatively, open the file manually in your browser by double-clicking it.

4. Check the Output

• The h1 text will be displayed on the web page.
• To see the JavaScript output, open the browser’s developer tools by pressing F12 or Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac).
• Go to the Console tab to view the message from console.log.

Hello, JavaScript is running!

Now that you know how to run JS file in VS code, you also need some tips on how to debug in VS. Here are some tips: 

1. Use the Debug Panel

Open the Run and Debug panel by clicking the play icon in the sidebar or pressing Ctrl + Shift + D (Windows/Linux) or Cmd + Shift + D (Mac). Configure the debug environment by creating a launch.json file if required. This is especially useful when debugging with Node.js.

2. Set Breakpoints

Click on the left side of the line numbers in your JavaScript file to set a breakpoint. Breakpoints pause the code execution at specific lines. Therefore it allows you to inspect the state of variables and the flow of the program.

3. Inspect Variables and Call Stack

When the code execution pauses at a breakpoint, use the Variables and Call Stack sections in the debug panel to check the values of variables and the order of function calls.

4. Debug JavaScript in a Browser

If you’re working on a web project, use browser developer tools alongside Visual Studio Code. Use the Live Server extension to reload the browser automatically while debugging.

5. Check the Debug Console

You can use the Debug Console in Visual Studio Code to evaluate things like expressions, run JavaScript snippets, and inspect errors while debugging.

That wraps up the article on how to run JS file in VS code. Learning how to run and debug in Visual Code is very basic for coding students who are getting into web development. JavaScript is the core language in web development and the concepts discussed are critical for the purpose. To build a much stronger foundation, consider joining the CCBP 4.0 Academy program. With regular training, you will be ready by the end of your college and ramp up to work in no time. 

Now let’s look at some frequently asked questions on how to run JS file in VS code: 

1. How to run a JavaScript program in Visual Studio?

To run JavaScript programs in Visual Studio you can use Node.js. Install Node.js and then write your code in a .js file. Then, execute it through the terminal using the node filename.js command.

2. How to compile JavaScript code in Visual Studio?

JavaScript doesn’t require compilation as it’s an interpreted language. Instead, you can run it directly using Node.js or the Code Runner extension in Visual Studio Code.

3. How to practice JavaScript in Visual Studio Code?

Create a new .js file in Visual Studio Code and start writing code. Use the Live Server extension to practice JavaScript alongside HTML or Node.js to run scripts directly.

4. Can I debug JavaScript programs in Visual Studio Code?

Yes, you can debug JavaScript programs using the built-in debugger. You can set breakpoints, use the debug panel, and inspect variables to troubleshoot your code.

5. What is the easiest way to run JavaScript code in Visual Studio?

The easiest way is by using the Code Runner extension. It allows you to run JavaScript files with a single click or shortcut without using the terminal.