Scribd
Upload
3 views

Additional Reading - Setting up VSCode for JavaScript

This document is a step-by-step guide for setting up Visual Studio Code (VSCode) for JavaScript development, including installation instructions for both VSCode and Node.js. It also provides guidance on testing the setup with a simple JavaScript file and explains how to handle user input using the Chrome console. The document encourages users to seek support from their mentors if they encounter any issues during the setup process.

Uploaded by

fgh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Additional Reading - Setting up VSCode for JavaScript

This document is a step-by-step guide for setting up Visual Studio Code (VSCode) for JavaScript development, including installation instructions for both VSCode and Node.js. It also provides guidance on testing the setup with a simple JavaScript file and explains how to handle user input using the Chrome console. The document encourages users to seek support from their mentors if they encounter any issues during the setup process.

Uploaded by

fgh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

ADDITIONAL READING

Setting up VSCode for


JavaScript
Introduction
WELCOME TO THE INSTALLATION GUIDE FOR VISUAL STUDIO CODE!

This step-by-step guide will help you set up your environment where you can
debug and run not only JavaScript code but code in any language. Visual Studio
Code is a source code editor developed by Microsoft for Windows, but it can be
used on Mac and Linux platforms as well. It can feel a little daunting at first, but
once you have had some time to set it up and play around with it, you will learn
how powerful it is as a code editor.

Remember that with our courses, you’re not alone! You can contact your mentor to get
support on any aspect of your course.

The best way to get help is to login to ​www.hyperiondev.com/portal​ to start a chat with
your mentor. You can also schedule a call or get support via email.

Your mentor is happy to offer you support that is tailored to your individual career or
education needs. Do not hesitate to ask a question or for additional support!
INSTALLING VISUAL STUDIO CODE

1. Go to ​https://code.visualstudio.com/ and download the correct VSCode


version for your operating system (Select the stable build version, not the
Insiders):

2. Open the downloaded file and follow the onscreen instructions.


3. If you are asked whether you want to add Node to PATH, select “add to
PATH on install”

INSTALLING NODE.JS

1. Next, you are going to need to download Node.js to be able to run your code
in VSCode. To do this, go to ​https://nodejs.org/en/download/ and
download the correct version for your operating system:
4. Open the installer and follow the onscreen instructions.

PUTTING IT TOGETHER

1. Now that VSCode and Node.js are installed, open the VSCode application. If
it was already open, you will need to close and reopen it.
2. If you are prompted to add Node to PATH at this point, select “add to PATH
on install”

3. Go to the Extensions tab, and type in “Node” and install Node Debug.
4. Now, let’s test if all the downloads worked correctly. Go File → New File. Save
this file with the name​ hello.js​.

5. Now, in the file write the line c


​ onsole.log(“Hello”);

6. Now select the debug tab on the left (the bug) and select “Run and Debug”
and when the dropdown menu pops up select “Node.js”

7. Your debug console should show your output!


SETTING UP FOR TAKING IN INPUT

VSCode does not cater for receiving input from a user, such as with the prompt()
function that you learned in this task. Therefore, we are going to be using the
Chrome console when we need this function. An HTML file has already been set up
that links to the JavaScript example code in each task file so that you can put it
and read any input given. Simply double click on the HTML file to open it in
Chrome, give any input you are prompted to fill in, right-click and select “Inspect”,
and you should see the input that you have filled in.

If the task you’re given to do requires user input, you can simply copy-paste the
code that links to the example code and make the relevant changes so that you
can use it for your compulsory task (This is explained in detail in the JavaScript and
HTML example codes in this task).

Congratulations! You’ve set up VSCode for JavaScript! VSCode can also be used for
many other languages including HTML, Python and Java. You simply need to
download the correct extension and save the file as the correct file type (e.g. .js for
JavaScript, .html for HTML, etc.). If you have any problems setting up your
environment, feel free to contact your mentor for assistance.

You might also like