💭

VSCodeのGitHub Copilotが色々便利になっていた件

2024/08/15に公開

VS Code

GitHub Copilot

Generative AI

tech

はじめに

知らない間にGitHub Copilotが結構進化していたので、それらの内容を紹介します。
GitHub Copilot Chatは知っていたのですが、単なるChatGPTみたいな会話機能を追加しただけだと思っていました。

要約

右クリックメニューや#fileのようなコマンドが登場し、それを入力するだけでChatに見てほしいコンテキストを伝えることができるようになった。
- ファイル単位だけでなく、選択した行やブロックに限定することもできる。
テストコードや新しいプロジェクトをコマンド一つで生成できるようになっている。
推薦の候補も複数を同時に比較できるようになった。
- 一度に最大10個くらい出る上、タブで保管できる。
ターミナルや編集中のファイルからコマンド一つでChatを立ち上げることができる。
- 特別なプロンプトを入力しなくても、開いた場所の文脈を読み取ってくれる。

右クリックメニューが充実している

右クリックで色々できることが増えています。この画像は、編集中のファイルで右クリックをしたときに出てきたものです。
Copilotに参照してほしいファイルを渡したり、ドキュメンテーションやテスト生成がワンクリックで出来るようです。下記に6つの項目の詳細を解説します。

1. ファイルをチャットに追加

この項目をクリックすることで、現在開いているファイルをCopilot Chatに参照するようにできます。
複数のファイルを読み込ませることもできます。

個人的には、MVCモデルでModelを参照させつつ、Controllerに新機能を書く場合などに役立っています。

2. エディターで開始する

クリックするとCopilot Chatのポップアップウィンドウが出ます。
⌘ + i, Ctrl + iのショートカットで出せるため、カジュアルにCopilot Chatを利用できるようになります。

ターミナルでも出すことができるのも便利です。

おかげさまで、基本的なコマンドをググることがほとんどなくなりました。

3. これを説明する

今開いているコードをCopilotに説明してもらうことができます。
コードブロックやマークダウンのセクションなどの単位で、今画面に表示されているブロックに絞って解説する範囲を限定することもできます。

フレームワークやプロジェクト固有の設定ファイルや、ベンダーファイルの説明は特にありがたいです。

4. これを修正する

警告やエラーとなっている箇所の修正を提案してくれます。

使ってみたところ基本エラー対応に限定されている感じで、クイックフィックスもCopilotが対応してくれるので、正直あんまり使い所はない気がします、、、

5. ドキュメントを生成する

下記のようにコメントを書いてくれます。

選択されている範囲だけコメントする点にご注意ください。
「関数内部のコメントは不要です。」というプロンプトを入力してEnterを押したところ、関数だけのドキュメンテーションをしてくれました。クリップボードツールにカスタムプロンプトを入れておくと捗りそうな雰囲気です。

クリックしたら既存のコードを書き換えるため、既存のドキュメントを修正する場合は、範囲を選択して⌘ + i, Ctrl + iでCopilotのエディターを開始して 「英語を日本語に」 などのプロンプトを入れる方が便利だなと感じました。
また、⌘ + EnterやCtrl + Enterで提案を受け入れることができるため、まとめてAcceptするときに便利です。

6. テストを生成する

ワンクリックでテストを生成してくれます。

画像赤丸部分を押すと新しいタブに提案を書き出してくれるので、保存すればテストを作成できます。
追加のプロンプトを書いたときレスポンスが来たことがなかったので、Copilot Chatを立ち上げて書いたほうがいいかもしれません。

変数名やコミットメッセージも提案してくれる

変数名の変更時にF2を押すと新たな変数名も提案してくれます。

⌘ + EnterやCtrl + Enterを押すと変更箇所のプレビューもしてくれます。

コミットメッセージは、下記の赤丸部分をクリックするとコミットメッセージを自動で生成してくれます。

