Skip to content
| Marketplace
Sign in
Visual Studio Code>Data Science>Observable JSNew to Visual Studio Code? Get it now.

Observable JS

Gordon Smith

|
681 installs
| (1) | Free
Observable JS Compiler
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Observable JavaScript | Markdown

Pull Build Test

VS Code extension for Observable "JavaScript" and "Markdown". This extension would not have been possible without the following:

  • ObservableHQ/parser
  • ObservableHQ/runtime
  • @hpcc-js/observable-md

Demo GIF

Quick Start with Observable JavaScript | Markdown

  1. Create a new file with either the .ojs or .omd extension.
  2. Select "OJS: Import Notebook" from command palette.
  3. Enter https://observablehq.com/@observablehq/a-taste-of-observable for the import URL.
  4. Press Ctrl+K V to preview notebook.
  5. Select "OJS: Export to HTML" from the command palette .
  6. Double click the exported HTML file to view in browser.

Commands

All commands are prefixed with "OJS" and are available via the command palette or by default shortcut key mappings

Command Shortcut Description
OJS: Check Syntax F7 Syntax Check
OJS: Preview Web Page Ctrl+K V Preview notebook in an embedded Web Page
OJS: Import Notebook Import published or shared notebook cells into current document
OJS: Export to HTML Export as a self contained HTML file

Settings

All settings are prefixed with "ojs." and are available via file -> preferneces -> settings menu

Setting Default Description
ojs.refreshPreviewOnSave true Refresh preview (if visible) when OJS document is saved
ojs.showRuntimeValues false Show runtime values as diagnostic info

Sample OJS File (myfile.ojs)

md`# Generator Test`;

function* range(n) {
  for (let i = 0; i < n; ++i) {
    yield i;
  }
}

{
  for (const i of range(Infinity)) {
    yield Promises.tick(1000, i + 1);
  }
}

md`# Import Test`;

import {viewof selection as cars} from "@d3/brushable-scatterplot";
viewof cars;

md`### Selection:
~~~json
${JSON.stringify(cars, undefined, 2)}
~~~
`;

Sample OMD File (myfile.omd)

# Generator Test
_Simple Generator test_

```
function* range(n) {
  for (let i = 0; i < n; ++i) {
    yield i;
  }
}

{
  for (const i of range(Infinity)) {
    yield Promises.tick(1000, i + 1);
  }
}
```

# Import Test
_Simple Import Test_

```
import {viewof selection as cars} from "@d3/brushable-scatterplot";
viewof cars;
```

### Selection:

```json 
${JSON.stringify(cars, undefined, 2)}
```
 

Recommended Extensions

Other recommended extensions for working with Observable notebooks formats in VSCode:

Extension Description
Observable JS Notebook Inspector VSCode extension for Interactive Preview of Observable JS Notebooks, Notebook Nodes, Cells and source code
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2019 Microsoft