Command Dock
✨ 功能特性
🎛️ 核心功能
- 🎯 独立面板管理 - 在资源管理器中显示专用的按钮管理面板
- ⚡ 一键执行命令 - 直接在面板中点击按钮执行终端命令
- 🏢 基于工作区 - 按钮列表根据工作区组织(支持多工作区)
- 🎨 自定义样式 - 支持自定义按钮图标和颜色
|
🛠️ 管理功能
- 📝 便捷管理 - 面板内直接添加、编辑、删除按钮
- 💾 配置持久化 - 配置保存在工作区设置中
- 🔄 实时同步 - 状态栏按钮与面板同步显示
- 🌐 多平台支持 - Windows、macOS、Linux 全平台兼容
|
🚀 安装方式
📦 从 VSCode Marketplace 安装(推荐)
点击展开安装步骤
- 🖥️ 打开 VSCode/Cursor
- ⌨️ 按
Ctrl+Shift+X
(Windows/Linux) 或 Cmd+Shift+X
(macOS) 打开扩展面板
- 🔍 搜索 "Command Dock"
- 📥 点击安装
- 🔄 重新加载窗口
🔧 本地开发安装
如果您想要参与开发或测试最新功能:
# 📁 克隆项目
git clone https://github.com/Merlin218/vscode-extension-command-dock.git
cd vscode-extension-command-dock
# 📦 安装依赖
pnpm install
# 🚀 本地安装扩展
make install-local
# 或者
./scripts/install-local.sh
# 🔄 重新安装(修改代码后)
make reinstall
# 或者
./scripts/install-local.sh --reinstall
📚 详细的本地安装指南请查看:本地安装指南
📋 界面说明
🎯 主要操作区域
区域 |
位置 |
功能 |
🎛️ 自定义按钮面板 |
资源管理器侧栏 |
显示按钮列表、提供管理操作、支持工作区分组 |
📊 状态栏按钮 |
编辑器底部 |
快速执行常用命令、与面板内容同步 |
📖 使用方法
🎯 面板操作(推荐)
🔍 1. 打开面板
- 在资源管理器侧栏找到 "🎛️ Command Dock" 面板
- 如果没有显示,确保已打开工作区文件夹
➕ 2. 添加按钮
- 点击面板标题栏的 ➕ 按钮
- 或右键面板空白区域选择 "Add Button"
- 按提示填写:
- 📝 按钮名称(必填):如 "🚀 Dev Server"
- ⚡ 执行命令(必填):如 "npm run dev"
- 🎨 图标名称(可选):如 "play", "gear", "terminal"
- 🌈 按钮颜色(可选):选择预设颜色
▶️ 3. 使用按钮
- 方式一:直接点击面板中的按钮名称
- 方式二:点击状态栏中的对应按钮
- 方式三:右键按钮选择 "Execute Command"
⚙️ 4. 管理按钮
- ✏️ 编辑:右键按钮 → "Edit Button" 或点击编辑图标
- 🗑️ 删除:右键按钮 → "Remove Button" 或点击删除图标
- 🔄 刷新:点击面板标题栏的刷新按钮
🎮 传统命令操作
也可以通过命令面板使用:
操作 |
快捷键 |
命令 |
➕ 添加按钮 |
Cmd+Shift+P |
Custom Button: Add Custom Button |
✏️ 编辑按钮 |
Cmd+Shift+P |
Custom Button: Edit Custom Button |
🗑️ 删除按钮 |
Cmd+Shift+P |
Custom Button: Remove Custom Button |
💡 实用示例
🌐 前端开发工作流
⚛️ React/Vue/Angular 项目
{
"customButton.buttons": [
{
"id": "dev-server",
"name": "🚀 Dev Server",
"command": "npm run dev",
"icon": "play",
"color": "#00ff00"
},
{
"id": "build-project",
"name": "🔨 Build",
"command": "npm run build",
"icon": "gear",
"color": "#0000ff"
},
{
"id": "run-tests",
"name": "🧪 Test",
"command": "npm test",
"icon": "beaker",
"color": "#ffff00"
},
{
"id": "install-deps",
"name": "📦 Install",
"command": "npm install",
"icon": "package",
"color": "#ffa500"
}
]
}
🔄 Git 操作快捷键
🌿 基础 Git 工作流
{
"customButton.buttons": [
{
"id": "git-status",
"name": "📊 Status",
"command": "git status",
"icon": "git-branch"
},
{
"id": "git-pull",
"name": "⬇️ Pull",
"command": "git pull",
"icon": "arrow-down"
},
{
"id": "git-push",
"name": "⬆️ Push",
"command": "git push",
"icon": "arrow-up"
}
]
}
🐳 Docker 容器管理
🏗️ Docker Compose 工作流
{
"customButton.buttons": [
{
"id": "docker-up",
"name": "🐳 Up",
"command": "docker-compose up -d",
"icon": "triangle-up",
"color": "#0000ff"
},
{
"id": "docker-down",
"name": "🛑 Down",
"command": "docker-compose down",
"icon": "triangle-down",
"color": "#ff0000"
},
{
"id": "docker-logs",
"name": "📋 Logs",
"command": "docker-compose logs -f",
"icon": "output"
}
]
}
📚 更多配置示例请查看:使用示例文档
🏗️ 技术架构
插件采用模块化设计,遵循 SOLID 原则:
📦 Command Dock Architecture
├── 📝 types.ts # 类型定义
├── ⚙️ configManager.ts # 配置管理
├── ⚡ commandExecutor.ts # 命令执行器
├── 🎛️ buttonManager.ts # 状态栏按钮管理器
├── 📊 panelProvider.ts # 面板数据提供者
├── 🎮 panelCommands.ts # 面板命令处理器
├── 🖥️ uiHandler.ts # 用户界面处理
└── 🚀 extension.ts # 主入口文件
🔧 技术栈
🏢 多工作区支持
模式 |
说明 |
功能 |
📁 单工作区 |
直接显示按钮列表 |
简洁的按钮管理 |
🏢 多工作区 |
按工作区分组显示 |
每个工作区独立配置 |
🔧 开发和构建
⚡ 快速开始
# 🔧 使用 Makefile(推荐)
make help # 📋 查看所有可用命令
make dev # 🛠️ 开发模式
make quick # ⚡ 快速开发周期
make status # 📊 查看项目状态
# 📦 或使用 pnpm 命令
pnpm install # 📥 安装依赖
pnpm run compile # 🔨 编译TypeScript
pnpm run watch # 👀 监听文件变化
pnpm run lint # 🔍 代码检查
pnpm run lint:fix # 🔧 自动修复代码问题
🔄 开发工作流
- 📝 修改代码
- 🔄 重新安装扩展:
make reinstall
- 🔄 重新加载 VSCode 窗口:
Cmd+Shift+P
→ "Developer: Reload Window"
🚀 发布流程
# 📈 发布补丁版本
make release-patch
# 🚀 发布次要版本
make release-minor
# 💥 发布主要版本
make release-major
# 🧪 发布预发布版本
make release-pre
🔍 调试插件
🛠️ 方法一:F5 调试(推荐)
- 🖥️ 在 VSCode/Cursor 中打开项目
- ⌨️ 按
F5
启动调试
- 🔍 在新的扩展宿主窗口中测试功能
📦 方法二:本地安装调试
- 📝 修改代码
- 🔄 运行
make reinstall
- 🔄 重新加载 VSCode 窗口
📁 项目结构
📦 vscode-extension-command-dock/
├── 🤖 .github/workflows/ # GitHub Actions 配置
├── 📜 scripts/ # 构建和发布脚本
│ ├── 📥 install-local.sh # 本地安装脚本
│ └── 🚀 release.sh # 发布脚本
├── 📝 src/ # 源代码
│ ├── 🚀 extension.ts # 主入口
│ ├── 📋 types.ts # 类型定义
│ ├── ⚙️ configManager.ts # 配置管理
│ ├── ⚡ commandExecutor.ts # 命令执行器
│ ├── 🎛️ buttonManager.ts # 按钮管理器
│ ├── 📊 panelProvider.ts # 面板提供者
│ ├── 🎮 panelCommands.ts # 面板命令
│ └── 🖥️ uiHandler.ts # UI 处理
├── 📚 docs/ # 文档
├── 🔧 Makefile # 构建脚本
├── 📋 package.json # 项目配置
└── 📖 README.md # 项目说明
🤝 贡献指南
我们欢迎任何形式的贡献!
🚀 快速贡献
- 🍴 Fork 项目
- 🌿 创建功能分支:
git checkout -b feature/amazing-feature
- 📝 提交变更:
git commit -m 'feat: add amazing feature'
- 📤 推送分支:
git push origin feature/amazing-feature
- 🔀 创建 Pull Request
📋 贡献类型
类型 |
说明 |
标签 |
🐛 Bug 修复 |
修复已知问题 |
bug |
✨ 新功能 |
添加新功能 |
enhancement |
📚 文档改进 |
改进文档 |
documentation |
🎨 代码优化 |
代码重构和优化 |
refactor |
🧪 测试 |
添加或改进测试 |
test |
📖 详细的开发指南请查看:开发指南
📞 技术支持
🏆 致谢
感谢所有为这个项目做出贡献的开发者!
📄 许可证

MIT License - 详见 LICENSE 文件
Made with ❤️ by the Command Dock team