Can you code javascript in visual studio?

Posted on Apr 02, 2021

Here's the most simple way to run JavaScript using Visual Studio Code


Sometimes, you may want to run your JavaScript code immediately inside Visual Studio Code (VSCode) just to see if a piece of code works. The easiest way to run JavaScript using VSCode usually involves installing Node.js locally on your machine so that you can call the script using Node.js.

For example, suppose you have a script called index.js with the following code:

function factorial(num) {
  if (num === 0 || num === 1) {
    return num;
  }
  return num * factorial(num - 1);
}

let n = factorial(8);
console.log(n); // 40320

To run the file, you first need to open the integrated VSCode terminal in View > Terminal menu command:

Once inside the terminal, you can then run the code using node name_of_file.js command. The picture below shows the result of running node index.js command on the terminal:

By using Node.js, you can test run any simple JavaScript code you’ve written easily from VSCode integrated terminal.

Using Code Runner Extension

Alternatively, you can also use the VSCode Code Runner Extension to run JavaScript code without having to open the console and call Node.js manually.

After you installed the extension, you just need to open the context menu on the JavaScript file you want to run with right-click, then click on the Run Code menu:

But internally, Code Runner also looks for Node.js that’s installed on your local machine, so you need to install Node.js either way.

Since JavaScript is not a compiled language, we don’t need any special JavaScript development tools to write and deploy JavaScript applications.

Likewise, we don’t need special server software to run JavaScript applications. Therefore, the options for creating JavaScript codes are almost limitless.

We can write our JavaScript code in any text editor (Notepad); or in powerful integrated development environments (IDEs) such as Visual Studio, and Eclipse IDE.

Out of three options, we will use Visual studio code as development IDE throughout JavaScript tutorials for explaining JavaScript program examples practically.

But we will discuss all three approaches one by one in the further tutorials so that you might even use one of all three approaches as per convenience. Ultimately, you should use whatever tool you are the most comfortable with.

Before going to write JavaScript code in visual studio code, we will learn how to download and install the latest visual studio code from the company website and then configure it.

How to Download and Install Microsoft Visual Studio Code for JavaScript


Visual Studio Code is a lightweight but the most powerful standalone source code editor that runs on your desktop. It is available for Windows, macOS and Linux.

It comes with built-in support for JavaScript, TypeScript and Node.js and has various types of extensions for other programming languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).

Now we are going to download visual studio code as a development IDE for the JavaScript program. There are the following steps to download and install visual studio code that is as follows:


Step 1: Download the Visual Studio Code from this link: Visual Studio Code

Choose the latest stable version of the visual studio code and make sure that if your machine is 64-bit then choose 64-bit visual studio.

Step 2: Once VSCodeUserSetup.exe is downloaded into your computer system, click on the VSCodeUserSetup.exe and install the visual studio code application. Check the license agreement and click on the Next button as shown below in the screenshot.

Can you code javascript in visual studio?

Step 3: Click on the following options and then click on the Next button as shown in the below screenshot.

Can you code javascript in visual studio?

After clicking on the Next button, again click on the install button. Microsoft visual studio code editor will get started to install on your computer system. Then, click on the finish button.


Step 4: Now click on visual studio icon to open visual studio code editor on your desktop. Visual studio code editor will show you “Welcome message and list of changes happened in the latest version”. Close all of them.

Now we will install some useful extensions for JavaScript into visual studio code editor.

Best Javascript Extensions for Visual Studio Code


Microsoft Visual Studio Code editor supports various features for JavaScript and Node.js development. These features are the inbuilt core features such as debugging, IntelliSense, code navigation, etc.

In addition to these core features, we can also install numerous powerful extensions to add important features to VS Code to write and deploy JavaScript application codes.

To find JavaScript extensions, click on the Extension icon on the left-sidebar of VS code and just type JavaScript in the Extension view search bar.

Alternatively, you can also find JavaScript extensions by writing tags: “tag:javascript” in the search bar as per your requirements.

For JavaScript, we will install the following powerful JavaScript extensions in the VS Code one by one. They are as follows:

  • JavaScript (ES6) code snippets
  • Live Server
  • Auto Rename Tag
  • Bracket Pair Colorizer
  • Code Spell Checker
  • Color Highlight
  • Error Lens
  • FTP-simple

These extensions are all recommended extensions for JavaScript coding. To install the above extension, just click on the install button of the extension. The extension will get started to install. Repeat for all.

Before going to install extensions, you can also read descriptions, and reviews and should decide which extension is best for you.


After installing all the recommended extensions, now we will create a web project in VS code and write a simple JavaScript program code.

