✏️

VS Code のちょっとした拡張機能を作った： Explorer でフィルタして選択したフォルダ・ファイルにフォーカスを移動する

に公開
VS Code
idea

はじめに

「まずこのディレクトリを開いてから、中のファイルをエクスプローラーで開きたい」── 日常的によくある操作なのに、意外とスマートにできません。

僕自身、このちょっとした不便さにストレスを感じることが多く、自分用に小さな VS Code Extension を作ってみました。

作った VS Code Extension の概要

今回作ったのは、Explorer 上でフィルタして選択したフォルダやファイルにフォーカスを移動できる VS Code Extensionです。

https://github.com/karur4n/vscode-explorer-filter

何がうれしいか

  • Explorer でファイルやフォルダを検索したあと、そのままツリー上で構造を確認できる
  • 任意のフォルダにジャンプして、すぐに次の操作（ファイルを開くなど）に移れる

なぜ作ったか

動機は「Neovim で得た体験を Cursor に持ってきたい」というものでした。

Neovim プラグイン folke/snacks.nvim の Explorer がとても快適で、その一部を VS Code（Cursor）でも再現できないかと考えました。

以降は開発する上での苦労や、Tips が続きます。
拡張は地味に便利なのでぜひ使ってみてください 🔥

実装の苦労

実装にあたって最も苦労したのは、VS Code の API が直接「Explorer で選択中のアイテム」を取得できない点でした。

Stack Overflow に同様の問題に対する質問があり、参考にしました。

visual studio code - Get focused Explorer folder or file in an extension when command triggered by a shortcut, not by context menu - Stack Overflow

対応方法としては以下です。

  1. copyFilePath コマンドを呼び出して、現在選択されているアイテムのパスをクリップボードにコピーする
  2. そのクリップボードの内容を取得して、拡張内で利用する

結果的に動作自体はシンプルですが、前述したように副作用として「クリップボードが上書きされる」という問題が発生します🫩

改善案

現状の list.find を使う前提だと体験に限界があります。例えばファイルパスに対してもっと Fuzzy にマッチしてほしいなどの希望もあります。ファイルパス packages/server/src/features/lottery/components/foo.tsx に対して、server lottery でマッチしてほしいとか。

本格的に改善するなら、独自の View, Filter を実装するなど余地がありそうです。

これから VS Code 拡張を作りたい人への開発 Tips

以下 雑メモ

  • プロジェクトのセットアップ
  • 調査
    • VS Code のコマンドとしてどういうものが使えるか
      • VS Code のキーボードショートカット画面の一覧からコマンド名や when 式から内容を推測した
    • コンテキストキー
      • 今回 list.find が実行されている時にだけ有効なキーバインドを設定したかった
      • list.find が実行されている時をどうやって調べるか
      • コマンドパレットから Inspect Context Keys を実行すると、Developer Tools のコンソールに現在のコンテキストキー一覧が出力される
        • Cursor ではコンソールにコンテキストの内容が出力されなかったので、VS Code での実行を推奨します
      • コマンドパレット
        • Toggle Developer Tools
        • Inspect Context Keys

まとめ

今回の拡張はとても小さな機能ですが、VS Code の API の制約にぶつかりながら工夫して解決する過程は学びがありました。

自分の作業フローの中で感じたちょっとした違和感を形にすることで、日々の開発が確実に快適になります。そして何より、自分の手で開発環境を少しずつ作り替えていけるのは、とても楽しい体験でした。

作業効率の向上として、似たような工夫をした人がいれば教えてほしいです。

Discussion