VSCode Automation MCP

VSCode自动化MCP服务器

](https://www.npmjs.com/package/vscode-automation-mcp) 

A. 模型上下文协议（MCP） 服务器，使AI代理能够 VSCode的自动化和控制：使您的AI助手能够与VSCode UI交互、执行命令、检查DOM、读取编辑器内容以及执行复杂的自动化工作流程。

建在上面 vscode扩展测试仪，此mcp服务器非常适合：

• 人工智能辅助VSCode扩展开发 -让AI代理测试并与您的扩展交互
• 自动化UI测试 -构建由AI驱动的自动化脚本
• 开发工作流程自动化 -自动化重复的VSCode任务
• 扩展调试 -检查UI状态、DOM结构和诊断

🚀 特性

• DOM检查 -获取完整的DOM结构、UI区域和可访问性树，以了解AI
• 执行VSCode命令 -以编程方式从命令面板运行任何命令
• UI自动化 -单击元素，键入文本，浏览UI
• 键盘输入 -按组合键、快捷键和特殊键
• 文件操作 -在特定行和列打开文件
• 截图 -捕获VSCode窗口进行调试和验证
• 元件检查 -获取UI元素的详细信息
• 元素查询 -查找与具有属性的选择器匹配的多个元素
• JavaScript执行 -在VSCode窗口中运行任意JS（如DevTools控制台）
• 诊断 -“问题”面板中的访问错误和警告
• 编辑器内容 -阅读并验证编辑器内容
• Webview支持 -与扩展Web视图交互
• 等待与同步 -等待元素、文本或空闲状态
• 通知 -获取、关闭和处理通知
• 对话 -处理输入框、快速选择和确认对话框
• 智能感知 -触发完成、获取项目、选择建议
• 代码导航 -转到定义、悬停工具提示、签名帮助
• 上下文菜单 -打开上下文菜单并与之交互
• 输出通道 -读取VSCode输出通道和扩展日志
• 控制台日志 -捕获和过滤浏览器控制台日志
• 性能指标 -内存使用情况、DOM统计数据、计时信息

📋 需求

• Node.js >= 18.0.0
• Internet连接 （首次运行下载VSCode和ChromeDriver）

备注：服务器在首次运行时会自动下载一个独立的VSCode实例和匹配的ChromeDriver。它不使用您安装的VSCode-这可确保行为一致，并防止与主VSCode实例发生冲突。

📦 安装

快速入门（推荐）

无需安装！只需添加到您的MCP客户端配置中：

{
  "mcpServers": {
    "vscode-automation": {
      "command": "npx",
      "args": ["-y", "vscode-automation-mcp@latest"]
    }
  }
}

全球安装

npm install -g vscode-automation-mcp@latest

然后直接运行：

vscode-automation-mcp

来源

git clone https://github.com/sukarth/vscode-automation-mcp.git
cd vscode-automation-mcp
npm install
npm run build
npm start

⚙️ 配置

克劳德桌面版

添加到您的Claude Desktop配置文件中：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json\ 视窗: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "vscode-automation": {
      "command": "npx",
      "args": ["-y", "vscode-automation-mcp@latest"]
    }
  }
}

或者，如果全局安装：

{
  "mcpServers": {
    "vscode-automation": {
      "command": "vscode-automation-mcp"
    }
  }
}

VSCode（GitHub副驾驶/副驾驶聊天）

添加到您的VSCode settings.json 或 .vscode/mcp.json:

{
  "mcp": {
    "servers": {
      "vscode-automation": {
        "command": "npx",
        "args": ["-y", "vscode-automation-mcp@latest"]
      }
    }
  }
}

光标

添加到Cursor的MCP配置：

{
  "mcpServers": {
    "vscode-automation": {
      "command": "npx",
      "args": ["-y", "vscode-automation-mcp@latest"]
    }
  }
}

环境变量

您可以使用环境变量自定义服务器行为：

环境变量示例：

{
  "mcpServers": {
    "vscode-automation": {
      "command": "npx",
      "args": ["-y", "vscode-automation-mcp@latest"],
      "env": {
        "VSCODE_AUTOMATION_VERSION": "1.95.0",
        "VSCODE_AUTOMATION_STORAGE_PATH": "/path/to/storage"
      }
    }
  }
}

ChromeDriver兼容性：服务器会自动下载与VSCode/Electron版本匹配的正确ChromeDriver版本。您不需要手动管理ChromeDriver。

