Run JavaScript in Visual Studio Code

Question

Is there a way to execute JavaScript and display the results using Visual Studio Code?

For example, a script file containing:

console.log('hello world');

I assume that Node.js would be needed but can't work out how to do it?

By Visual Studio Code I mean the new Code Editor from Microsoft - Not code written using Visual Studio.

This sounds like an A/B problem. What is the problem you're actually trying to solve? — Jordan Running, Aug 03 '15 at 02:46
I've just created a new Extension for VS Code just for this, try out "Node.JS REPL". https://marketplace.visualstudio.com/items?itemName=lostfields.nodejs-repl — Lostfields, Jan 06 '18 at 23:40
The easiest way to see the results is to goto View => Integrated Terminal and type: node .js — Mattl, Mar 05 '18 at 21:34
Did you find any anwser that allow to run JavaScript from the browser perspective? Like you would do with a browser console on an empty HTML page? — Eric Burel, Feb 17 '21 at 11:10
@all Quokka, is consider to be one of the best way for running JavaScript/TypeScript codes, for more info please refer -> https://stackoverflow.com/questions/69456935/how-to-run-javascript-typescript-code-in-vs-code-efficiently/69456936#69456936 - good luck all !! — Wasit Shafi, Oct 05 '21 at 20:36
Here's a thorough tutorial on [how to run javascript in vscode](https://semicolon.dev/vscode/how-to-run-javascript-terminal-nodejs-liveserver) in various ways. — InfiniteStack, Dec 13 '22 at 14:50
A couple of answers below are correct for the current version of vs code, but one of the most frustrating things about VS Code is every language has a different way of debugging or running, so if you use VS Code for multiple languages (which most people do), you have to remember to constantly change your workflow every time you change to a different language or file. It's so extra. — Bryan Williams, May 01 '23 at 00:18

score 160 · Answer 1 · edited Sep 17 '19 at 15:27

160

I am surprised this has not been mentioned yet:

Simply open the .js file in question in VS Code, switch to the 'Debug Console' tab, hit the debug button in the left nav bar, and click the run icon (play button)!

Requires nodejs to be installed!

edited Sep 17 '19 at 15:27

Aliaksandr Sushkevich

11,550
7
37
44

answered Apr 28 '18 at 21:43

tenwest

2,058
1
13
16

2

And no need to install an extension with this solution! Does the debugger have the same features as Code Runner? – Robin Métral May 07 '19 at 14:28
I am not familiar with code runner, but, it behaves like any other debugger break points, function stepping in/out, variable/expression watching, etc – tenwest May 07 '19 at 17:22
5

This makes the most sense – KhoPhi May 14 '19 at 20:34
But this way you're doing debugging right and not running program. Until and unless there is no break point, it's like running program, do you mean the same ? – vikramvi Jun 24 '19 at 07:05
2

Well, question wasn't asking to run a program, it asks to "execute javascript and display the results", this does both :) – tenwest Aug 06 '19 at 21:36
2

@tenwest - don't you need a debug config first that uses node.js ? I currently have a debug config for chrome browser only. This opens up the chrome browser which I don't need because my code does not call any browser functions. – MasterJoe Jun 09 '20 at 22:33
@MasterJoe this worked out of the box without any config 2 yrs ago, not sure about now. good luck! For what it's worth, I *only* used this on node code, never any browser interop – tenwest Aug 29 '20 at 00:54
3

It does not work out of the box today. Some kind of debug configuration is required: Chrome, Edge, Node.js, VS Code Extension. None seem appropriate. – user48956 Sep 14 '21 at 20:57

score 80 · Accepted Answer · edited Dec 13 '16 at 21:34

This solution intends to run currently open file in node and show output in VSCode.

I had the same question and found newly introduced tasks useful for this specific use case. It is a little hassle, but here is what I did:

Create a .vscode directory in the root of you project and create a tasks.json file in it. Add this task definition to the file:

{
    "version": "0.1.0",
    "command": "node",
    "isShellCommand": true,
    "args": [
        "--harmony"
    ],

    "tasks": [
        {
            "taskName": "runFile",
            "suppressTaskName": true,
            "showOutput": "always",
            "problemMatcher": "$jshint",
            "args": ["${file}"]
        }
    ]
}

Then you can: press F1 > type `run task` > enter > select `runFile` > enter to run your task, but I found it easier to add a custom key binding for opening tasks lists.

