Published: 9 April 2025
Reading Time: 6 minutes
Knowing how to run JS file in VS code is very important for beginners in JavaScript. Visual Studio Code is a simple and powerful editor that makes writing and running JavaScript code easy. This article will show how you can use Node.js, HTML, or extensions like Code Runner. Learning this helps you save time and work better while coding.
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.
Lightweight and Fast: 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.
Built-in Debugging: 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.
Cross-Platform Compatibility: VS Code 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.
This guide covers 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.
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:
Step 1: 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.
Step 2: 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.
Step 3: 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.
Step 4: Write Your JavaScript Code
Add some basic JavaScript code to the file. Something like this:
console.log("Hello, Node.js!");
Step 5: Open the Terminal in Visual Studio Code
Use the shortcut Ctrl + ~ (Windows/Linux) or Cmd + ~ (Mac) to open the terminal in VS Code.
Step 6: 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!
Code:
console.log("Hello, Node.js!");
Output:
Hello, Node.js!
This program declares two numbers, adds them, and prints the result.
Code:
let num1 = 20;
let num2 = 10;
let sum = num1 + num2;
console.log("The sum is:", sum);
Output:
The sum is: 30
Here, we define a function called greet() that takes a name as input and prints a greeting message.
Code:
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.
Step 1: Install the Code Runner Extension
Step 2: Write Your JavaScript Code
Step 3: Run the Code
Step 4: View the Output
In the following we use console.log() to print a simple message to the output. This confirms that Code Runner is working properly.
Code:
console.log("Hello, Code Runner!");
Output:
Hello, Code Runner!
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
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
This section 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.
index.html.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
<script> TagsAdd 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>
</body>
</html>
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!
index.html file in Visual Studio Code and select 'open with Live Server' if you have the Live Server extension installed.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:
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.
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.
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.
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.
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:
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.
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.
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.
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.
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.
NxtWave offers comprehensive technology education programs including: