VS Code extension support for building widgets for the Scriptable iOS app.
Features
- Adds a
Scriptable language mode for .js files.
- Highlights Scriptable globals such as
ListWidget, WidgetStack, Color, Font, Request, and Script.
- Provides snippets for common widget and stack patterns.
- Shows completions and hovers for common Scriptable widget APIs.
- Runs a local preview runtime for
ListWidget scripts and renders the result in a VS Code webview or an external browser window.
- Adds diagnostics for syntax errors, preview runtime errors, browser/Node globals that Scriptable does not provide, and missing
Script.setWidget(widget) calls.
Usage
- Open a
.js file and set the language mode to Scriptable if VS Code has not selected it automatically.
- Run
Scriptable: Preview Widget from the Command Palette for the default VS Code preview pane.
- Use
Scriptable: Preview Widget in Browser when you want the preview in a browser window instead.
- Use
Scriptable: Create Sample Widget to create a starter widget in the current workspace.
If you want to turn the preview feature off explicitly, run Scriptable: Disable Preview.
The preview command infers the widget size from calls such as presentLarge() and from checks like config.widgetFamily === "large". You can also force a size with Scriptable: Preview Small Widget, Scriptable: Preview Medium Widget, Scriptable: Preview Large Widget, or Scriptable: Preview Extra Large Widget.
The preview runtime mocks the widget APIs used for layout and styling. It is designed for fast local feedback while editing; the Scriptable app remains the final authority for iOS-specific behaviour.
Type Hints
The extension includes types/scriptable.d.ts. You can reference it from a JavaScript file if you want richer JS IntelliSense:
/// <reference path="./types/scriptable.d.ts" />
Scriptable files use their own language mode, so this declaration file is mainly provided as a reusable reference if you keep scripts in standard JavaScript mode.
Development
Open this folder in VS Code and press F5 to launch an Extension Development Host.
