Javascript REPL

I really like the simple ‘console’ REPL that you have in a browser debug tools. I wanted to recreate this in VS Code.

tl;dr Debug console

It turns out after lots of experimenting this can be also done with the ‘Debug Console’ when you start a debug session – see VSCode debugging.

This is exactly what I wanted.

However I had tried a whole bunch of REPL plugins first.

Node.js Interactive window (REPL)

https://marketplace.visualstudio.com/items?itemName=lostfields.nodejs-repl

This is also a nice solution but seemed lacking compared to the browser console because you can’t inspect the objects so easily. But I guess it’s more like a standard REPL.

One problem is that it hasn’t been developed for years.

You have to disable eslint at the top

/* eslint-disable */

This seems more like a repl than the playground – it evals immediately

Interactive Javascript playground

https://github.com/axilleasiv/vscode-javascript-repl-docs

Very similar to the above plugin – neither is particularly actively maintained

This does seem to be very nice though.

You have to disable eslint at the top

/* eslint-disable */

This allows you to do more like a playground where you can eval immediately or just eval with //= comments after a line

You can run a REPL on a markdown file too: https://github.com/axilleasiv/vscode-javascript-repl-docs/wiki/Markdown-code-blocks

Code Runner

By far the most installed plugin is https://github.com/formulahendry/vscode-code-runner. This works for any language but has support for Node.

It’s kind of ugly though and it’s more like a SQL prompt where you can run a line or two of code and get output.

Ramda

https://ramdajs.com/repl/

This seems really interesting – you can install it locally too. This is probably the closest that I am looking for.

But you have to do quite a lot of installation locally.

Jupyter notebooks

Initially I was left cold by the REPLs as I didn’t have much access to the values – I liked the interactivity of the browser console.

My next step was to try Jupyter notebooks with a node.js kernal.

This led me to: https://github.com/DonJayamanne/typescript-notebook

This recommends installing Jupyter which adds a whole ton of stuff to VS Code but it all seems quite cool.

You can start in pseudo REPL mode where you just keep running a single line of code.

Or you can properly generate a ‘node notebook’ *.nnb file that you can use as a scratch pad. This then gives you full notebook support – this might be interesting for debug logs. I could create a JIRA-XXX.nnb notebook for each issue – then attach this to the Jira issue. Similar to the vim logs.

Note: You need to disable Vim mode for the nnb file

Then you have nice shortcuts you can use:

• b – create new run section below
• enter – focus in the section (like INSERT mode for Vim)
• esc – lose focus on the section (like NORMAL mode for Vim)
• shift+enter – run the section
• j,k – move up and down sections
• dd – delete section

It also nicely shows up functions that you have created inside the notebook in the intellisense.