VS Code 扩展

机器翻译

本页由英文原文机器翻译而来，尚未经过母语审校，欢迎在 GitHub 上提出修改。内容如有出入，以英文原文为准。

扩展位于仓库的 vscode-quantum/ 中。它没有发布到 Visual Studio Marketplace；要使用它，需要从源码构建并运行（需要 Node.js）：

cd vscode-quantum
npm install
npm run compile

然后在 VS Code 中打开 vscode-quantum 文件夹并按 F5：会打开第二个 VS Code 窗口（Extension Development Host），其中加载了该扩展，.q 文件即可获得下面的语言功能。

需要 VS Code ^1.74.0。运行 Quantum 的功能使用下面设置中找到的 quantum。

命令

命令	标题
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

快捷键

按键	命令
ctrl+shift+r	quantum.run
ctrl+k v	quantum.openPreviewToSide
ctrl+shift+d	quantum.lookupDocumentation

设置

设置项	默认值	说明
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

代码片段

在 .q 文件中输入前缀并接受建议。

前缀	插入
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

扩展有自己的补全、悬停提示、定义跳转和诊断，基于与语言服务器相同的标签结构构建。其他编辑器请参见 LSP 服务器。