How to Run JavaScript in Visual Studio Code?

You might have executed a JavaScript file many times in various code editors. But can you run JavaScript in Visual Studio code? The answer is yes, you can. This guide will discuss how to run JavaScript in Visual Studio code.

Before running the JavaScript file, we will set up our VS Code and Node.js to execute the JS file properly. We will run our JavaScript file through the following methods:

• Using the “Code Runner” Extension
• Using the Integrated Terminal

JavaScript is a valuable programming language consisting of various libraries like jQuery, one of the best web development tools in the market. You should know how to use jQuery in a JavaScript file. But before that, let’s discuss the prerequisites for running a JavaScript file in VS code.  

How to Run Javascript in Visual Studio Code? Step-by-step Guide

Following are the steps on how to run JavaScript in Visual Studio code. Without further ado, let’s get started.

Step 1: Installing Visual Studio Code

Visual Studio Code or VS code is among the most famous code editors many programmers worldwide prefer. Furthermore, it supports many programming languages and it is user-friendly.

Let’s first install Visual Studio Code from its official website. If you don’t know how to run JavaScript in Visual Studio code on Mac, don’t worry; we have you covered. You can install the latest stable version of the VS code according to your operating system on the official website. VS code is available for Windows, Mac, and Linux. You can download the installer and install it on your OS. Make sure to accept all the permissions, and your VS code should be up and running.

Step 2: Setting Up Node.js

After installation of the VS code, we have to set up Node.js in our operating system.Node.js is a JavaScript runtime environment for creating speedy and adaptable applications. One of the main reasons for installing Node.js is because it helps you carry out JavaScript code externally of a web browser. 

To check whether Node.js is installed or not, follow these steps:

1. Open your Command Prompt/Terminal/Linux Terminal application.
2. Write the following command: node -v, and press Enter.

Furthermore, if Node.js is already installed on your OS, it will show you the version:

v18.5.0

If the above line does not appear after writing the command, you must install Node.js on your OS. Furthermore, to install it, follow these steps: 

1. Visit the official website of Node.js
2. Download the version that says “LTS”(Long Term Support). This version is recommended because it is steady and has hardly any bugs. 

After installation, you can check whether Node.js was installed using the above-mentioned method.  

Step 3: Creating a JavaScript File

Now, we can start creating a JavaScript file in the VS code. Follow these steps:

1. Run Visual Studio Code on your OS.
2. There are two ways to create a JS file: First, press Ctrl+Alt+Windows+N, and a new file will be created. Second, choose the “New File” option from the “File” menu in VS code.
3. Now, you must save the file with a .js extension—for example, config.js. You can name your file anything if it ends with a .js extension.
4. To save JavaScript files, choose the “Save as” option from the “File” menu in VS code or press the shortcut key Ctrl+Shift+S and specify the location of your file in your OS.

Therefore, you have successfully created a JavaScript file in VS Code.  

Step 4: Running the JavaScript File

There are two methods to run the JavaScript file in Visual Studio code, which we will discuss in detail.

Method 1: Using the Integrated Terminal

Every programmer must have considered how to run JavaScript in Visual Studio Code terminal. In this section, we will discuss this in detail.  

The VS code has an integrated terminal that helps you execute commands directly inside the code editor. You can also select the terminal shells yourself. Furthermore, follow these steps to run your JS file using the integrated terminal:

1. Run the integrated terminal by choosing “New Terminal” from the “Terminal” menu. You can press the shortcut key Ctrl+~ to run the integrated terminal.
2. Inside the terminal, you must steer to the directory where your JS file is present by writing the cd command where the folder path should be mentioned. For instance: 

cd ~/Desktop/my-js-file

1. After finding the right directory, run this command to run JavaScript in the Visual Studio Code terminal:

node <file name>

Furthermore, your JavaScript file will be executed, and you can see the result inside the terminal. 

Method 2: Using the “Code Runner” Extension

Another way to run JavaScript files in VS code is to use the Code Runner extension, which helps us execute our code in any programming language directly from Visual Studio Code. To utilize this extension, follow these steps:

1. The VS code allows you to install various extensions that help you to code quickly. Firstly, you have to install the Code Runner Extension. You can search the Code Runner extension after clicking the Extensions icon on the sidebar. Click the install button, and the VS code will do the rest for you.

1. After installation, go to your JS file and right-click anywhere. You will get the “Run Code” option. Additionally, you can press the shortcut key Ctrl+Alt+N to run the Code.

When you click on the “Run Code” option, you will see that your code is executed by the Code Runner extension and is shown on the Output Panel of VS code. 

Bonus: Using an HTML file for visualization

Can I run JavaScript in Visual Studio Code using an HTML file? The answer is yes, you can. For this, you have to link the JS code with the help of the <script> tag in your HTML file and open it with a browser to see your output. 

Frequently Asked Questions

Can you code JavaScript in Visual Studio?

Visual Studio code supports various programming languages and is the best code editor to code in JavaScript.

How to run JavaScript in HTML?

To run JavaScript in HTML, you just have to link the JS code with the help of the script tag in your HTML file and open it with a browser to see your output.

What is the extension for JavaScript?

The .js extension is used for JavaScript files. You have to save the file with a .js extension—for example, index.js. You can name your file anything if it ends with a .js extension.

What is JavaScript used for?

JavaScript is mainly used for web development purposes. It helps you to apply complicated features to your web pages.

Conclusion

In conclusion, the above methods taught us how to run JavaScript in Visual Studio code. You can run your code using integrated terminal shells like Windows Powershell or Command Prompt. It also helps you utilize the Code Runner Extensions whenever you have many files to run. Try to discover other languages like Typescript, which works with JavaScript. Programmers worldwide always compare Javascript vs Typescript and select which language to use. They also need to know how to convert JavaScript to TypeScript online with the help of converters. 

See Also: How To Change CSS With JavaScript? Full Guide