ワークスペース内の画像のパスをパンッとはれるVSCode拡張をリリースした

はじめに

demo

ワークスペースにある画像のパスをそのまま or Markdown 形式でパンッと簡単にエディタに挿入できる VSCode 拡張、その名も SrcPan をリリースしました。

https://marketplace.visualstudio.com/items?itemName=IkumaTadokoro.srcpan

この VSCode 拡張機能には現時点で以下の機能があります。

ワークスペース内の画像ファイルをサイドバーに一覧表示する機能
選択した画像をサイドバーでプレビュー表示する機能
選択した画像のパスをそのまま or Markdown 形式でエディタに挿入する機能

なぜ作ったか

このブログは各記事を MDX で作成しています。記事には画像をしばしば挿入しているのですが、これに際して私が感じていた課題点は以下の 2 点です。

ブログコンテンツとブログ自体のコードが 1 つのリポジトリに共存しているため、画像以外のものがファイルエクスプローラーに表示されてしまい、画像を探すのが面倒である
astro では静的コンテンツのパスは「public」を省略して記述するルールだが、しばしば忘れる

これを解決するために、最初に述べたような「画像だけを一覧して、プレビューした上で、Markdown のパスですぐ挿入できる」VSCode 拡張を作りました。

何ができるのか

基本機能

srcpan-view

拡張機能をアクティビティバーで選択すると、2 つのペインが開きます。

上部は現在開いてるワークスペースに含まれる画像を、ディレクトリ構造そのままに表示するペインです。そして下部がプレビュー表示ペインで、上部で選択した画像をプレビュー表示します。

上部のペインで画像をホバーすると、リンク挿入ボタンが表示されます。このボタンをクリックすると、画像のパスをそのまま or Markdown 形式でエディタに挿入します。

【設定】挿入するパスのフォーマット変更

デフォルトでは、画像のパスをそのまま挿入します。しかし、astro では静的コンテンツのパスは「public」を省略して記述するルールなので、そのディレクトリにある画像だけは、最初のパス部分を省略した形式で挿入したいという要望がありました。これに対応するため、正規表現でフォーマットを変更したいパスと、変更後のパス形式を指定すると、その形式でパスを挿入できるようにしました。

例えばこのブログでは先のとおり astro のルールに合わせて「public」から始まるディレクトリでは、その一つ下の階層からのパスを貼り付けるようにしたいです。そこで、settings.json に以下のように設定します。

"srcpan.pathFormatRules": [
    {
        "pathRegExp": "^\\/public(\\/.+)$",
        "replacement": "$1"
    }
],

pathRegExp には正規表現を指定することができ、replacement には任意の文字列を指定することができます。pathRegExp にキャプチャグループを指定した場合は、replacement に$1のように指定することで、キャプチャされた部分を挿入することができます。この設定により以下のように、/publicから始まるパスでは、/publicの 1 つ下の階層から始まるパスを挿入できるようになりました。

本来のパス： /public../../assets/images/publish-srcpan/srcpan-view.png
挿入されるパス： ../../assets/images/publish-srcpan/srcpan-view.png

このルールは配列形式で指定するので、複数のルールを指定することができます。public ディレクトリ、assets ディレクトリでそれぞれ最初の階層を省略したい場合は以下のようにします。

"srcpan.pathFormatRules": [
    {
        "pathRegExp": "^\\/public(\\/.+)$",
        "replacement": "$1"
    },
    {
        "pathRegExp": "^\\/assets(\\/.+)$",
        "replacement": "$1"
    }
],

【設定】一覧から除外するディレクトリを指定

デフォルトではワークスペースに含まれる.gitignoreを読み取り、そこに含まれるディレクトリは表示から除外するようになっています（これ自体も設定: useGitIgnore を false にすることで無効化できます）。

// 無効にする場合
"srcpan.useGitIgnore": false

.gitignore にはないが、一覧に表示する必要ないディレクトリがある場合は、追加で設定を記述することで対象外とすることができます。例えばこのブログではpublic以外は記事を作成する際に不要です。そのため、src/, integrations/ それぞれのディレクトリを除外するように設定します。

"srcpan.excludePatterns": [
    "src/**/*",
    "integrations/**/*"
]

ややこしいですが、こちらは glob パターンを配列で指定します。本当はいずれのオプションとも正規表現か glob パターンのどちらかに寄せようと考えていたんですが、パスの方は置換後の文字列を宣言的にかけた方が良いと思い正規表現を採用し、除外するディレクトリの方は glob パターンで指定する方が一般的だと思い glob パターンを採用しました 😅。

今後の改修予定

現時点では必要最低限の機能（README もろくに書いてない）しか実装していないのですが、今後は以下のような機能を追加していきたいと考えています。

ファイルのアップロード・更新機能

現在のファイルツリーは、変更・更新・削除に追随して更新されるようにはなっているのですが、あくまでファイルの更新はエクスプローラーから実施する必要があります。

一応回避策として、下図のように SrcPan をエクスプローラーに D&D してドッキングすることで一つのサイドバーで完結させることができるのですが、サイドバーの表示領域が窮屈なのでどうにかしたいところです。

docking

ディレクトリの絞り込み

特定のディレクトリの画像のみ表示しているとはいえ、ファイル数が多いとそれでも探すのが大変です。そこで、ディレクトリを絞り込む機能を追加したいと考えています。 1 つの記事を書いている際に参照するディレクトリはせいぜい 1 つなので、記事名を入力して絞り込むか、現在開いているファイル名で絞り込む、みたいな機能があるといいかもです。

プレーン形式と Markdown 以外の形式でのパス挿入

これは今後自分の中で需要がどれだけ出てくるかにもよるのですが、import 文と HTML の img タグの形式でパスを挿入する機能があると便利かもしれないな〜と思っています。

おわりに

今回初めて VSCode 拡張機能を作ってみたんですが、環境構築が結構簡単で、API も多く想像よりも簡単に実装できました。パッケージ公開のためのvsceコマンドで*.vsixファイルを作ってしまえば、開発チーム内でのみ使用する Extension を作成することができ、チーム内の DX 向上の選択肢が増えたのは大きいですね。

今回作成した Extension は、こちらからインストールできます。ぜひお試しください。 README 含めてまだまだ整備できていないので、徐々に改善していきたいと思います（機能要望、バグ等あれば GitHub の Issue へどうぞ）！

余談：名前

「img の src をパンッと挿入できる」と「ソースパン（フライパン）」を掛けて「SrcPan」と名付けました。音優先でソースパン →「パンッと貼り付けられる」とこじつけましたが、たぶんこの擬音は「パンッ」ではなく、「シュッ」な気がしています 😅。