VSCodeをMCPにする拡張機能「VSCode as MCP Server」を作った
Claude Desktop 等から Cline のようなコーディングを可能にする VSCode 拡張機能です！
インストール方法 & 使い方
まず VSCode 拡張機能をインストールします。
次に、MCP クライアント側の設定をします:
-
mcp-installerを使っている場合: 「vscode-as-mcp-server という MCP サーバーをインストールして」等でお願いすればインストールできます
-
その他: 例えば Claude Desktop の場合、claude_desktop_config.json にて
{ "mcpServers": { ... "vscode": { "command": "npx", "args": [ "vscode-as-mcp-server" ] } } }このように JSON を追加することで設定可能です。
最後に、拡張機能をインストールすると、VSCode のステータスバー右側に "MCP Server" が現れると思います。
上記のようなアイコンになっていればサーバーが立ちあがっています！
上記のように「 ∅ 」が表示されている場合は、サーバーが立ち上がっていません。クリックすることでサーバーを起動します。
コード編集ツール
diffを確認して変更を受け入れるか拒否するか決めることができます。拒否する場合は追加でフィードバック(拒否理由)を送ることができます。
また、型エラー等が発生した場合は即座にフィードバックされるため、LLM 側がすぐに修正することができます。
コマンド実行ツール & プレビューツール
- VSCode 内のターミナルでコマンドを実行する機能
- バックグラウンド/フォアグラウンド実行やタイムアウトを LLM が指定することができます
- VSCode 内ブラウザでのプレビュー機能
この動画では vite を実行したあとに、プレビューを自動で開いています。
複数 VSCode インスタンスの切り替え機能
複数の VSCode ウィンドウを開いている場合でも、常に1つのウィンドウのみが MCP Server になります。右下のステータスバーをクリックすると簡単に切り替えられます。
VSCode 内にインストールされた MCP サーバーの Relay 機能(Experimental)
VSCode 1.99 で VSCode 自体に MCP サーバーをインストールする機能が入りました。この "VSCode as MCP Server" 拡張機能では、インストールされている MCP サーバー(現在 Tool のみ)を更にリレーして公開します。
例えば、GitHub Copilot Extensionをインストールすると、下記の Tool が追加で利用可能になります(バージョン 1.296.1488 時点):
- copilot_searchCodebase
- copilot_semanticSearch
- copilot_searchWorkspaceSymbols
- copilot_listCodeUsages
- copilot_getVSCodeAPI
- copilot_findFiles
- copilot_findTextInFiles
- copilot_readFile
- copilot_listDirectory
- copilot_getChangedFiles
- copilot_createNewWorkspace
- copilot_getProjectSetupInfo
- copilot_installExtension
- copilot_createNewJupyterNotebook
- copilot_runVsCodeTask
- copilot_fetchWebPage
- copilot_findTestFiles
- copilot_getSearchResults
内蔵ツールリスト
-
execute_command
- VSCode 統合ターミナルでコマンドを実行
- background/timeoutを指定可能
-
code_checker
- 現在のコードのDiagnosticsリストを取得
-
focus_editor
- ファイルの特定の位置を前面に表示
-
デバッグツール
- list_debug_sessions: アクティブなデバッグセッションをすべて一覧表示
- start_debug_session: 提供された構成で新しいデバッグセッションを開始
- restart_debug_session: デバッグセッションを再起動
- stop_debug_session: 名前に一致するデバッグセッションを停止
-
text_editor
- VSCode のネイティブ API を使用したファイル操作
- 操作: view、str_replace、create、insert、undo_edit
-
list_directory
- ツリー形式でディレクトリの内容を一覧表示
-
get_terminal_output
- ID で特定のターミナルからの出力を取得
- background: true で実行したターミナルの出力を確認するのに利用
-
list_vscode_commands
- VSCode コマンドを一覧表示
-
execute_vscode_command
- 任意の VSCode コマンドを実行
-
preview_url
- VSCode の組み込みブラウザで URL を開く
使い方
まず VSCode 拡張機能をインストールします。
次に、MCP クライアント側の設定をします:
-
mcp-installerを使っている場合: 「vscode-as-mcp-server という MCP サーバーをインストールして」等でお願いすればインストールできます
-
その他: 例えば Claude Desktop の場合、claude_desktop_config.json にて
{ "mcpServers": { ... "vscode": { "command": "npx", "args": [ "vscode-as-mcp-server" ] } } }このように JSON を追加することで設定可能です。
最後に、拡張機能をインストールすると、VSCode のステータスバー右側に "MCP Server" が現れると思います。
上記のようなアイコンになっていればサーバーが立ちあがっています！
上記のように「 ∅ 」が表示されている場合は、サーバーが立ち上がっていません。クリックすることでサーバーを起動します。
モチベーション
2月にRoo Codeを使いすぎたせいで家計が数万円の赤字となり、Cursor を検討したのですが Cursor ももうすぐ従量課金になるとの情報を目にし、このままでは破産する！と危機感に駆られて作りました。
なのでかなりRoo Codeを意識した作りになっており、コードも多くをCline/Roo Codeから拝借させていただいています🙏
ぜひ使ってみて下さい！
バグ報告/フィードバックもお待ちしています！！！🙇
今後実装していきたい機能
- 公開する VSCode 内 MCP の選択機能
- LLM が Organize Imports(等の Save Action)の実行を選択できるようにする
- Roo Code のように WebView で承認/非承認を選択するボタンを作りたい
- VSCode のファイル履歴機能(タイムライン)との統合
- インスタントに自動承認のオンオフやツールのオンオフを切り替えられるようにする
- ポート番号変更機能
Discussion