🛠️ 可用工具

命令工具

UI操作工具

检测工具

DOM检查工具

DOM导航工具

JavaScript执行和DOM查询工具

测试工具

键盘和输入工具

等待与同步工具

通知和对话工具

扩展测试工具

调试和性能工具

实用工具

📖 使用示例

执行命令

// Save the current file
await vscode_execute_command({ commandId: "workbench.action.files.save" });

// Format the document
await vscode_execute_command({ commandId: "editor.action.formatDocument" });

// Open settings
await vscode_execute_command({ commandId: "workbench.action.openSettings" });

单击UI元素

// Click by CSS selector
await vscode_click_element({ 
  selector: ".explorer-viewlet", 
  selectorType: "css" 
});

// Click by accessibility label
await vscode_click_element({ 
  selector: "Explorer", 
  selectorType: "accessibility" 
});

// Double-click a file
await vscode_click_element({ 
  selector: ".file-item", 
  selectorType: "css",
  doubleClick: true 
});

// Right-click for context menu
await vscode_click_element({ 
  selector: ".file-item", 
  selectorType: "css",
  rightClick: true 
});

键入文本

// Type into the focused element
await vscode_type_text({ text: "Hello, World!" });

// Type into a specific input and press Enter
await vscode_type_text({ 
  text: "search term",
  selector: "input.search-input",
  pressEnter: true 
});

// Clear and type with a delay (for autocomplete)
await vscode_type_text({ 
  text: "import React from 'react'",
  clear: true,
  delay: 50 
});

打开文件

// Open a file
await vscode_open_file({ filePath: "/path/to/file.ts" });

// Open a file at a specific line
await vscode_open_file({ 
  filePath: "src/index.ts", 
  line: 42 
});

// Open a file at a specific line and column
await vscode_open_file({ 
  filePath: "src/utils.ts", 
  line: 10, 
  column: 5 
});

拍摄屏幕截图

// Take a screenshot with default name
await vscode_take_screenshot({});

// Take a screenshot with custom filename
await vscode_take_screenshot({ 
  filename: "test-result-screenshot" 
});

获取诊断信息

// Get all diagnostics
await vscode_get_diagnostics({});

// Get only errors
await vscode_get_diagnostics({ severity: "error" });

// Get warnings
await vscode_get_diagnostics({ severity: "warning" });

检查DOM（用于AI代理）

// Get the full page DOM as a readable tree
await vscode_get_dom({});

// Get DOM of a specific element as JSON
await vscode_get_dom({ 
  selector: ".sidebar",
  format: "json",
  depth: 5
});

// Get raw HTML of an element
await vscode_get_dom({ 
  selector: ".editor-container",
  format: "html"
});

// Get the sidebar structure
await vscode_get_ui_structure({ region: "sidebar" });

// Get the editor area structure with more depth
await vscode_get_ui_structure({ 
  region: "editor", 
  depth: 8 
});

// Find all buttons on the page
await vscode_query_elements({ selector: "button" });

// Find elements with a specific role
await vscode_query_elements({ 
  selector: "[role='tab']", 
  limit: 10 
});

// Get the accessibility tree for semantic understanding
await vscode_get_accessibility_tree({});

// Get accessibility tree of a specific region
await vscode_get_accessibility_tree({ 
  selector: ".sidebar",
  depth: 6
});

增量DOM探索（适用于大型DOM）

// Step 1: Get top-level children of body
await vscode_get_element_children({ selector: "body" });

// Step 2: Drill into a specific child
await vscode_get_element_children({ 
  selector: ".workbench-container",
  depth: 2
});

// Get parent chain to understand context
await vscode_get_element_parents({ 
  selector: ".my-button",
  levels: 5
});

// Get siblings (useful for tabs, list items)
await vscode_get_element_siblings({ 
  selector: ".tab:nth-child(2)",
  direction: "all"
});

// Find all interactive elements in a region
await vscode_find_interactive_elements({ 
  selector: ".sidebar",
  types: ["button", "input", "link"]
});

// Search for elements by text/label
await vscode_search_dom({ 
  query: "Explorer",
  searchIn: ["text", "aria-label", "title"]
});

// For very large DOMs: dump to file and read incrementally
await vscode_dump_dom_to_file({ 
  filePath: "/tmp/vscode-dom.json",
  format: "json",
  depth: 15
});
// Then use file reading tools to explore sections

执行JavaScript（DevTools控制台样式）

