【AI】ChatGPTのVSCode拡張機能「ChatGPT – Genie AI」で作業効率と精度を爆上げする方法！

「VSCodeにChatGPT！？」こんな拡張機能があったとは！驚きました。

では、プログラマ必見の情報をお伝えしていきます。

はじめに

今回は、VSCodeにChatGPTの拡張機能を入れて作業効率と精度を爆上げする方法について紹介していきます。

ChatGPTとは何か、どんな機能があるかについては、以下の記事をご参照ください。

さっそく本題に入りたいと思います。

VSCodeは多くのプログラマーが愛用する高機能なコードエディタですが、コーディングの際の問題や課題を、すべて解決してくれるわけではありません。

これらの問題や課題を解決するためには、ChatGPTの拡張機能が役立つでしょう。

ChatGPTは、人間との自然な会話だけでなく、コード生成やテスト作成などの機能も提供します。

VSCodeにChatGPTの拡張機能を入れることで、以下のようなメリットがあります。

以上のようにVSCodeにChatGPTの拡張機能を入れることで作業効率と精度が爆上がりです。

あなたもぜひ試してみてください。

※この記事を最初に書いた当初は以下ような「ChatGPT」の画面でしたが、「ChatGPT - Genie AI」の登場によりこの情報は古くなってしまいました。

まだ上記の画面の方は、「ChatGPT」をアンインストールして「ChatGPT - Genie AI」をインストールすることをご検討ください。

ChatGPT [deprecated（非推奨）]となっており、「try this extension instead」のリンクをクリックすると、「ChatGPT - Genie AI」が表示されます。

「Genie AI」はランプのアイコンなので、このネーミングは「アラジンと魔法のランプ」のランプの精「ジニー」と関係がありそうですね。

「ChatGPT」から「chatgpt - genie ai」に変更されたことにより、AIの種類がGPT-4、GPT-3.5、GPT3またはCodexモデルから選択できるようになりました。

また、エディタまたはサイドバーの会話でストリーミング回答を取得することができます。

ストリーミング会話のサポートもあり、応答を停止してトークンを保存することができます。

また、1クリックまたはキーボードショートカットでファイルを作成したり、コードを修正したりすることもできます。

「ChatGPT - Genie AI」のインストールと設定方法は、以下のような手順です。

VSCode 左下の拡張機能アイコンをクリック
検索ボックスに「chatgpt」と入力し、ChatGPT拡張機能を見つける
インストールボタンをクリックして、拡張機能をインストール
API Key認証（※2）
- 「Use OpenAI API Key integration」を選択
  - OpenAIでAPI Key を取得することが必要
    - 従量課金（1000トークンあたり0.002ドル）

以上がChatGPTの拡張機能のインストール方法です。

※2. API Key（ChatGPTを利用するために必要な認証キー）

「ChatGPT - Genie AI」の拡張機能画面を開き、歯車アイコンをクリックします。

「Genie ai > Open ai Model」で規定ではgpt-3.5-turbo ですが、モデルを変えたい場合は、12種類の中から選んで変更してください。

コーディングに関することは、gpt-3.5-turboで十分だと思いますが、なにか深い内容（？）のChatをしたい場合は、gpt-4 を選ぶと良いでしょう。

ChatGPTの拡張機能の歯車アイコンから「拡張機能の設定」を開きます。

スクロールして、以下のような「ChatGPT > Prompt Prefix: Add ○○○○」の箇所を探します。

Chatgpt › Prompt Prefix: Add Comments
The prompt prefix used for adding comments for the selected code

これらはプロンプトの下に並んでいるボタンに対応しています。

例えば・・・

コードを選択して「Add comments」ボタンをクリックすると、「次のコードにコメントを追加して：選択したコード・・・」という指示がChatGPTのプロンプトに投げられます。

つまりここが英語のままだとChatGPTに対して英語で指示が出て返答も英語になりますが、ここを日本語にすることで日本語の説明やコメントが返ってくるようになるということです。

では、赤枠で囲んだ部分は最初、英語で書かれていますが、以下のように日本語に訳していきます。

Chatgpt › Prompt Prefix: Add Comments（コメントを追加）
- 変更前「Add comments for the following code」
- 変更後「次のコードにコメントを追加して」
Chatgpt › Prompt Prefix: Add Tests（テストを追加）
- 変更前「Implement tests for the following code」
- 変更後「次のコードのテストを実装して」
Chatgpt › Prompt Prefix: Complete Code（コードを補完）
- 変更前「Complete the following code」
- 変更後「次のコードを完成させて」
Chatgpt › Prompt Prefix: Explain（コードの説明）
- 変更前「Explain the following code」
- 変更後「次のコードを説明して」
Chatgpt › Prompt Prefix: Find Problems（問題を見つける）
- 変更前「Find problems with the following code」
- 変更後「次のコードで問題を見つけて」
Chatgpt › Prompt Prefix: Optimize（コードを最適化）
- 変更前「Optimize the following code」
- 変更後「次のコードを最適化して」