How to Run JavaScript in Visual Studio Code

9/26/2023

How to Run JavaScript in Visual Studio Code

Table of Contents

Introduction

There is no way to run JavaScript in VSCode without the utilization of a runtime such as NodeJS. JavaScript is a scripting language that was primarily built for interactivity on the web browser. We were not meant to use JavaScript on the server, but with the introduction of server runtime environments, like NodeJS, that all changed. Now we can execute JavaScript code on the server which opened the door for JavaScript developers to create backend systems with their preferred language.

VS Code and JavaScript

If you haven't already, check out my recent post What is Visual Studio Code? It provides an overview of the code editor and how it functions. In the context of this article, we will mainly be looking at the built-in terminal.

Install Visual Studio Code

Before you can run JavaScript code in Visual Studio Code, you need to install the editor. Head to the official website and download the version suitable for your operating system. It takes just a few minutes to install. Once installed, open VS Code and familiarize yourself with its user-friendly interface.

Setting Up a JavaScript Project in VS Code

Start by creating a new folder for your project. Inside Visual Studio Code, open this folder as a workspace. Now, create a new file named "index.js" in Visual Studio Code. For those who are familiar with the terminal, you can enter this command to create a file:


touch index.js

This will be your main JavaScript file where you'll begin programming.

Writing Your First JavaScript Code in VS Code

Open the "index.js" file in VS Code and write a simple JavaScript code. For this simple exercise, we will just print out "Hello World!":


console.log("Hello World!");

Save the file using the shortcut (CTRL + S or CMD + S) or the file menu.

How to Run JavaScript in VSCode

Install Node.js

To run JavaScript locally, you need to install the JavaScript runtime. You can go to their official page and select their Long-Term Support (LTS) or their Current version to see what features the team is working on. I will warn you though, that using any current version of software comes with the risk of something either breaking or just not working out of the box. It's safer to use their LTS.

Verify you have it installed by entering this shell command:


node -v


node —version

Initialize Your Node Application

Now go to your JavaScript file and initialize your Node project.


npm init

You can accept all the default parameters and leave some stuff blank for this example.

Run the JavaScript File

In your integrated terminal, you can now run JavaScript using this simple node command:


node index.js

You should see this output in the console:


Hello World!

And that's it, you successfully learned how to run JavaScript in VSCode!

Using the Code Runner Extension

For an even smoother experience, you can install the Code Runner extension from the VS Code marketplace. This extension allows you to run various programming languages, including JavaScript, with just a click or a shortcut. After installing the Code Runner extension, simply right-click on your JavaScript code and select "Run Code". This works with several other languages too if your dev environment is set up properly to support it.

Debugging JavaScript in Visual Studio Code

Debugging is a crucial aspect of coding. VS Code comes with built-in debugging tools for JavaScript. Set breakpoints in your code, run it, and the debugger will pause execution at these breakpoints. You can then inspect variables, view the call stack, and use the debug console to evaluate expressions.

I highly recommend you get familiar with this tool. It allows you to follow step-by-step how your code is executing, so you can see when and where your code is hitting roadblocks. It is especially helpful when your code base starts hitting a thousand lines or more.

VS Code Extensions for Enhanced JavaScript Development

The VS Code marketplace offers a plethora of extensions to enhance your JavaScript development experience. Some popular ones include JavaScript IntelliSense for code suggestions and snippets, and ESLint for linting your JavaScript code.

Code Navigation and IntelliSense for JavaScript

VS Code's built-in IntelliSense offers smart code completion based on variable types, function definitions, and imported modules. Additionally, you can easily navigate to function definitions, find all references, and view function signatures. It’s helped me a ton when I fat finger or fumble on keys. It automatically knows what I’m trying to say!

Best Practices for JavaScript Development in VS Code

Always keep your VS Code and extensions updated.
Use the integrated terminal for running JavaScript and other shell commands.
Make use of code snippets for faster coding.
Regularly commit your code if you're using a version control system.
Explore the VS Code marketplace to find extensions that suit your workflow.

Closing Thoughts and Further Resources

Thanks to modern solutions, running JavaScript in Visual Studio Code is a seamless experience, thanks to the editor's robust features and the vast ecosystem of extensions. Whether you're debugging, writing, or running JavaScript, VS Code has got you covered. As you continue your JavaScript journey, always stay curious, keep learning, and explore the myriad of resources available online.

Perhaps you’re ready to learn a JavaScript framework? In that case you might want to checkout my article, What is a Web Framework in Web Development?. It just might give you the push in the right direction. Let’s get connected, and discuss all things web development!