1.記事概要と背景
本記事は、Claude CodeがVSCodeで開いているファイルパスを取得するための拡張を作成した記録です。
a. @マークで階層の深いパスを指定するのは煩わしい
CursorやClaudeCodeでは、@マークを記載すると、プロジェクトフォルダ内のパスが指定できます。
最初は便利だと思うのですが、ファイル階層が深いとめんどくさくなります。
なので、CursorやClaude Codeだと、開いているファイルを認識してくれるので、「開いているファイルを読み込んで」のように指示することが増えると思います。
b. 2025年7月時点:Claude CodeがIDEで開いているファイルを取得できないことがある
Claude CodeはIDE連携機能があります。連携していれば以下の条件なら開いているファイルを取得できます。
・チャット
・カスタムスラッシュコマンドのプロンプト
でも、
ただ、カスタムコマンドプロンプトが、別のファイルにプロンプトを記載してたり、サブエージェントではエディタで開いているファイルパスはとれないです。これは、2025年7月時点の状況です。
・サブエージェント
・外部ファイルとして定義したプロンプト(
上記の「外部ファイルとして定義したプロンプト」とは、カスタムスラッシュコマンドのプロンプトを別ファイルから読み込む場合などがあります。
プロンプトを共有したい場合などに外部ファイルに記載して読み込むことはあると思います。
サブエージェントによって作業を細かくわけつつ、コンテキストサイズを効率的に使いながら移譲するのはいいけど、作業ファイルの指定を楽にしたい場合、直接パスを指定しないと行けないのは煩わしいです。
これはそのうちClaude Codeも改修を加えるのではないかと思いますが、とりあえずは、ないならAIに機能を作らせればよいと思います。
c.MCPサーバなどがある気もするが...
Claude Codeには、ツールとして「mcp__ide__getDiagnostics 」というIDEの状態を取得するMCPサーバが標準でインストールされています。でも、これを実行しても、今開いているファイルパスは取得できなかったです。
いろいろしてみたのですが、私は取得できなかったので、もっと効率的なやり方があれば知りたいです。
とりあえず、分からなければAIにつくらせればいいやと思い、VSCode拡張をつくってみました。
2.VSCodeの拡張作成
これはAIに聞けばすぐに作り方やコードも教えてくれます。多分30分もあればできてしまいます。以下、作った内容をAIに整理させました。以下は、その内容。
VSCode 拡張機能の開発とパッケージ手順
このドキュメントは VSCode の拡張機能を自作し、.vsix
ファイルにまとめてインストール可能な形式にする手順をまとめました。
⭐ 1. 開発環境の準備
Node.js & npm または Bun のインストール
[Node.js + npm]
winget install OpenJS.NodeJS.LTS
[Bun]
curl -fsSL https://bun.sh/install | bash
⭐ 2. 開発テンプレートの作成
Yeoman テンプレート (npm 環境)
npm install -g yo generator-code
yo code
-
New Extension (TypeScript)
を選択
Bun 環境の場合は手動で src
, package.json
などを作成
⭐ 3. コマンド実装例
src/extension.ts
:
import * as vscode from "vscode";
import * as http from "http";
export function activate(context: vscode.ExtensionContext) {
const server = http.createServer((req, res) => {
if (req.method === "POST" && req.url === "/get-current-path") {
const editor = vscode.window.activeTextEditor;
const filePath = editor?.document.uri.fsPath || "No file open";
res.writeHead(200, { "Content-Type": "text/plain" });
res.end(filePath);
} else {
res.writeHead(404);
res.end("Not Found");
}
});
server.listen(37900, () => {
console.log("Server running at http://localhost:37900");
});
context.subscriptions.push({ dispose: () => server.close() });
}
⭐ 4. TypeScript ビルド
bun run tsc
# or
npm run compile
⭐ 5. package.json
の設定
"main": "./dist/extension.js",
"activationEvents": ["onStartupFinished"],
"contributes": {
"commands": [
{
"command": "extension.getCurrentFilePath",
"title": "Get Current File Path"
}
]
}
⭐ 6. README.md の作成
拡張機能の概要、使い方、curl の例などを記述
⭐ 7. .vsix パッケージ化
vsce
のインストール
npm install -g vsce
# or
bun add -g vsce
パッケージ化
vsce package
.vsix
ファイルが出力される
⭐ 8. 拡張機能のインストール
コマンドで
code --install-extension your-extension-name-0.0.1.vsix
GUI から
Ctrl+Shift+P
Extensions: Install from VSIX...
-
.vsix
を選択
⭐ 9. 拡張機能のアンインストール
コマンドで
code --uninstall-extension publisher-name.extension-name
GUI から
- 拡張機能ビュー (
Ctrl+Shift+X
) - 拡張を検索
- 歯車アイコンから「アンインストール」
📃 推奨ディレクトリ構成
my-extension/
├── src/
│ └── extension.ts
├── dist/
│ └── extension.js
├── package.json
├── tsconfig.json
├── README.md
├── .vscode/
│ └── launch.json
📘 参考リンク
以上がVScodeの拡張作成手順です。
上記の通りつくればすぐに拡張が作れます。詳しいことはAIに聞くか、ネットで調べたらいくらでもでてくると思います。
一つポイントは、README.mdはデフォルトのままだとvsixファイル作成時にエラーとなります。なので、AIにREADME.mdを作らせてください。
4.利用方法
上記の拡張は、IDEにインストールしたら、以下のコマンドでパスが取得できます。
curl -X POST http://localhost:37900/get-current-path
これをClaude Codeに実行させるプロンプトをかけば、今開いているパスを確実に取得できます。