Getting Started with JavaScript in VSCode

Use Visual Studio Code in your local environment and execute a JavaScript program!

Use Visual Studio Code (VSCode) to Execute JavaScript

As you move through various lessons and paths here on Codecademy, you may find yourself needing to create a project on your own computer and not on the Codecademy learning environment. This can be tricky, but it’s an exciting step that signals that you are ready to work independently.

To do this, we’ll need to use the text editor we installed above. Let’s take a moment to try out Visual Studio Code.

Part of becoming a skillful developer is being able to work on your own computer to create apps and programs. In this article, you’ll write JavaScript code in VSCode and execute it to see the output.

Pre-requisites

Before getting started, please make sure that you have installed the following:

• VSCode - this is the text editor we’ll be working with.

• Node - is a runtime environment that will execute our JavaScript program.

Development Folders

If you haven’t already set up a dedicated folder for your coding projects, now is a good time to start. It’s important to establish an organized file system especially as the number and size of your projects grow. The program we’re creating for this article will be small, but again, it’s a good habit to build.

One convention is naming this directory projects. It will store all of your coding projects. Whenever you create a new project, no matter how small, you should always make a new folder inside your projects directory. You will find that single-file projects can quickly turn into large, multi-folder projects.

Creating our JavaScript program

Below are the steps you need to follow to create a “Hello, World!” JavaScript program.

1. Make a New Folder for this Program

Navigate to your projects folder using your file manager or the terminal. Then inside the folder, create a new folder called helloJavaScript. This folder will store the file(s) that you’ll need.

2. Open Visual Studio Code

3. Open Your New Project’s Folder

Click on the ‘Explorer’ icon on the left-hand menu and click on the button ‘Open Folder’ and choose your development folder. This will launch your file manager.

Navigate to the helloJavaScript folder and select Open. The folder will open in Visual Studio Code’s side pane. At this point, there should not be any contents in the folder. We’ll add a file in the next step.

4. Add a File.

In Visual Studio Code’s Explorer pane, click on your development folder’s name. You’ll see four icons appear to the right of the folder name. Click the ‘New File’ icon. Type in the name of what you want to name your file with the correct file extension. It’s good practice to name the file something that matches the purpose of that file. In this case, you should name the file something like, hello.js. Press Enter when done.

5. Begin coding!

Copy and paste the following boilerplate JavaScript code (or add your own JavaScript code):

Save your file often with the Auto Save feature and track changes with a version control system if you know how to use one. (To turn Auto Save on, click on ‘File’ then ‘Auto Save’. When it’s on, you’ll see a checkmark next to ‘Auto Save’.) This will decrease the chances of losing unsaved work.

If your file has the right extension .js and your code has no syntax errors, you should see the correct syntax highlighting in VSCode!

Here’s what your file in VSCode should look like:

6. Use Node to Run Your Program

At this point, your program can be executed by Node!

You can use your terminal or VSCode’s built-in terminal to run the command:

Here’s how it could look if you’re using your terminal:

If you’re not seeing the correct results, make sure that you’re in the correct folder in your terminal and that you’ve typed in the correct name of your file.

Wrapping up

Congratulations, you’ve successfully used VSCode to log out "Hello, World!" the quintessential program for getting started! As you develop more, you’ll be able to create more robust programs and apps — straight from your own computer!