// Get the document title
await vscode_execute_script({ 
  script: "return document.title" 
});

// Get Monaco editor models (VSCode internals)
await vscode_execute_script({ 
  script: "return window.monaco?.editor?.getModels()?.map(m => m.uri.toString())" 
});

// Click an element programmatically
await vscode_execute_script({ 
  script: "document.querySelector('.my-button')?.click(); return 'clicked'",
  returnType: "string"
});

// Run complex DOM manipulation
await vscode_execute_script({ 
  script: `
    const editors = document.querySelectorAll('.editor-instance');
    return Array.from(editors).map(e => ({
      id: e.id,
      visible: e.offsetWidth > 0
    }));
  `
});

// Access VSCode's internal APIs (if available)
await vscode_execute_script({ 
  script: "return typeof acquireVsCodeApi !== 'undefined'"
});

简单DOM查询（querySelector样式）

// Find a single element
await vscode_query_selector({ selector: ".my-button" });

// Find all matching elements
await vscode_query_selector({ selector: "button", all: true });

// Extract specific properties
await vscode_query_selector({ 
  selector: "input",
  all: true,
  properties: ["value", "placeholder", "type", "name"]
});

// Get element by ID
await vscode_get_element_by_id({ id: "workbench.parts.editor" });

// Get all elements with a class
await vscode_get_elements_by_class({ 
  className: "editor-container",
  limit: 10
});

// Get all buttons
await vscode_get_elements_by_tag({ 
  tagName: "button",
  properties: ["textContent", "aria-label", "disabled"]
});

// Get all inputs with their values
await vscode_get_elements_by_tag({ 
  tagName: "input",
  properties: ["type", "value", "placeholder", "name"]
});

键盘和输入

// Press keyboard shortcuts
await vscode_press_keys({ keys: "ctrl+s" }); // Save file
await vscode_press_keys({ keys: "ctrl+shift+p" }); // Command Palette
await vscode_press_keys({ keys: "ctrl+/" }); // Toggle comment

// Press keys multiple times
await vscode_press_keys({ keys: "ArrowDown", count: 5 });

// Focus on a specific element first
await vscode_press_keys({ 
  keys: "Enter",
  selector: ".my-button"
});

// Scroll within an element
await vscode_scroll({ direction: "down", amount: 500 });
await vscode_scroll({ selector: ".sidebar", direction: "bottom" });

// Drag and drop
await vscode_drag_drop({
  sourceSelector: ".file-item:nth-child(2)",
  targetSelector: ".folder-item"
});

// Hover over element
await vscode_hover({ 
  selector: ".status-item", 
  duration: 1000 
});

等待与同步

// Wait for an element to appear
await vscode_wait_for_element({ 
  selector: ".notification",
  timeout: 5000
});

// Wait for element to disappear
await vscode_wait_for_element({ 
  selector: ".loading-spinner",
  present: false,
  timeout: 10000
});

// Wait for specific text
await vscode_wait_for_text({ 
  text: "Build succeeded",
  selector: ".terminal",
  timeout: 30000
});

// Wait for VSCode to be idle
await vscode_wait_for_idle({ timeout: 5000 });

通知和对话框

// Get all notifications
await vscode_get_notifications({});

// Dismiss a notification by message
await vscode_dismiss_notification({ 
  messageContains: "Extension installed" 
});

// Handle input dialog
await vscode_handle_dialog({ 
  text: "my-new-file.ts",
  action: "accept"
});

// Get QuickPick items (Command Palette)
await vscode_press_keys({ keys: "ctrl+shift+p" });
await vscode_get_quick_pick_items({});

// Select a QuickPick item
await vscode_select_quick_pick_item({ 
  text: "Format Document" 
});

智能感知和代码导航

// Trigger completion
await vscode_trigger_completion({});

// Get completion items
await vscode_get_completion_items({ limit: 20 });

// Select a completion item
await vscode_select_completion_item({ 
  itemLabel: "console.log" 
});

// Go to definition
await vscode_go_to_definition({});

// Trigger signature help
await vscode_trigger_signature_help({});

// Trigger hover and get tooltip
await vscode_trigger_hover({ 
  selector: ".view-line span" 
});

// Open context menu
await vscode_open_context_menu({ 
  selector: ".file-item" 
});

// Get and click menu items
await vscode_get_menu_items({});
await vscode_click_menu_item({ itemText: "Rename" });

调试和性能

