VS Code拡張機能をプライベートで展開する場合にREADMEで画像が表示できず頑張った話

VS Code拡張機能を内部 で共有する場合に READMEで画像が表示 できず頑張った話 長瀬マキ VS Code拡張機能開発初心者なので、 もっといいやり方があれば#vscodejpで教えてください

自己紹介 • 名前 – 長瀬マキ（yumaでもマキでもOK) – X: @yuma_prog • コミュニティ – JAZUG, Azureわいがや会, Hack Everything. • Microsoft MVP for Azure(Cloud Native) 2024.08～ • 好き – Azure PaaS, C#, Terraform – GitHub Actions, GitHub Copilot

VS Code拡張機能、これから新規参入が増えそう • GitHub Copilot Chatをカスタムしたい！で初めて触ってみた – GitHub Copilotをカスタムできる? VS CodeのChat extensionsとは • 同じことを思って拡張機能を作成し、社内にだけ展開したくなる人は増えそう – 社内固有データを取得してCopilot Chatに投げたい、など Entensionsでやろう →これはGitHub Copilot • GitHub Copilot Chatの#vscodeAPIを使えば、初心者でも拡張機能開発がスルス ルできる

• https://zenn.dev/yuma_prog/articles/vscode-chat-extension

プライベートVS Code拡張機能 ミニマムに社内で共有したい＋更新頻度も高くない場合 • vsixファイル（拡張機能のパッケージファイル）をプライベートなどこかで共有 して各自ダウンロード＆インストール 簡単じゃん！と思いきや…

プライベートVS Code拡張機能 ミニマムに社内で共有したい＋更新頻度も高くない場合 • 開発した拡張機能をコマンドでvsixにパッケージ化 • vsixファイルをプライベートなどこかで共有して各自ダウンロード＆インストー ル 簡単じゃん！と思いきや… READMEで画像が表示されない…！？

READMEに画像を表示させるには • どうやら参照する画像がパブリックな場所にないとダメ – パブリックな場所に画像があり、パッケージ化するときにそこを参照するようコマン ドで指定すれば相対パスも使える

READMEに画像を表示させるには • どうやら参照する画像がパブリックな場所にないとダメ – パブリックな場所に画像があり、パッケージ化するときにそこを参照するようコマン ドで指定すれば相対パスも使える • どうすればいいんだーとつぶやいていたら

画像をBase64エンコードしてREADMEに埋め込む • 単純にエンコード文字列を埋め込むだけだと、画像もMermaidも表示されない！ – パッケージ化するコマンド実行後、エンコード文字列前にリポジトリURLが差し込ま れてしまう ならば…

画像をBase64エンコードしてREADMEに埋め込む 1. vsixファイル生成後にzip化 2. 解凍して特定文字列（{repositoryURL}/images/…)を、その画像をエンコード した文字列に置き換え 3. 再zip化 4. 拡張子をvsixに変える 同じ手順でgifもいける！ パッケージ化した後のREADMEに手を加えるため、 READMEはそのままの書き心地＋プレビューも確認 できる ※なんか動作が重くなった気がした、これが原因なの かな…

宣言して自らを追い込む 今回の内容をもっと丁寧にまとめて 来週中にはZenで公開します！ 追記：公開しました 社内でのみ共有したい自作VS Code拡張機能のREADMEで画像とMermaidの図が表示できな い問題を解決した

• https://zenn.dev/yuma_prog/articles/vscode-private-extension-readme-image