過去のコミットを参考にしてくれるため日本語にあわせてくれましたが、ドキュメンテーションしただけなのにテストケースを新しく追加したような文言になってしまっています、、、

なお、アイコンをクリックすると何度でも新しいコミットメッセージを提案してくれます。
途中で書かれたコミットはCopilotが参考にすることはなく、完全に上書きされるようです。

入力候補を複数表示できる

入力後の推薦が出たタイミングで⌘ + EnterやCtrl + Enterを押すと新しいタブを立ち上げ、他の推薦をすべて表示してくれます。

Goのテストを新しいタブで立ち上げたときに、１０個のテストコードを提案してくれました。
これの素晴らしいところは、ショートカットキー一つで何度でも新しいタブで複数の提案をしてくれるところで、上の画像の別タブでも１０個の異なる提案をしてくれています。
今回紹介した機能の中で、個人的に一番気に入っています。

詳細や他の細かいAccept方法については、下記の公式ドキュメントをご覧ください。

キーワードで見てほしいコンテキストをCopilot Chatに指定できる

GitHub Copilot Chatを開いているときに⌘　 + /やCtrl + /を入力すれば「コンテキストのアタッチ」が立ち上がり、Chatに見てほしいファイルやコンテキストを指定することができます。

コンテキストのアタッチについて

最近開いたファイルも一覧に出してくれるため、使いやすいです。
なお、Chatのクリップマーク（画像の赤丸部分）を押しても同じ画面を出せます。

画像にある上４つの項目は主に選択箇所のみを解説するといった、ファイルの一部分だけをコンテキストとして渡したい際に利用するものです。

selection: 現在選択しているコードをChatに参照させる（あらかじめ選択してからこの項目をクリックする必要があります）
Terminal Selection: 現在選択しているターミナルをChatに参照させる（こちらも選択する必要があります）
VS Code API: VSCodeのAPIリファレンスを使用して、VSCode拡張機能の開発に関する質問に回答する。
シンボル: 選択したシンボルをChatに参照させる。

VS Code APIは拡張機能の開発時以外でも、 「インデントをスペース２つにしたい」 というようなVSCodeのメタ的な設定方法を教えてくれたりします。VS Code APIがない場合は開いているファイルのインデントを修正したコードを掲示しただけでした。質問に答えるだけで、ファイルの編集や作成などを自動でやってくれないのは歯がゆいです、、、

シンボルは変数や関数などのブロックごとにまとめたものです。

ワークスペース内の全シンボルを検索することができます。

スラッシュコマンドやチャットコンテキストを利用する

GitHub Copilot Chatでは、/や@、#を利用することでもChatに参照してほしい情報や特定の指示を指定できます。

個人的には#fileで参照してほしいページをすべて入れて、テストや新しいAPIを生やすのがおすすめです。

#fileを選べば検索のポップアップが出てくれるのでスムーズです。

下記のURLにすべてのコマンドがあります。

なにげに/clearが便利です。今まではチャットの☓ボタンを連打してました。
/newで新しいプロジェクトをファイル付きで作成できたのは面白かったですが、フォルダをネストできないのと、返信が前回の会話を覚えてくれないので、小規模のプロジェクトなどに用途が限定されるイメージです。

アップデートされた機能を使ってみて

GitHub CopilotはIDEと連携しているのに、コンテキストの参照がなんでこんなにもややこしいのだろうと思っていたのですが、アップデート機能を追いかけたらだいぶ楽になりました。
コーディングの生成AI利用はほとんどChatGPTに頼っていたのですが、半々くらいにはCopilotも活躍してくれています。

まとめ

Chatに参照してほしい文脈を伝える方法が整備されてきた。
- 範囲選択も影響があるので使い分けると便利。
- 編集中のファイルやターミナルからChatを開くことができ、文脈も読み取ってくれる。
コミットメッセージや変数もCopilotが提案してくれる。
推薦候補をショートカットキーで安定して生成できる。
特定のコマンドは過去の文脈を参照してくれないので注意が必要。