Dweb Studio for VS Code

让你在 VS Code 里“所见即所得”地创建页面：新建项目 → 新建页面 → 编辑脚本 → 保存预览。一体化工作流，入门简单、效率更高。

项目主页：https://www.dweb.club

我能用它做什么？

• 用熟悉的 VS Code 编辑器编写图表/画布脚本（仅支持 JS，禁止 JSON）
• 保存后，右侧画布立即按最新数据渲染效果
• 管理多个页面，随时切换、重命名、删除
• 导入并管理项目资源（图片/音视频），随时打开源文件位置

快速上手（建议按顺序操作）

1. 打开 Dweb Studio

   • 命令面板输入 “Dweb Studio: 打开” 或使用快捷键 Ctrl+Alt+P（Mac: Cmd+Alt+P）

2. 新建项目

   • 在左侧 Dweb Studio 视图中点击“创建新项目”，选择本地文件夹作为项目目录

3. 新建页面

   • 在项目详情中点击“+ 新建”，可选择预设设备尺寸（手机/平板/桌面）或自定义宽高（默认 1280×900）

4. 添加画布并编辑脚本

   • 打开页面后添加“画布”组件，点击“代码编辑器”
   • 在左侧原生编辑器中编写 JS 数据（支持 export default {...} 或设置变量 option = {...}）
   • 保存（Ctrl/Cmd+S），右侧画布即时更新

5. 保存项目快照

   • 在 Dweb Studio 视图内按 Ctrl/Cmd+S 保存；页面标题会显示脏标识，保存后清除

常用命令

• Dweb Studio: 打开（dwebStudio.open）
• Dweb Studio: 保存项目（dwebStudio.save）
• 打开代码编辑面板（dwebStudio.openCodeEditorPanel）

常用设置

• dwebStudio.useDevServer（默认 false）：从本地 Dev Server 加载 Webview 前端（加速开发）
• dwebStudio.devServerPort（默认 5180）：Dev Server 端口
• dwebStudio.uiScale（默认 1）：Webview UI 缩放（0.5~2.0）
• dwebStudio.debugLogs（默认 true）：打印详细调试日志

注意与限制

• 仅支持使用 JS 描述图表数据，JSON 会被拒绝（例如直接 {} 会报错）
• ECharts 渲染采用 notMerge + replaceMerge('series')，避免历史状态残留
• 资源文件复制到项目目录 .dweb-media/，画布脚本/数据（如启用）保存在 .dweb-canvas/

安装与要求

• VS Code 1.90.0 或更高
• 市场安装（即将发布）或本地安装 VSIX：
  • npm run build:all 构建产物
  • npx vsce package 生成 VSIX（或 npm run package:prod）
  • 在 VS Code 扩展侧边栏选择“从 VSIX 安装”

反馈与支持

• 主页：https://www.dweb.club
• 邮箱：dwebnine@dweb.club

许可证

Apache-2.0。详见根目录 LICENSE。