Gemini CLI で開発した vscode-profiles-list
はじめに
簡単な VS Code 拡張機能である vscode-profiles-list を Gemini CLI で開発したので、そのときの備忘録を記事として公開することにしました。実装した機能が簡易なもののため、開発したコードについての技術的な説明はあまりしていません。Gemini CLI をどのように使って開発したかの説明となっています。
実際に開発した VS Code 拡張機能は、「VS Code のプロファイルに対応するフォルダを一覧表示する」というシンプルなものです。
きっかけ
VS Code のプロファイル機能を使っていますが、設定について調べたりするのに、VS Code の設定画面を使うと不便なときがあります。直接、設定ファイルを grap コマンドなどで検索したりしたいので、ファイルのパスを手軽に知る方法がないか調べていました。
いままで、~/.config/Code/User/profiles にプロファイル設定用のフォルダがあるのは知っていたのですが、次のように ID のような値となっていたので、どのプロファイルと対応しているのかが、すぐにはわかりませんでした。
$ ls ~/.config/Code/User/profiles/
39f1018a f34d09f
調べてみると、VS Code のプロファイルのフォルダ名は、vsc_profile.sh のようなコマンドで確認できることがわかりました。
たとえば、プロファイル名 Java というプロファイルがあるなら、Linux なら次のように cat コマンドと grep コマンドで確認ができます。
$ cat ~/.config/Code/User/globalStorage/storage.json \
| grep -A 2 -B 2 '"name": "Java"'
{
"location": "f34d09f",
"name": "Java",
"icon": "coffee"
},
これで表示される location がフォルダ名と対応していて、プロファイル名 Java 用の設定ファイルが置かれているフォルダのパスは ~/.config/Code/User/profiles/f34d09f となります。
ということで、~/.config/Code/User/globalStorage/storage.json を確認すれば良いことがわかりました。個人的には、これで十分で、今までだったらこれについての作業は終わりにしていたところでした。
今回は、Gemini CLI を使ったら、VS Code 拡張機能をすぐに開発できるのではないかと思いやってみたところ、実際に短時間でGitHub へ公開できたので、記事にすることにしました。
Gemini CLI
Gemini CLI は、Google のオープンソース AI エージェントで、詳しい説明は公式ブログのページ を参照してください。
これを使うと、プログラムの自動作成してくれて、開発作業が捗ります。
Python での実装
最初に、先程の Bash コマンドを提示しつつ、Python でプロファイルの一覧を作成するプログラムを作成しました。
Python は最近の Linux ディストリビューションでは標準搭載されていることが多く、システム系の処理でもよく使われています。実行環境が普及していることからも、今回のような簡単な処理を実行するスクリプトを実装するのに適しています。
自動で作成されたプログラム app.py は、それなりによくできていて、OS によって storage.json の絶対パスは変わる点を考慮した上で、きちんと name と location の対応関係がわかるようにフォーマットして、結果をコンソールに出力する機能を備えたものになりました。
実行すると、次のような結果となります。
$ python app.py
VS Code プロファイル一覧:
-------------------------------------------------------------------
名前: Python
ID (フォルダ名): 39f1018a
内部識別子 (location): 39f1018a
-------------------------------------------------------------------
Bash での実装
すぐに Python での実装ができたので、Windows の Git Bash など、Python が使えない環境のために Bash による実装も生成してもらいました。app.py という実装コードがあるので、これを移植するだけです。
これまで生成 AI を使ってきた個人的な経験からすると、今回のような OS が標準で提供している機能やテキスト処理をするライブラリの機能を組み合わせる程度の処理なら、生成 AI によるコード移植はすぐにできる印象です。
ということで、こちらもすぐに実装ができました。
こちらは JSON データの扱いが少し大変だろうと思っていたのですが、jq コマンドを使った実装になりました。Bash の機能をうまく使って処理されています。
実行結果は Python 版と変わりません。
$ bash app.sh
-------------------------------------------------------------------
名前: Python
ID (フォルダ名): 39f1018a
内部識別子 (location): 39f1018a
-------------------------------------------------------------------
ただし、これを Windows の Git Bash 環境で実行できるかというと、jq コマンドが動作するかに依存しそうです。
一応、Install jq with winget - winstall によると、winget でインストールはできるようなので、これが Git Bash で動作するなら使えるはずです。自分では未確認です。
winget install --id=jqlang.jq -e
VS Code 拡張機能での実装
以上で、ベースとなるコードは用意できたので、次の VS Code 拡張機能での実装をしました。さすがに、こちらは GUI プログラムへの対応となるため、それなりに複雑な処理となり、Gemini CLI と何度か対話をしながらの実装となりました。
VS Code 拡張機能のプログラムを開発するにあたって、プロジェクトの雛形を生成するには yo のコード生成機能が使えるとのことで、今回はこれを使っています。Your First Extension | Visual Studio Code Extension API などに説明があります。
npm install --global yo generator-code
yo code
Node.js のバージョンは 20.19.3 のものを使っています。
プロンプトでは、最初に app.py を VS Code 拡張機能に移植したいことと、実装にあたって質問があったら出すように依頼をしました。
すると、「一覧の表示方法について、サイドバーを使うか、パネルの出力タブを使うか」といった質問が出てきました。AI からの質問への回答にあたっては、質問をコピーして、各質問事項を指示する回答に書き換えてプロンプトへ入力としました。
たとえば、先程の質問に対しては「一覧の表示方法については、パネルの出力タブを使う」といったような編集をして回答するようにしました。
VS Code 拡張機能の実装関連のコードについては、生成された結果が一度に大量のコードとして出てくるため、レビューはしにくいという印象です。とはいえ、お約束的な部分は読み飛ばして、ロジック部分だけチェックすれば良いので、自分でコードを書くよりは明らかに楽です。
そうやって実装をしたところ、VS Code 拡張機能の実装方法についての知識はほとんどなかったのですが、１時間もかからずに実装ができてしまいました。単純な機能とはいえ、独力で実装しようとしたら、実装方法の調査から始めないといけなかったはずなので、かなり短い時間で対応できたということになります。
VS Code 拡張機能の動作確認
さて、実装が完了したので、VS Code 拡張機能の動作確認をしようとしたのですが、Gemini CLI が説明する方法では動きませんでした。
Gemini CLI は「F5」を入力して動作確認をするといった説明をするのですが、こちらで「F5」を入力しても動きがありません。代替方法を提案するように依頼しても、「F5」を入力する方法しか答えてくれません。
これまでの経験から、「F5」を入力するというのは、「デバッグ実行」のことのような気がしたので、自力で解決することにしました。作成したプログラムを VS Code で実行しようと、メインプログラムのコードを開いてから「実行とデバッグ」の画面にして、調べてみたのですが、うまく動きません。
仕方がないので .vscode/launch.json や .vscode/tasks.json の内容をコメントアウトして、シンプルな設定にしたところ、プログラムの実行ができるようになりました。
生成 AI 系のツールを使っていると、こういった実行環境や開発環境関連のトラブルについては、適切な対応がされにくいという印象を持っています。素人に近い人だと行き詰まるような気がしますが、実際のところどうなのでしょうね。
何はともあれ、「デバッグ実行」が動作すると、「拡張機能開発ホスト」というタイトルの VS Code の新しい画面が表示されます。そこでコマンドパレットを表示して「Show VS Code Profiles」のコマンドを実行します。
「Show VS Code Profiles」のコマンドを実行
すると、パネルの「出力」タブに「VS Code Profiles」の結果が次のように表示されるようになりました。
Reading VS Code profiles...
001. Python : 39f1018a
実は、最初は app.py と同じような表示にしてあったのですが、コンパクトに表示するように修正しました。プロファイル名が長い場合のことも考慮して、32文字以上は省略して ... を末尾につけるようにしてあります。
テストコードの追加
せっかくなので、テストコードの追加もしましたが、ここで結構時間が取られました。Gemini CLI は、GUI モードでのデバッグ実行をしようとして時間を浪費していたので、途中であきらめてコードの構成自体を見直すようにしました。
具体的には、次の関数を用意するようにして、関数のテストだけをするようにして、VS Code に依存する部分のテストについては省略することにしました。今回は、VS Code で動作するのは手動で確認したから省略ということにしました。
- storage.json の読み込みと解析用の関数（
getProfilesJson()） - プロファイル情報の JSON データを表示する形式にフォーマットする関数（
convertFromJsonToText(json)）
テスト用の JSON データファイルも用意しました。
これを使ったテストをするように Gemini CLI へ指示したところ、テスト実行も無事にできるようになりました。
テストについては、実行できる環境を用意しておくこと、重要と思われる処理についてテストできるようにしておくこと、というポリシーでいるので、こういった対応にしました。
今回のような、趣味で作成したプログラムについては、今後の更新をどれくらいするかわかりませんし、その環境を整備するのに時間をかける価値があるのか定かではありません。自動でテストできる部分については、できるだけ増やしたいところなのですが、手動で確認した方がやりやすい部分については割り切ることも大切だと考えています。
パッケージ化とリリース
短時間で VS Code 拡張機能が動作するようになったので、Zenn に記事を投稿することにしました。コードを記事に埋め込んでもよいのですが、GitHub で公開しておいた方が参考にしやすいはずなので、そうすることにしました。
ライセンスを MIT ライセンスにしておきましたが、Gemini CLI が自動で生成した部分が多いので微妙なところです。とはいえ、各コードには独自性の高い部分があまりなく、全体を vscode-profiles-list プロジェクトとしてまとめてあることに独自性があると考え、自分の名前を入れてあります。
VS Code 拡張機能をマーケットプレイスで公開するほどのものではないので、今回は GitHub のリリース機能を使って v0.0.1 をリリースしました。
README.md にパッケージ化の説明を追加し、GitHub に公開リポジトリを作成してコードとドキュメントを反映してから、作成したパッケージを GitHub のリリースページへアップロードしました。
まとめ
実際のところ、この拡張機能を使いたい場面があるかというと、自分の場合は cat と grep コマンドで済ませてしまいそうなのですが、Gemini CLI で手軽にリリースまで出来たので、公開してみたというところです。
今後、こういった公開コードや記事が増えていくことで、生成 AI の性能向上がさらに進むはずですが、そうやって高機能になった生成 AI が作り出すコードは誰のライセンスとするのが妥当なのか、今後、議論がされるのだろうなどと、思いました。
Discussion