To add the key binding, in VSCode UI menu, go 'Code' > 'Preferences' > 'Keyboard Shortcuts'. Add this to your keyboard shortcuts:

{
    "key": "cmd+r",
    "command": "workbench.action.tasks.runTask"
}

Of course you can select whatever you want as key combination.

UPDATE:

Assuming you are running the JavaScript code to test it, you could mark your task as a test task by setting its isTestCommand property to true and then you can bind a key to the workbench.action.tasks.test command for a single-action invocation.

In other words, your tasks.json file would now contain:

{
    "version": "0.1.0",
    "command": "node",
    "isShellCommand": true,
    "args": [
        "--harmony"
    ],

    "tasks": [
        {
            "taskName": "runFile",
            "isTestCommand": true,
            "suppressTaskName": true,
            "showOutput": "always",
            "problemMatcher": "$jshint",
            "args": ["${file}"]
        }
    ]
}

...and your keybindings.json file would now contain:

{
    "key": "cmd+r",
    "command": "workbench.action.tasks.test"
}

The OP didn't say anything about having a project. It looks like they want to execute the single file currently open, which is a very reasonable thing to want from a text editor. — Mark Wilbur, Apr 18 '19 at 21:39

score 73 · Answer 3 · edited Sep 07 '18 at 14:52

73

This is the quickest way for you in my opinion;

Open integrated terminal on visual studio code (View > Integrated Terminal)
type 'node filename.js'
press enter

note: node setup required. (if you have a homebrew just type 'brew install node' on terminal)

note 2: homebrew and node highly recommended if you don't have already.

have a nice day.

edited Sep 07 '18 at 14:52

schrodingerscatcuriosity

1,780
1
16
31

answered Sep 07 '18 at 14:33

Vehbi

739
5
3

If the `js` file contains client side script like `sessionStorage`, an error will be thrown in the terminal. – Antonio Ooi Jun 10 '22 at 07:28

score 18 · Answer 4 · edited Sep 17 '19 at 15:29

