diff --git a/packages/vscode-ext/README.md b/packages/vscode-ext/README.md index 9d23c1e2..1c529ddd 100644 --- a/packages/vscode-ext/README.md +++ b/packages/vscode-ext/README.md @@ -1,21 +1,35 @@ # Squiggle For VS Code -_[marketplace](https://marketplace.visualstudio.com/items?itemName=QURI.vscode-squiggle)_ +## About -This extension provides support for [Squiggle](https://www.squiggle-language.com/) in VS Code. +This extension provides support for [Squiggle](https://www.squiggle-language.com/) in VS Code. It can be found in the VS code _[marketplace](https://marketplace.visualstudio.com/items?itemName=QURI.vscode-squiggle)_ Features: - Preview `.squiggle` files in a preview pane - Syntax highlighting for `.squiggle` and `.squiggleU` files -# Configuration +## Installation -Some preview settings, e.g. whether to show the summary table or types of outputs, can be configurable on in the VS Code settings and persist between different preview sessions. +You can install this extension by going to the "extensions" tab, searching for "Squiggle", and then installing it. + +![](./images/vs-code-install.png) + +## Usage + +After loading a `.squiggle` file, an "Open Preview" button will appear. If you click it, the squiggle model will be shown, and updated as you edit and save you file. + +![](./images/extension-screenshot.png) + +### Configuration (optional) + +Some preview settings, e.g. whether to show the summary table or types of outputs, can be configurable on in the VS Code settings and persist between different preview sessions. The VS Code settings can be accessed with the shortcut `Ctrl+,` with `Ctrl+Shift+P` + searching "Open Settings", or by accessing a file like `$HOME/.config/Code/User/settings.json` in Linux (see [here](https://stackoverflow.com/questions/65908987/how-can-i-open-visual-studio-codes-settings-json-file)) for other operating systems. + +![](./images/vs-code-settings.png) Check out the full list of Squiggle settings in the main VS Code settings. -# Build locally +## Build locally We assume you ran `yarn` at the monorepo level for all dependencies. diff --git a/packages/vscode-ext/images/extension-screenshot.png b/packages/vscode-ext/images/extension-screenshot.png new file mode 100644 index 00000000..f3cc3351 Binary files /dev/null and b/packages/vscode-ext/images/extension-screenshot.png differ diff --git a/packages/vscode-ext/images/vs-code-install.png b/packages/vscode-ext/images/vs-code-install.png new file mode 100644 index 00000000..e36b220a Binary files /dev/null and b/packages/vscode-ext/images/vs-code-install.png differ diff --git a/packages/vscode-ext/images/vs-code-settings.png b/packages/vscode-ext/images/vs-code-settings.png new file mode 100644 index 00000000..68568bd5 Binary files /dev/null and b/packages/vscode-ext/images/vs-code-settings.png differ