VS Codeのファイルツリーをフィルターする拡張機能をつくりました

概要

ファイルやディレクトリが多いプロジェクトで開発するとき、VS Codeのファイルツリーでファイルが見つからなかったり、目が滑る経験はないでしょうか。特定の機能を開発しているとか、今関心のあるファイルは少ない場合も多いと思います。 そんなあなたのために、VS CodeのExplorer viewのファイルツリーを絞り込んで表示する拡張機能をつくりました。

下のスクリーンショットのように、通常のツリーの下に絞り込まれたツリーが表示されます。

f:id:ryotarai:20220311104417p:plain

marketplace.visualstudio.com

どこかのだれかがすでに作ってそうですが…（もし類似拡張機能があったら教えて下さい）

つかいかた

インストール

Eda - Visual Studio Marketplace

インストールすると、Explorerの下の方にEDAが表示されるかと思います。

特定のファイルを表示する

  1. Explorerのツリーからファイルを右クリック
  2. Eda: Add a File

正規表現でファイルを絞る

  1. コマンドパレットを開く (Ctrl(Cmd)-Shift-P)
  2. Preferences: Open Workspace Settings (JSON)
  3. 以下のように、パターンを設定する
"eda.profiles": {
  "default": {
    "patterns": [
      {
        // includeFiles, excludeDirs, excludeFilesはワークスペースフォルダから相対パスにマッチします

        // この正規表現にマッチしたファイルが表示されます
        "includeFiles": ["\\.ts$"],
        // この正規表現にマッチしたディレクトリは除外されます
        // 表示が重い場合、.gitやnode_modulesなどのファイル数が多いディレクトリは除外しておくことをおすすめします
        "excludeDirs": ["^\\.git/", "^node_modules/"],
        // この正規表現にマッチしたファイルは除外されます
        "excludeFiles": ["\\.d\\.ts$"]
      }
    ]
  }
}

Ctrl(Cmd)-Pのようにファイルを開きたい

コマンドパレットからEda: Open a Fileを選択すると、それっぽいものが出てきます。

{
  "key": "alt+p",
  "command": "eda.openFile"
}

みたいにキーボードショートカットを設定しておくと、Alt(Option)-Pで開けて便利。

リポジトリ

github.com