02Engine VSCode Toolbox

简介 | Introduction

一个功能丰富的 VSCode 工具箱，为开发者提供多种开发辅助工具和调试功能。当前集成 Scratch 扩展开发调试工具，未来将持续扩展更多功能模块。

A feature-rich VSCode toolbox providing various development tools and debugging features for developers. Currently integrates Scratch extension development and debugging tools, with plans to expand more feature modules in the future.

功能特性 | Features

Scratch 扩展开发工具

WebSocket 调试服务器

监听端口 1101，等待 Scratch GUI 连接
实时发送扩展代码到 GUI 进行热加载
支持心跳机制保持连接稳定
状态栏显示连接状态

积木预览

实时预览扩展中定义的积木样式
支持命令、返回值、布尔值、事件等积木类型
自动解析 getInfo() 方法
代码修改时自动更新预览

安装

克隆或下载此项目
在扩展目录运行 npm install
运行 npm run compile 编译
按 F5 启动调试，或使用 vsce package 打包安装

使用方法

启动调试服务器

按 Ctrl+Shift+P 打开命令面板
输入 Scratch: 启动调试服务器
状态栏显示 Scratch: 0 连接 表示服务器已启动

发送扩展代码

打开 Scratch 扩展 JavaScript 文件
确保 Scratch GUI 已连接（状态栏显示连接数 > 0）
按 Ctrl+Shift+T 或执行 Scratch: 发送当前扩展到 GUI

预览积木

打开包含 getInfo() 方法的扩展文件
点击编辑器右上角的预览图标，或执行 Scratch: 预览积木
预览面板会在侧边显示积木样式

命令列表

命令	说明	快捷键
`Scratch: 启动调试服务器`	启动 WebSocket 服务器	-
`Scratch: 停止调试服务器`	停止服务器	-
`Scratch: 发送当前扩展到 GUI`	发送代码到已连接的 GUI	`Ctrl+Shift+T`
`Scratch: 预览积木`	打开积木预览面板	`Ctrl+Shift+Q`
`Scratch: 显示连接状态`	显示状态菜单	点击状态栏

配置选项

在 VSCode 设置中可配置：

配置项	类型	默认值	说明
`scratchDebugger.port`	number	1101	WebSocket 服务器端口
`scratchDebugger.autoStart`	boolean	false	启动 VSCode 时自动启动服务器

通信协议

服务器 → GUI

发送扩展代码：

{
    "type": "extension",
    "code": "完整的 JavaScript 代码字符串"
}

GUI → 服务器

心跳消息：

{
    "type": "heartbeat"
}

扩展代码示例

(function(Scratch) {
    'use strict';
    
    class MyExtension {
        getInfo() {
            return {
                id: 'myExtension',
                name: '我的扩展',
                color1: '#FF6B6B',
                color2: '#EE5A5A',
                blocks: [
                    {
                        opcode: 'sayHello',
                        blockType: Scratch.BlockType.COMMAND,
                        text: '说 [MESSAGE]',
                        arguments: {
                            MESSAGE: {
                                type: Scratch.ArgumentType.STRING,
                                defaultValue: 'Hello!'
                            }
                        }
                    }
                ]
            };
        }
        
        sayHello(args) {
            console.log(args.MESSAGE);
        }
    }
    
    Scratch.extensions.register(new MyExtension());
})(Scratch);

开发

# 安装依赖
npm install

# 编译
npm run compile

# 监听模式编译
npm run watch

# 打包
npx vsce package

许可证

GPL3