The shortcut for the integrated terminal is ctrl + `, then type node <filename>.

Alternatively you can create a task. This is the only code in my tasks.json:

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "node",
"isShellCommand": true,
"args": ["${file}"],
"showOutput": "always"
}

From here create a shortcut. This is my keybindings.json:

// Place your key bindings in this file to overwrite the defaults
[
{   "key": "cmd+r",
"command": "workbench.action.tasks.runTask"
},
{   "key": "cmd+e",
"command": "workbench.action.output.toggleOutput"
}
]

This will open 'run' in the Command Pallete, but you still have to type or select with the mouse the task you want to run, in this case node. The second shortcut toggles the output panel, there's already a shortcut for it but these keys are next to each other and easier to work with.

CrackerKSR · Answer 5 · 2023-08-18T06:49:47.807

17

Follow these steps in VS code.[performed in windows os]

Create new file
Write javascript codes in it
Save file as filename.js
Go to Debugging menu (in latest version it is "Run" menu)
Click on Start debugging
or simply press F5

screenshot of starting debugging

screenshot of output of js code in terminal

Edit: Read this doc for latest configuration and features regarding JS for VSCode: https://code.visualstudio.com/docs/languages/javascript

edited Aug 18 '23 at 06:49

answered Nov 24 '19 at 19:56

CrackerKSR

1,380
1
11
29

1

For me, i) "Start debugging" is under "Run", ii) VSCode demands I select a (browser!) environment, and doesn't as a simple program. – user48956 Sep 14 '21 at 20:54
3

Yes, I can see that in my current version of vscode. I tried to run js after your comment. it asks for browsers selection. It also shows Nodejs in the list and if you select Nodejs there then it will run the file and show the output on debug console without leaving the vscode or any further configs. Also when it asks for browser selection it also gives the option to install extensions which will make your task easier – CrackerKSR Sep 18 '21 at 18:00
I don't want to run it in a browser. If Inseect nodejs, compiler errors are not reported (at least, I can’t see the in the output - oddly, if I select the output windows, CTRL-A, CTRL-C, and paste in the editor, the errors are pasted. What the hey. – user48956 Sep 18 '21 at 18:05
2

I think you should post a new question and explain there in detail so I would answer it properly. – CrackerKSR Sep 21 '21 at 10:29
1

Checkout August 2021 changelog . Now they are providing built in debugger https://code.visualstudio.com/updates/v1_60#_javascript-debugging – CrackerKSR Sep 25 '21 at 18:25

score 8 · Answer 6 · answered Feb 13 '16 at 05:51

Well, to simply run the code and show the output on the console you can create a task and execute it, pretty much as @canerbalci mentions.

The downside of this is that you will only get the output and thats it.

What I really like to do is to be able to debug the code, lets say Im trying to solve a small algorithm or trying a new ES6 feature, and I run it and there is something fishy with it, I can debug it inside VSC.

So, instead of creating a task for it, I modified the .vscode/launch.json file in this directory as follows:

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "program": "${file}",
        "stopOnEntry": true,
        "args": [],
        "cwd": "${fileDirname}",
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "env": {
            "NODE_ENV": "development"
        },
        "externalConsole": false,
        "sourceMaps": false,
        "outDir": null
    }
]
}

What this does is that it will launch whichever file you are currently on, within the debugger of VSC. Its set to stop on start.

To launch it, press F5 key, in the file you want to debug.

Good, but you need to press Shift+F5 at the end to stop the debugger — Peter Dotchev, Aug 02 '16 at 06:28

score 8 · Answer 7 · answered Jan 23 '18 at 05:55

I faced this exact problem, when i first start to use VS Code with extension Code Runner

The things you need to do is set the node.js path in User Settings

You need to set the Path as you Install it in your Windows Machine.

For mine It was \"C:\\Program Files\\nodejs\\node.exe\"

As I have a Space in my File Directory Name

See this Image below. I failed to run the code at first cause i made a mistake in the Path Name

Hope this will help you.

And ofcourse, Your Question helped me, as i was also come here to get a help to run JS in my VS CODE

As a reminder, you don't need all these ```\\``` in your settings, in Windows, simple `/` works too. — PhiLho, Mar 01 '22 at 09:43

score 5 · Answer 8 · answered Mar 12 '19 at 03:05

This may now be the easiest, as of v1.32:

{
    "key": "ctrl+shift+t",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": "node '${file}'\u000D" }
  }

Use your own keybinding.

See Release notes: sendSequence and variables.

With vscode v1.32 you can sendSequence to the terminal using variables like ${file}, which is the current file. If you want some other path there, replace ${file} with your pathname in the keybinding above.

The \u000D is a return so it will run immediately.

I added 's around the ${file} variable in case your file path has spaces in it, like c:Users\Some Directory\fileToRun

Nice! I just paste this in `File > Preferences > keyboard shortcuts` — Savrige, Jul 06 '21 at 20:38

Srijan Chaudhary · Answer 9 · 2019-12-13T00:50:01.870

5

I would suggest you to use a simple and easy plugin called as Quokka which is very popular these days and helps you debug your code on the go. Quokka.js. One biggest advantage in using this plugin is that you save a lot of time to go on web browser and evaluate your code, with help of this you can see everything happening in VS code, which saves a lot of time.

edited Dec 13 '19 at 00:50

answered Dec 04 '19 at 02:19

Srijan Chaudhary

637
1
8
18

score 5 · Answer 10 · answered May 08 '21 at 16:49

5

If you node installed on your machine

Just open the terminal in VSCODE and type node yourfile.js that's it

answered May 08 '21 at 16:49

Abhijit Chakra

3,201
37
66

1

That is not a solution by itself. If you type "node" in terminal within VSCODE it opens interactive shell within terminal with "Welcome to Node.js v14.15.4." .. (at least on os x) – trainoasis Jun 21 '21 at 12:03
Will that allow debugging and breakpoints within VSCode? – user48956 Sep 14 '21 at 20:50

score 4 · Answer 11 · answered Dec 21 '19 at 18:51

4

Just install nodemon and run

nodemon your_file.js

on vs code terminal.

answered Dec 21 '19 at 18:51

davimdantas

123
1
8

what is nodemon do i need to install it – Abhijit Chakra May 08 '21 at 16:40
[Nodemon](https://www.npmjs.com/package/nodemon) is a node package. If you have already a packahe manager like npm or yarn: Removed from NPM's Nodemon page: npm install -g nodemon And nodemon will be installed globally to your system path. You can also install nodemon as a development dependency: npm install --save-dev nodemon – davimdantas May 10 '21 at 19:48
without that i can simply write if i have already node node MyJSFileName.js – Abhijit Chakra May 11 '21 at 04:54

score 2 · Answer 12 · answered May 10 '19 at 16:30

Another option is to use the developer tools console within Visual Studio Code. Simply select "Toggle Developer Tools" from the help menu and then select the "Console" tab in the developer tools that pop up. From there you have the same dev tools REPL that you get in Chrome.

score 2 · Answer 13 · answered Jun 02 '19 at 19:07

There is no need to set the environment for running the code on javascript,python,etc in visual studio code what you have to do is just install the Code Runner Extension and then just select the part of the code you want to run and hit the run button present on the upper right corner.

Harikrishnan · Answer 14 · 2019-09-12T04:03:14.620

For windows: just change file association of .js file to node.exe

1) Take VSCode
2) Right click on the file in left pane
3) Click "Reveal in explorer" from context menu
4) Right click on the file -> Select "Open with" -> Select "Choose another program"
5) Check box "Always use this app to open .js file"
6) Click "More apps" -> "Look for another app in PC"
7) Navigate to node.js installation directory.(Default C:\Program Files\nodejs\node.exe"
8) Click "Open" and you can just see cmd flashing
9) Restart vscode and open the file -> Terminal Menu -> "Run active file".

score 1 · Answer 15 · answered Aug 03 '15 at 02:59

It's very simple, when you create a new file in VS Code and run it, if you already don't have a configuration file it creates one for you, the only thing you need to setup is the "program" value, and set it to the path of your main JS file, looks like this:

{
    "version": "0.1.0",
    // List of configurations. Add new configurations or edit existing ones.  
    // ONLY "node" and "mono" are supported, change "type" to switch.
    // ABSOLUTE paths are required for no folder workspaces.
    "configurations": [
        {
            // Name of configuration; appears in the launch configuration drop down menu.
            "name": "Launch",
            // Type of configuration. Possible values: "node", "mono".
            "type": "node",
            // ABSOLUTE path to the program.
            "program": "C:\\test.js", //HERE YOU PLACE THE MAIN JS FILE
            // Automatically stop program after launch.
            "stopOnEntry": false,
            // Command line arguments passed to the program.
            "args": [],
            // ABSOLUTE path to the working directory of the program being debugged. Default is the directory of the program.
            "cwd": "",
            // ABSOLUTE path to the runtime executable to be used. Default is the runtime executable on the PATH.
            "runtimeExecutable": null,
            // Optional arguments passed to the runtime executable.
            "runtimeArgs": [],
            // Environment variables passed to the program.
            "env": { },
            // Use JavaScript source maps (if they exist).
            "sourceMaps": false,
            // If JavaScript source maps are enabled, the generated code is expected in this directory.
            "outDir": null
        }, 
        {
            "name": "Attach",
            "type": "node",
            // TCP/IP address. Default is "localhost".
            "address": "localhost",
            // Port to attach to.
            "port": 5858,
            "sourceMaps": false
        }
    ]
}

it works, but you have to modifie this file evertime you create a new file, this is not what OP is asking i think — Andrzej Rehmann, Oct 09 '15 at 11:33

score 1 · Answer 16 · answered Jun 30 '21 at 03:00

You have to set Node.js environment variable to run JavaScript code in VS code. Follow these settings and create path.

--Open Control Panel-> System -> Advanced System Settings -> Environment Variables --find variable PATH and add node.js folder path as value. Usually it is C:\Program Files Nodejs;. If variable doesn't exists, create it. --Restart your IDE or computer.

In case you are wondering the node executable should be in your C:\Program Files\nodejs folder.

In case you needed to check your PATH you can view it by right clicking the Computer in File Explorer or from the security settings in Control Panel. Once there select Advanced System Settings. A dialog will open with the Advanced tab selected. At the bottom is a button, Environment Variables.

Nor.Z · Answer 17 · 2023-02-04T15:16:38.443

procedure

*(preface)

_{^{following steps are::

based on my memory, didnt strictly test the steps... (might miss few things?)
later version may have some different changes
the auto setup of things (-- eg: like environmental path) may be different
under Win10}}

Run plain js

1. download & install Vscode
2. download & install Node.js from the the offical website, eg: in G:\nodejs\node.exe
3. open Vscode -> open your workspace folder eg: MyTestSpace -> create a new file call eg: test.js
4. write a code console.log('-----test-----'); in test.js
5. go to the Run and Debug panel (ctrl+shift+d) > Run drop down list at the top > Add Config (MyTestSpace) > a launch.json should be auto generated for you
6. > at the auto-completetion popup > select Node.js: Launch Program > auto complete config fill in > rename the program to the path where your test.js locate
  - your launch.json should look something like this::
```
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/test.js",
    },
  ],
}
```
7. go back to the Run drop down list > select Launch Program (MyTestSpace) > click the Run button
8. in your Debug Console should see the following::
```
G:\nodejs\node.exe .\test.js
-----test-----
```
a graph for demo
- naming might be different
  - (just a ugly rough draft for demo [[(just try to post an answer wrote with little effort...)]])
  - (ignore unnecessary staff...)

Run js & html (briefly talk)

1. have a eg: main_test.html file, with a <script> tag refer to the test.js
2. in the Run drop down list > add config > select Chrome > auto complete launch.json > change path to main_test.html
  - eg:
```
 {
   "type": "chrome",
   "request": "launch",
   "name": "Open main_test.html",
   "file": "h:\\Book\\debug\\LXPI\\OEBPS\\lib_new2\\libNt\\crossFileHtse\\build_HighlightTypeset_ReadHtse\\main_test.html",
 },