// Get console logs
await vscode_get_console_logs({ level: "error" });

// Get all recent logs
await vscode_get_console_logs({ limit: 50 });

// Clear console logs
await vscode_clear_console({});

// Get output channels
await vscode_get_output_channels({});

// Read from an output channel
await vscode_get_output_channel_content({ 
  channelName: "Extension Host" 
});

// Get extension logs
await vscode_get_extension_logs({ 
  extensionId: "my.extension" 
});

// Get performance metrics
await vscode_get_performance_metrics({});

// Get DevTools info
await vscode_get_devtools_info({});

验证UI状态

// Check if an element exists and is visible
await vscode_verify_element({ 
  selector: ".explorer-viewlet",
  selectorType: "css",
  shouldBeVisible: true 
});

// Check if element contains specific text
await vscode_verify_element({ 
  selector: ".statusbar",
  selectorType: "css",
  containsText: "TypeScript" 
});

获取编辑器内容

// Get the content of the active editor
const result = await vscode_get_editor_content({});
// Returns: { content: "...", editor: { fileName: "...", lineCount: ... } }

🔧 通用命令ID

以下是一些常用的VSCode命令ID：

文件操作

• workbench.action.files.save -保存文件
• workbench.action.files.saveAll -保存所有文件
• workbench.action.files.newUntitledFile -新建文件
• workbench.action.closeActiveEditor -关闭编辑器

导航

• workbench.action.quickOpen -快速打开（Ctrl+P）
• workbench.action.gotoLine -转到Line
• editor.action.revealDefinition -转到定义

视图

• workbench.action.toggleSidebarVisibility -切换侧边栏
• workbench.action.togglePanel -切换面板
• workbench.action.terminal.toggleTerminal -切换终端

编辑

• editor.action.formatDocument -设置文档格式
• editor.action.commentLine -切换行注释

Git

• git.commit -Git提交
• git.push -Git推送
• git.pull -Git拉取

🧪 测试MCP服务器

手动测试

1. 构建项目：

   npm run build
   npm run validate

1. MCP检查员测试（推荐）：

   npx @modelcontextprotocol/inspector node dist/index.js

这将打开一个web UI，您可以在其中交互式地调用每个工具。

1. 使用Claude Desktop进行测试：

- 将服务器添加到Claude Desktop配置中（请参阅配置部分） - 重新启动克劳德桌面 - 让Claude使用vscode_automation工具

1. 测试基本功能：

   # Start the server manually to check for startup errors
   node dist/index.js

服务器通过stdio进行通信，因此除非出现错误，否则您将看不到输出。

测试内容

• vscode_get_status -始终工作，返回服务器状态
• vscode_initialize -使用WebDriver启动VSCode（需要显示）
• 所有其他工具-需要 vscode_initialize 先被叫

测试注意事项

• 服务器使用vscode扩展测试仪，该测试仪启动一个真实的vscode实例
• 首次运行可能需要时间来下载ChromeDriver
• VSCode必须安装在系统上
• 需要显示器（或Linux上的虚拟显示器）

🐛 故障排除

未找到VSCode

确保VSCode已安装并可从命令行访问：

code --version

ChromeDriver问题

服务器使用ChromeDriver自动执行VSCode。如果您遇到问题：

1. 确保已安装Chrome/Chromium
2. 正确的ChromeDriver版本将自动下载
3. 检查其他自动化工具是否冲突

超时错误

如果操作超时：

1. 增加工具选项中的超时时间
2. 确保VSCode已完成加载
3. 呼叫 vscode_initialize 在其他操作之前

未找到元素

如果选择器找不到元素：

1. 使用 vscode_take_screenshot 查看当前状态
2. 尝试不同的选择器类型（css、xpath、可访问性、文本）
3. 检查元素是否在Web视图中（需要不同的处理）

🤝 贡献

欢迎投稿！请随时提交拉取请求。

1. 复刻仓库
2. 创建功能分支(git checkout -b feature/amazing-feature)
3. 提交您的更改(git commit -m 'Add some amazing feature')
4. 推到分支(git push origin feature/amazing-feature)
5. 打开拉取请求

📄 许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

🙏 致谢

• 模型上下文协议 -使这成为可能的协议
• MCP TypeScript SDK -用于构建此服务器的SDK
• vscode扩展测试仪 -为该服务器提供动力的自动化库
• Anthropic -用于创建Claude和MCP规范

______________________________________________________________________

内置于❤️ 通过 苏加特