Hal9

The hal9 VSCode extension runs code in an embedded browser with the cmd + enter shortcut.

This extension is ideal to rapidly iterate over visualizations by updating them instantaneously with cmd + enter; or to run line-by-line code selections with cmd + enter for long-running tasks; both use-cases are characteristic of Data Science, Machine Learning and Artificial Intelligence workflows.

Getting Started

To use this extension, open the "Command Palette" and enable hal9: Interactive JavaScript which will open an "Output" window. You can then open a JavaScript file and send commands to this output window using cmd + enter.

This extension is ideal to perform interactive JavaScript commands; for instance, try sending the following command to write "Hello world!" in the JavaScript output window:

document.body.innerText = 'Hello world!';

This extension makes use of d3-require to easily require dependencies, try sending the following example:

d3 = await require('d3@6')

document.body.innerHTML = '';

d3.select(document.body).append('svg')
  .attr('width', '100%')
  .attr('height', '100%')
  .selectAll('circle')
  .data([1,2,3,4,5,6,7,8,9,10])
  .enter()
  .append('circle')
    .attr('r', e => 4 * e)
    .attr('cx', e => 30 * e)
    .attr('cy', 40)
    .attr('fill', 'yellow')

In addition, you can require arbitrary JavaScript libraries using a full URL; these libraries will get added as <script> tags in your document header. Let's try to do this with the three.js visualization oibrary:

You can log commands back to the console using console.log, which has been overridden in the output window to write back to VSCode. Try sending the following line:

console.log('Tada!');

Contributing

Use yarn to install and compile this extension,

yarn install
yarn compile

Followed by running this extension from VSCode and packaging with vsce:

vsce package