```
3. select that chrome launch config > Run > html is opened up in your browser & console log printed

score 0 · Answer 18 · answered Apr 03 '19 at 16:06

There are many ways to run javascript in Visual Studio Code.

If you use Node, then I recommend use the standard debugger in VSC.

I normally create a dummy file, like test.js where I do external tests.

In your folder where you have your code, you create a folder called ".vscode" and create a file called "launch.json"

In this file you paste the following and save. Now you have two options to test your code.

When you choose "Nodemon Test File" you need to put your code to test in test.js.

To install nodemon and more info on how to debug with nodemon in VSC I recommend to read this article, which explain in more detail the second part on the launch.json file and how to debug in ExpressJS.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Nodemon Test File",
            "runtimeExecutable": "nodemon",
            "program": "${workspaceFolder}/test.js",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Node: Nodemon",
            "processId": "${command:PickProcess}",
            "restart": true,
            "protocol": "inspector",
        },
    ]
}

score -2 · Answer 19 · edited May 23 '21 at 04:10

-2

Install nodemon with npm: npm install nodemon -g
Init nodemon: npm init

Open package.json and change it to:

{
  "name": "JavaScript",
  "version": "1.0.0",
  "description": "",
  "main": "{filename}.js",
  "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "nodemon {filename}.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

Go to the terminal and write this command: npm start

edited May 23 '21 at 04:10

Edwin Babu

709
8
15

answered May 22 '21 at 09:08

mahdi paydarpuya

1
3

Will that allow debugging and breakpoints? – user48956 Sep 14 '21 at 20:50

Kasthuri Shravankumar · Answer 20 · 2023-01-04T16:40:10.620

-2

Use this class name tempCodeRunnerFile to run the java file without being saved

public class tempCodeRunnerFile{
    public static void main(String[] args) {
        System.out.println("aaaaaa");
    }
}

edited Jan 04 '23 at 16:40

answered Jul 12 '22 at 04:53

Kasthuri Shravankumar

491
4
11

score -2 · Answer 21 · answered Nov 06 '22 at 15:50

-2

Simply search "Mozilla javascript reference" on google. Open the first link (developer.mozilla) and then open any link in that page. It provides "Try it" example codes which you can delete and write and test your own code there. Simple. No need for VS-Code :-)

answered Nov 06 '22 at 15:50

Mohit Tomar

160
1
11

That's not an answer to the question. – Falci Nov 08 '22 at 21:23
But still it will help someone looking to only test some basic JS. – Mohit Tomar Nov 09 '22 at 10:02

score -3 · Answer 22 · answered Mar 15 '19 at 09:23

Another way would be to open terminal ctrl+` execute node. Now you have a node REPL active. You can now send your file or selected text to terminal. In order to do that open VSCode command pallete (F1 or ctrl+shift+p) and execute >run selected text in active terminal or >run active file in active terminal.

If you need a clean REPL before executing your code you will have to restart the node REPL. This is done when in the Terminal with the node REPL ctrl+c ctrl+c to exit it and typing node to start new.

You could probably key bind the command pallete commands to whatever key you wish.

PS: node should be installed and in your path

Run JavaScript in Visual Studio Code

22 Answers22

procedure

*(preface)

Run plain js

Run js & html (briefly talk)

Linked

Related