Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>JP File FilterNew to Visual Studio Code? Get it now.
JP File Filter

JP File Filter

JunpeiWada

|
1 install
| (0) | Free
エクスプローラー上部にボタンを追加し、ツリー表示のままファイル名で絞り込めるようにする。
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

JP File Filter

VS Code のエクスプローラー上部に**絞り込みボタン(漏斗アイコン)**を追加する拡張。押すとエクスプローラーのファイル名フィルタ(標準の Find、⌥⌘F / Ctrl+Alt+F)が開き、ツリー表示のままファイル名で絞り込める。ショートカットを覚えなくてよい。

使い方

  1. エクスプローラー上部の「新しいファイル」「折りたたむ」などが並ぶ所にある漏斗アイコンを押す (アイコンはエクスプローラーにマウスを乗せると表示される)
  2. 出てきた入力枠にファイル名の一部を打つ
  3. 入力枠の右側の漏斗アイコン(フィルタモード)を ON にしておくと、一致したファイルとその親フォルダだけがツリーに残る(OFF だとハイライトのみ。ON/OFF は VS Code が記憶する)
  4. Esc で元のツリーに戻る

コマンドパレットからは JP File Filter: ファイル名で絞り込み でも開ける。

仕組み

標準コマンドを 2 つ順に呼ぶだけ(src/extension.ts)。

  1. workbench.files.action.focusFilesExplorer … エクスプローラーのツリーにフォーカスを移す
  2. list.find … フォーカス中のツリーで Find(⌥⌘F 相当)を開く

ボタンは contributes.menus["view/title"] で view == workbench.explorer.fileView に追加している。activationEvents は空(コマンド実行時に自動で起動する)ので、VS Code の起動を遅らせない。

開発

npm install
npm run compile     # TypeScript コンパイル
npm run watch       # 監視コンパイル

VS Code でこのフォルダを開いて F5(拡張機能開発ホスト)で動作確認。

インストール

Marketplace から「JP File Filter」で検索してインストールする(Settings Sync の拡張同期で他のマシンにも入る)。

手元のソースから入れる場合:

npm run install-local   # コンパイル → VSIX 生成 → この VS Code にインストール(一発)

インストール後はウィンドウをリロード(⌘⇧P →「Developer: Reload Window」)すると反映される。

公開

docs/publish.md を参照(npm run publish:patch で patch を上げて公開)。

ライセンス

MIT License — Copyright (c) 2026 Junpei Wada

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
  • Your Privacy Choices
  • Consumer Health Privacy
© 2026 Microsoft