VS Code extension
The extension lives in the repository, in vscode-quantum/. It is not published on the Visual Studio Marketplace; to use it, build it and run it from source (it needs Node.js):
bash
cd vscode-quantum
npm install
npm run compileThen open the vscode-quantum folder in VS Code and press F5: a second VS Code window (the Extension Development Host) opens with the extension loaded, and .q files get the language features below.
Requires VS Code ^1.74.0. Features that run Quantum use the quantum found through the settings below.
Commands
| Command | Title |
|---|---|
quantum.openPreview | Open Preview |
quantum.openPreviewToSide | Open Preview to the Side |
quantum.refreshPreview | Refresh Preview |
quantum.togglePreviewView | Toggle HTML/Rendered View |
quantum.refreshComponentTree | Refresh Component Tree |
quantum.goToDefinition | Go to Definition |
quantum.run | Run Quantum File |
quantum.startServer | Start Development Server |
quantum.quickRun | Quick Run |
quantum.runTask | Run Task... |
quantum.explainError | Explain Error |
quantum.suggestFix | Suggest Fix |
quantum.suggestFixWithAI | Suggest Fix with AI |
quantum.lookupDocumentation | Lookup Documentation |
Keyboard shortcuts
| Keys | Command |
|---|---|
ctrl+shift+r | quantum.run |
ctrl+k v | quantum.openPreviewToSide |
ctrl+shift+d | quantum.lookupDocumentation |
Settings
| Setting | Default | Description |
|---|---|---|
quantum.validation.enabled | true | Enable/disable validation of Quantum files |
quantum.validation.showWarnings | true | Show warnings in addition to errors |
quantum.completion.enabled | true | Enable/disable code completion |
quantum.hover.enabled | true | Enable/disable hover documentation |
quantum.pythonPath | "python" | Path to Python executable |
quantum.frameworkPath | "" | Path to Quantum framework installation |
quantum.serverPort | 8080 | Port for development server |
quantum.buildOutputDir | "./dist" | Output directory for builds |
quantum.preview.autoRefresh | true | Auto-refresh preview on save |
quantum.preview.refreshDelay | 300 | Delay in ms before refreshing preview |
quantum.ai.provider | "anthropic" | AI provider for code assistance |
quantum.ai.apiKey | "" | API key for Anthropic (Claude) |
quantum.ai.model | "claude-sonnet-4-20250514" | Model to use for Anthropic |
quantum.ai.openaiApiKey | "" | API key for OpenAI |
quantum.ai.openaiModel | "gpt-4" | Model to use for OpenAI |
quantum.ai.ollamaUrl | "http://localhost:11434" | URL for local Ollama server |
quantum.ai.ollamaModel | "llama2" | Model to use for Ollama |
Snippets
Type the prefix in a .q file and accept the suggestion.
| Prefix | Inserts |
|---|---|
qaction | Form action handler |
qapp | Create a new Quantum application |
qcomp | Create a new Quantum component |
qdispatch | Publish an event |
qdump | Debug dump variable |
qfile | File upload handling |
qflash | Flash message |
qfunc | Define a function |
qfuncp | Define a function with parameters |
qif | Conditional if block |
qife | Conditional if-else block |
qifee | Conditional if-elseif-else block |
qimport | Import a component |
qinvoke | HTTP API invocation |
qllm | LLM invocation |
qllmc | LLM chat conversation |
qlog | Log a message |
qloop | Create a numeric range loop |
qloopa | Loop over an array |
qloopq | Loop over query results |
qmail | Send email |
qonevent | Event handler |
qparam | Define a parameter |
qquery | Database query |
qqueryp | Database query with parameters |
qredirect | Redirect response |
qset | Set a variable value |
qsett | Set a typed variable |
qslot | Content projection slot |
qtrans | Database transaction |
uiaccord | Collapsible accordion |
uialert | Alert notification |
uianim | Animation wrapper |
uiavatar | User avatar |
uibadge | Status badge |
uibread | Navigation breadcrumbs |
uibtn | Clickable button |
uicard | Card component |
uichart | Simple chart |
uicheck | Checkbox input |
uidropdown | Dropdown menu |
uiform | Form with validation |
uiformitem | Form field with label |
uigrid | CSS grid container |
uihbox | Horizontal flex container |
uiimg | Image display |
uiinput | Text input field |
uiinputv | Input with validation |
uilink | Hyperlink |
uilist | Repeating list |
uiload | Loading indicator |
uimodal | Modal dialog |
uipage | Pagination controls |
uipanel | Bordered panel with title |
uiprogress | Progress bar |
uirule | Horizontal separator |
uiselect | Dropdown select |
uiskel | Loading skeleton |
uispacer | Flexible space |
uiswitch | Toggle switch |
uitable | Data table |
uitabs | Tabbed content |
uitext | Text display |
uitheme | Theme configuration |
uitooltip | Tooltip wrapper |
uivalid | Custom validator rule |
uivbox | Vertical flex container |
uiwin | UI Window container |
The language server behind completion and diagnostics is also usable from other editors: see LSP server.