What is Visual Studio code?
Visual Studio Code, commonly referred to as VS Code, is a widely used application created by Microsoft to assist developers in coding and modifying scripts in a multitude of programming languages such as JavaScript.
By utilizing Visual Studio code, developers can execute the program directly within the editor, enhancing their coding experience in terms of efficiency and enjoyment.
To execute a JavaScript program in VS Code, we have multiple options available:
- We can utilize the integrated terminal within VS Code for running the program.
- Alternatively, we can leverage the code debugger feature that is included in VS Code.
- Another approach is to employ the code runner extension, which can be obtained from the extension store of Visual Studio.
How to Setup Your JavaScript Environment
In preparation for executing the JavaScript program, it is essential to configure the developer environment correctly. Several guidelines must be adhered to in order to accomplish this task.
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
To execute a JavaScript program in VS Code, Node.js installation on the system is necessary. Node.js serves as a runtime environment for JavaScript, utilizing the Chrome v8 JavaScript engine. The most recent Node.js version can be obtained from the official website directly.
It is important to verify if the Node.js version is categorized as long-term support (LTS) before downloading. LTS ensures stability over an extended period, making it well-suited for a development environment.
Upon completing the installation of Node.js, it is essential to confirm the accurate versions of Node.js and NPM by utilizing the command prompt.
node -v
npm -v
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
console.log ("Hello, My Name is Rohit");
Upon execution, this straightforward JavaScript script will display the following output: "Hello, My Name is Rohit".
How to Run JavaScript Program in Visual Studio
Once the JavaScript program has been written and saved in a file, we can proceed to execute it within the Visual Studio Code environment. There are two primary methods to run a JavaScript program in Visual Studio:
Using the Integrated Terminal
By utilizing the integrated terminal within Visual Studio Code, we have the capability to execute code or commands directly within the editor itself. Now, let's explore the process of running our JavaScript program:
To begin, access the integrated terminal by navigating to the terminal menu and choosing the option for opening a new terminal. This action will result in the appearance of a fresh terminal window located at the lower section of your screen.
To execute your program, you will utilize the node command. Just enter node <file name> in the terminal. As an illustration, you can type node script.js.
It executes the program and displays the output on the terminal screen.
Using the Code Runner Extension
Code Runner is an extension in Visual Studio that proves to be incredibly useful for swiftly running programs and testing code snippets directly within Visual Studio code. This extension can be utilized for executing code in various programming languages such as Java, C++, and more. Let's explore how we can leverage this feature:
To execute the program in Visual Studio, we have two options: either use the shortcut Ctrl+ Alt+ N or click on the button located at the upper right corner of the screen.
Upon clicking the button, the program will execute and showcase the output directly within our Visual Studio Code interface.
Using the VS Code Debugger
Within Visual Studio Code, the debugger stands out as a highly beneficial tool for executing and debugging programs. It offers various useful functionalities such as breakpoints, log points, and more to enhance the debugging process.
These functionalities can be utilized to test a JavaScript program within the designated terminal by opening the JavaScript extension.
Let's see how we use .install node
To begin, it is necessary to select the debug icon located on the edge of the Visual Studio code workspace extension.
Following this, navigate to the menu where you will find an option labeled Run and Debug.
When using VS Code, you will be prompted to choose a debugger. If there is no HTML file in our program, we can alternatively opt for the Node.js debugger.
After choosing the debugger, the code will be executed. It is possible to insert breakpoints at specific points in the code to interrupt its execution for evaluation.