VSCode で簡単に FileSystem MCP を インストールできたのネ！？

背景

FileSystem MCP を入れる際に、勘違いが二つほどあったので、躓き記録として残しておく

Claude For Desktop が必要だと思ってた

以下オフィシャルから飛ぶと

ここに来るわけだが・・

初っ端に、claude_desktop_config.json にってなってたら勘違いしませんかね？

公式じゃないやつを入れた

で、Claude For Desktop なんて入れられねーと思ったので、他を探して以下を入れた

開発者は、草生えまくりエンジニアなので、たぶん大丈夫なんだけど、コード確認しないとやっぱり会社では使いにくいなと・・

簡単な入れ方

前提

• npm

これは用意しておかないといけないとは思うので、windows なら、Node Version Manager で入れておくのが楽

手順

1. mcp.json を用意する

プロジェクトの直下に .vscode フォルダを作成して、mcp.json を作成する

2. mcp.json が開かれたら、Add Server を選択

3. NPM Package を選択して、@modelcontextprotocol/server-filesystem を指定

npm package name

@modelcontextprotocol/server-filesystem

4. ServerID を入れる。

デフォルトのままで困るなら修正を

5. あとは、適当なパスを追加して、完了

すると、こんな感じで設定される筈。

パスの入力は、VS Code で パスのコピー で取得して渡せば OK
勝手に、バックスラッシュエスケープつけて設定されます。

6. あとは起動して、Copilot Agent で使えるか確認しておわり

ここから起動して、パスとかでエラーがあれば修正

エラー確認は、出力(Output) ウィンドウで
※CTRL + SHIFT + U で

あとがき

なんというか、最近はほんとに簡単に使えるように色々開発してくれていて頭が下がります

最近感動した VS Code まわり

• VS Code の Web Documents のリンクから、Local の対象設定へ飛べる。
  • 調べて開く手間がなくなったのはとてもありがたい
• Agent の MCP 設定のとこから、他のMCP Tool も簡単に入れられる
  • 拡張機能を探して入れるだけ、とか、もう誰でもやれますね
• 今回の Add Server も

こういう UX を開発できる人になりたいものですね