【VSCode】Genie AIにカスタムプロンプトを登録してらくらく開発ライフに近づこう

2024-05-29Genie AI, OpenAI, Visual Studio Code, VSCode

はじめに

こんにちは。システム開発推進部の坂本です。
突然ですがみなさんはAIと仲良くやれていますか？私はChatGPTと雑談したり、調べるの面倒だなーと思ったときにざっくり質問投げたり（正確性がそれほど求められないものに限っています）と、それなりにうまくやれているはずです（たぶん）。特に業務においてはGenie AIというVSCodeの拡張機能に助けられています。
ということで、この記事では私が普段行っているGenie AIの活用法についてご紹介したいと思います。

Genie AIとは？

まず本題に入る前に、Genie AIとは何かについて軽く説明しておきます。
先ほども触れた通り、Genie AI（以下Genieとします）はVSCodeの拡張機能になります。
特徴としてはVSCodeでの開発中にアプリを移動せずエディタ内でAIとチャットができるほか、コードを選択して右クリックしGenieのメニューを選択することでソースコードの説明をしてくれたりバグを探してくれたりテストを生成してくれたりします。
インストールの仕方や簡単な機能説明はこちらのvscodeの拡張機能Genie AIを使ってみたという記事がわかりやすいのでぜひ参考にしてみてください。
なお、Genie使用するにはOpenAIのAPI Keyが必要になります。API Keyを取得するにはChatGPT Plusである必要があるので、ここから先は加入している前提で進めさせていただきます。

業務で使用する場合

Genieを利用する前に、会社のルールによっては会話の履歴を残さないよう指示されている場合もあるでしょう。その場合は以下の設定のチェックを外しておいてください。
設定画面はGenieのタブを開いた右上の歯車マークから遷移することができます。

カスタムプロンプトを設定しよう

では改めて本題に入ります。
Genieにはカスタムプロンプトが2つまで登録できます。これで各々使いやすくGenieをカスタマイズできるわけです。ちなみに私はそこに「次のコードのJSDocを日本語で生成してください。」と設定しています。コード上でJSDocを生成したい関数部分を選択してカスタムプロンプトを選択するだけでGenieが代わりに作ってくれるので、地味に便利です（この手のコメント記載するの面倒ですよね）。
やり方ですが、設定画面の中にある Genieai › Custom Prompt1内のテキストエリアへ以下のように任意のカスタムプロンプトを設定します。

なお、テキストエリア狭くて使いづらいな〜という場合は ctrl+shift+pを押してユーザー設定（ settings.json）を開き、以下の記述を追加することで同じ設定を行うこともできます。

"genieai.promptPrefix.customPrompt1": "任意のプロンプト",

"genieai.promptPrefix.customPrompt1-enabled": true,

ついでにやっておきたい設定

『Genie AIとは？』の項で『Genieはコードを選択して右クリックしGenieのメニューを選択することでソースコードの説明をしてくれたりする』と述べましたが、ついでにそのあたりの設定もしておきましょう。
Genieai › Prompt Prefix: Explainや Genieai › Prompt Prefix: Find Problemsの欄にある英文で記載されているプロンプトの最後に in japaneseと付けて日本語で返ってくるようにしておきます。これがないと全部英語で説明が返ってきます。