Beginner's guide on how to run JavaScript code directly within VS code editor

JavaScript is the programming language of HTML and the web not like HTML and CSS, where you can view the result of what you coded in the browser and see the effects. So to run JavaSripts and see it's effects is bit tricky to some beginners.

In this guide, I will show some trick on how to run your JavaScript codes and see the effects within the VS code editor

Step one

Let's say we have a file named additon.js and it contains block of code below

function addNumbers(numOne, numTwo){
return numOne + numTwo;
}

addNumbers(2, 5);

By default you can run it via vs code embedded terminal Press ctrl+~ to open the terminal

Then type

node "filename.js"

and hit enter.

Step two

Now let's try some extentions. I will recommend code runner or simply click the extention ribon in your vs code and search for code runner. After sucessful installation, go to settings or simply press ctrl+p and search for settings.json and paste the codes below

"code-runner.executorMap": {
        "javascript": "node"
    }

save the settings.

Now you can run JavaScript code in either of the following ways

• use shortcut Ctrl+Alt+N

• or right click the Text Editor and then click Run Code in editor context menu

• or click Run Code button in editor title menu

• or click Run Code button in context menu of file explorer

Note

Every time you run your code the output which shows the previous execution result, to get rid of this add the following code into your settings.json file

{
    "code-runner.clearPreviousOutput": true;
}

By default it's false

Thanks for reading and happy coding