GCommand VS Code插件
一个简单而强大的VS Code插件,提供可配置的命令按钮界面和HTTP API管理功能。
✨ 主要功能
- 🎯 可配置命令按钮 - 通过JSON配置文件管理命令
- 🔄 实时更新 - 配置变化后自动刷新界面
- 🌐 HTTP API - 完整的REST API支持增删改查
- 🤖 Cursor AI集成 - 自动复制API文档,支持AI辅助管理
- 📊 实时反馈 - 命令执行结果实时显示
- 🎨 主题适配 - 自动适配VS Code主题
🚀 快速开始
1. 安装插件
- 克隆此仓库
- 运行
npm install
安装依赖
- 按
F5
启动调试模式
2. 激活插件
- 使用命令面板 (
Ctrl+Shift+P
) 执行 GCommand
- 或者点击活动栏中的GCommand图标
3. 使用功能
- 插件激活后会自动启动HTTP服务器 (端口6666)
- 在插件面板中点击按钮执行命令
- 查看操作反馈和服务器状态
🤖 Cursor AI 集成
自动API文档复制
插件激活时会自动将API文档复制到项目的 .cursor/gcommand/API.md
,使Cursor AI能够随时查阅API文档来管理命令。
使用Cursor AI管理命令
根据 .cursor/gcommand/API.md 文档,帮我添加一个构建命令:
- ID: buildProject
- 名称: 🏗️ 构建项目
- 描述: 执行项目构建
- 命令: npm run build
Cursor AI会自动生成相应的HTTP请求来添加、更新或删除命令。
详细使用指南
🔧 配置文件
command-config.json
{
"commands": [
{
"id": "toggleBetterDebug",
"name": "Toggle Better Debug",
"description": "切换调试模式",
"icon": "🔧",
"command": "toggle-better-debug.sh",
"style": { "color": "primary", "size": "medium" }
}
],
"ui": {
"layout": "grid",
"columns": 2,
"spacing": "medium"
}
}
🌐 HTTP API
基础信息
- 服务器地址:
http://localhost:6666
- 支持CORS: 是
- 实时更新: 配置变化后自动更新界面
主要端点
GET /api/commands
- 获取所有命令
POST /api/commands
- 添加新命令
PUT /api/commands/{id}
- 更新命令
DELETE /api/commands/{id}
- 删除命令
GET /api/status
- 服务器状态
详细API文档
📁 项目结构
├── src/
│ └── extension.ts # 插件主要逻辑
│ ├── GCommandPanel (WebView面板类)
│ ├── GCommandSidebarProvider (侧边栏提供器)
│ └── activate() (插件激活函数)
├── .vscode/
│ ├── launch.json # 调试配置
│ └── tasks.json # 任务配置
├── toggle-better-debug.sh # 外部脚本文件
├── package.json # 插件清单和配置
├── tsconfig.json # TypeScript配置
└── README.md # 说明文档
技术特性
- WebView API - 创建自定义HTML界面
- 视图容器 - 在活动栏中添加自定义视图
- 命令注册 - 注册可通过命令面板调用的命令
- 消息通信 - WebView与插件主进程的双向通信
- 主题变量 - 使用VS Code CSS变量实现主题适配
- 资源管理 - 正确的资源清理和内存管理
- 外部脚本执行 - 通过child_process执行Shell脚本
- 输出面板集成 - 在VS Code输出面板显示脚本结果
Toggle Better Debug 脚本
toggle-better-debug.sh
脚本实现了调试模式的切换功能:
- 开启调试模式:创建
.better-debug-enabled
标志文件
- 关闭调试模式:删除标志文件
- 状态显示:显示当前调试模式状态和时间戳
- 日志输出:详细的执行日志和状态信息
扩展建议
基于这个基础框架,您可以:
- 添加更多的交互组件
- 集成外部API和服务
- 实现文件操作功能
- 添加设置和配置选项
- 创建更复杂的UI界面
- 执行更复杂的外部脚本和工具