To write JavaScript code with visual studio code editor, just follow the following steps:

Step 1: Make a folder named JavaScript Project in C drive.

Step 2: Open VS code editor on your computer system and go to File menu> Open folder and select the JavaScript Project folder that you made in the C drive. Now you will see JavaScript Project with many options in the VS code.

Step 3: Click on the New File option, type FirstJSProgram.html, and press enter button as shown in the below screenshot.

Can you code javascript in visual studio?

Now you will see FirstJSProgram.html HTML page on the right-hand side of VS code editor where we will write JavaScript code.

To write JavaScript code in the HTML page, just type “!” (Emmet) and press the enter button. Look at the below screenshot to understand better.

Can you code javascript in visual studio?


Step 4: Now write the following JavaScript code snippet inside the body tags.


Once the JS code is written, save it using Ctrl+S. In the next step, we will learn how to run HTML code snippet in Visual studio code.

How to Run JavaScript in Visual Studio Code Editor?


We can run script code in visual studio code using Live Server. Live Server will open the web page in local server using your default browser, where we can see the output of the program.

To run the code snippet, right-click and go to the option “Open with Live Server” and wait for some time. The default browser will open and display the following output.

Output:
        This is my first JavaScript program in Visual Studio Code

How to Find Error in JavaScript Code using Console?


We can find errors in JavaScript code using console in the browser. When you will run HTML web page using Live server that you have created HTML page in visual studio code, the Live server will open your default browser where you will see the output.

Using console of the default browser, you can also find errors in JavaScript code. To find errors in the script, just right-click on the web page, and click on the option inspect element.

A tab will open in the sidebar or below in the default browser where you have to click on the console. Whatever will error come in the code, you can observe errors and fix them in the VS code editor.

I will recommend Google Chrome to use as a default browser because its console is powerful.


Let’s take an example program where we will find errors in the code using console of the browser. Write the following code between the opening tag and closing tag in the editor and run with the help of live server. Then, go to the console and check the error in the code.

Program code:




I will recommend you to set VS code editor, default browser, and console together (in parallel). This setting will help you to see the output as well as errors in the code simultaneously.

How to Create and Place External JavaScript File using Visual Studio?


First, we will create an external JavaScript file using visual studio and then we will place it inside the FirstJSProgram.html page.

To create an external JavaScript file in visual studio, just follow the below simple steps:

Step 1: Click on the New file and write the name “myScript.js” in the below dialog box that appears, and then press enter.

Step 2: A myScript page with extension .js will open, where we will write the following code snippet.

document.write("Creating an external file for JavaScript using Visual Studio");

Now save it using Ctrl+S.


Now we will place the external JavaScript file into the new HTML page named “myFirstScript”.

Step 1: To create myFirstScript page, just follow the same steps as we have done before.

Step 2: Place the following code inside the opening tag and closing tag of myFirstScript HTML page in visual studio code.


        // Here, src is an attribute of script tag.

Step 3: Now save it and run the code using the live server. We will get the following output as shown below.

Output:
        Creating an external file for JavaScript using Visual Studio

Hope that this tutorial has covered almost all the important steps related to how to write JavaScript code in Visual Studio Code. I hope that you will have understood how to create and run JavaScript code in visual studio code.

In the next tutorial, we will learn how to create and run JavaScript code with Eclipse IDE.
Thanks for reading!!!
Next ⇒ How to write JavaScript in Eclipse IDE⇐ Prev Next ⇒

Can we code JavaScript in Visual Studio?

JavaScript in Visual Studio Code. Visual Studio Code includes built-in JavaScript IntelliSense, debugging, formatting, code navigation, refactorings, and many other advanced language features. Most of these features just work out of the box, while some may require basic configuration to get the best experience.

How do I add JavaScript to Visual Studio?

With your project open in Visual Studio, right-click on a folder or your project node in Solution Explorer (right pane), and choose Add > New Item. In the New File dialog box, under the General category, choose the file type that you want to add, such as JavaScript File, and then choose Open.

How do I enable JavaScript in Visual Studio?

Here's one way to enable it..
Switch to Visual Studio and then set a breakpoint in your source code, which might be a JavaScript file, TypeScript file, or a JSX file. ... .
Select your target browser as the debug target in Visual Studio, then press Ctrl+F5 (Debug > Start Without Debugging) to run the app in the browser..

Can you edit JavaScript in Visual Studio?

Visual Studio Code - A Faster JavaScript Editor Fast and free JavaScript editor and debugger that runs on macOS, Linux, and Windows.