GitHub Copilot Tips and Tricks

by Yuichi Tanaka

Slide 1

Slide 1 text

GitHub Copilotでできること一挙ご紹介 2024年10月版

Slide 2

Slide 2 text

田中裕一プリンシパルソリューションズエンジニア GitHub @yuichielectric

Slide 3

Slide 3 text

本日のトピック GitHub Copilotに搭載されている様々な機能、使い方について「コード補完」、「チャット」、「エディタ機能への統合」、「Copilot Enterpriseでできること」というトピックに沿ってご紹介します。 ※ Visual Studio Code 1.95（2024年10月版）を前提としています。

Slide 4

Slide 4 text

コード補完いかに適切な文脈を渡すか

Slide 5

Slide 5 text

GitHub Copilot LLM 文脈提案

Slide 6

Slide 6 text

GitHub Copilot 文脈とは？ GitHub Copilot拡張によって、現在のファイルのカーソルの前後のソースコードや、別のタブで開いているファイルの中から、関連するコードスニペット（コメント含む）を選択し、優先順位、フィルタリングを経た上でプロンプトに追加される情報のこと。 https://github.blog/2023-05-17-how-github-copilot-is-getting-better-at-understanding-your-code/

Slide 7

Slide 7 text

GitHub Copilot 関連するファイルは常に開いておこうピンどめしておくと開き忘れを防ぐことができる。例） ● TypeScriptプロジェクトで使うライブラリの型定義ファイル（.d.tsファイル） ● テストコードを書く時のテスト対象のコード、もしくはその逆

Slide 8

Slide 8 text

GitHub Copilot C++/C#で自動的に追加される文脈直接参照しているヘッダーファイルは、開いているかどうかに関わらず文脈として自動追加 C++: Visual Studio Code: C/C++拡張 1.21以降 + GitHub Copilot拡張1.205以降 Visual Studio: 2022 17.12以降 C#: Visual Studio: 17.11以降 https://devblogs.microsoft.com/cppblog/improving-github-copilot-completions-in-vs-code-for-c-developers/

Slide 9

Slide 9 text

GitHub Copilot 名前は大事関連するコード箇所を探す上で、変数や関数の名前は大きなヒントとなる。一貫性のある命名規則を用い、同一の概念に対して異なる名前をつけないように気をつけましょう。後述する名前の提案機能も合わせて活用しましょう。

Slide 10

Slide 10 text

GitHub Copilot 良い提案を得るために ● 複数の提案がある場合もあるので、それを確認してみる。 ○ コマンドパレットで “GitHub Copilot: Open Completions Panel” ● コメントとして、欲しいコードについての説明を自然言語で書く。 ○ 必要に応じて例も書く ○ 例）「引数Xに〇〇という入力を渡したら××という値を返す関数」 ● 自分でコードを書き始めてみる。 ○ 書き始めたコードもCopilotにとっての文脈となる。

Slide 11

Slide 11 text

GitHub Copilot 特定のファイルを対象外とする GitHubの管理画面（リポジトリ、OrganizationもしくはEnterprise）で除外するファイルを指定することが可能。除外対象となったファイルは - コード補完機能の利用ができなくなる - コード補完機能の文脈として使われなくなる GitHub上にリポジトリがあるかどうかに関わらず、除外の対象とすることが可能 https://docs.github.com/en/copilot/managing-copilot/managing-github-copilot-in-your-organization/setting-policies-for-copilot-in-your-organization/excluding-content-from-github-copilot

Slide 12

Slide 12 text

チャットスラッシュコマンド、エージェント、コンテキスト変数を使いこなす

Slide 13

Slide 13 text

Chat エディタ上のコンテキストを踏まえた、Copilotとのチャットコーディングに関する質問への回答コードの説明ユニットテストの生成コードの修正提案可読性の向上言語変換

Slide 14

Slide 14 text

GitHub Copilot

Slide 15

Slide 15 text

GitHub Copilot 何が文脈として使われるか？ [前提] 基本的には開いているファイルが文脈の候補。　　ただし例外もあり（後述）。 1. エディタ上でテキストを選択している場合　　 → 選択している箇所のテキストが使われる 2. 何も選択していない場合　　 → アクティブなエディタで表示されている範囲の　テキストが使われる 3. コンテキスト変数で指定する（後述）

Slide 16

Slide 16 text

GitHub Copilot Notebookで自動的に追加される文脈 Jupyter Notebook内でのインラインチャットでは、カーネルの状態（変数や利用可能なパッケージ等）が自動的に追加される。

Slide 17

Slide 17 text

GitHub Copilot 特定のファイルを対象外とする GitHubの管理画面（リポジトリ、OrganizationもしくはEnterprise）で除外するファイルを指定することが可能。除外対象となったファイルの内容はチャットの文脈として使われなくなる GitHub上にリポジトリがあるかどうかに関わらず、除外の対象とすることが可能 https://docs.github.com/en/copilot/managing-copilot/managing-github-copilot-in-your-organization/setting-policies-for-copilot-in-your-organization/excluding-content-from-github-copilot

Slide 18

Slide 18 text

言語設定チャットの返答やコミットメッセージの自動生成（後述）の言語を指定可能 github.copilot.chat.localeOverride

Slide 19

Slide 19 text

コンテキスト変数 #で始まり、プロンプトの中に含めることで文脈を指定するために使われるもの。右の例の #file:BookDatabaseImpl.java の部分がコンテキスト変数。この例だと、指定されたファイル全体が文脈の対象となる。

Slide 20

Slide 20 text

GitHub Copilot 主要なコンテキスト変数一覧 #selection アクティブなエディタで選択されている箇所 #file 特定のファイル（VS Codeのファイル選択UIが表示される） #editor アクティブなエディタで表示されている箇所 #terminalLastCommand アクティブなターミナルの最後に実行したコマンドの結果 #terminalSelection アクティブなターミナルの選択されている箇所

Slide 21

Slide 21 text

GitHub Copilot コンテキスト変数の利用例 VS Code内のターミナルで、git diffで差分を表示した上で以下のプロンプトを実行以下の観点でコードをレビューして、修正が必要な箇所を指摘してください。 ● コードをさらに簡潔に書くことができるかどうか？ ● このコードはコンパイルエラーやランタイムエラーを引き起こさないか？ ● セキュリティバグを入れ込んでしまっていないかどうか？ #terminalLastCommand

Slide 22

Slide 22 text

GitHub Copilot

Slide 23

Slide 23 text

GUIでのコンテキストの指定チャット入力欄の📎アイコンをクリックすることでコンテキストを以下から指定することも可能。 - エディタ上の選択範囲 - 現在のエディタの表示範囲 - ターミナル上の選択範囲 - ターミナルの最後のコマンド - コードベース全体 - 特定のシンボル - 特定のファイル

Slide 24

Slide 24 text

GUIでのコンテキストの指定ドラッグ&ドロップでファイルをコンテキストとしてチャットに追加することも可能。

Slide 25

Slide 25 text

カスタムインストラクション（preview）チャットで生成されるコードに対しての指示をファイルにあらかじめ指定することが可能。チャットはコンテキストとして使用するファイルを参考にコードを生成するが、明示的に指示を出したい場合には、この機能を使うことができる。

Slide 26

Slide 26 text

GitHub Copilot

Slide 27

Slide 27 text

カスタムインストラクション（experimental）テスト生成時のカスタムインストラクションは別の設定として指定が可能。

Slide 28

Slide 28 text

スラッシュコマンド / (スラッシュ) で始まるコマンドの事。プロンプト中に指定することで Copilotへの依頼を簡潔に記載することが可能。右の例では /explain を使ってコードの説明を依頼している。

Slide 29

Slide 29 text

GitHub Copilot 主要なスラッシュコマンド /explain 選択されたコードを説明 /tests 選択されたコードのユニットテストを生成。もし既存のテストファイルがある場合は、その内容を参照して新たなテストケースを追加する。 /doc 選択されたコードのドキュメンテーションコメントを生成（後述のインラインチャットのみ） /fix 選択されたコードに含まれる問題を修正 /fixTestFailure 失敗したユニットテストを修正 /new 指定されたワークスペースの雛形を生成

Slide 30

Slide 30 text

エージェント @で始まり、プロンプトの中に含めることで、どこから文脈を収集するかを指定する。右の例の @workspace の部分がエージェントの指定。この例だと、開いていないファイルも文脈の対象となる。

Slide 31

Slide 31 text

GitHub Copilot 主要なエージェント @workspace ワークスペース全体についてのチャット @terminal ターミナルについてのチャット @vscode VS Codeについてのチャット

Slide 32

Slide 32 text

チャット内で提案されたコードの採用　　LLMを使用してエディタ内の　　コードにマッチするように採用　　エディタのカーソル位置に　　挿入　　クリップボードにコピー

Slide 33

Slide 33 text

使用するモデルの選択現時点では右の5つのモデルから選択 ※ チャットで使用するモデルが　対象です。

Slide 34

Slide 34 text

Edit with Copilot (preview) 修正したいファイル群を指定し、自然言語で望む変更を指定するとそれらにファイルをまたがって変更する機能。

Slide 35

Slide 35 text

GitHub Copilot

Slide 36

Slide 36 text

エディタ機能への統合

Slide 37

Slide 37 text

インラインチャットチャットペインだけでなくエディタの中でチャットを実行することが可能。ここで提案されたコードはエディタ上に直接追記される。

Slide 38

Slide 38 text

インラインチャット例）エラー処理のコードを提案してもらう。

Slide 39

Slide 39 text

インラインチャット例）インラインチャットで /doc を実行してdocstringを提案してもらう。

Slide 40

Slide 40 text

ターミナルインラインチャット例）srcディレクトリ以下でファイルサイズで上位５つのファイルを列挙

Slide 41

Slide 41 text

エラーの修正提案エディタ上のエラー（赤い波線）箇所のQuick Fixメニューの中に Copilotを使うアイテムが表示。 “Fix using Copilot”を選択すると、修正提案を適用。

Slide 42

Slide 42 text

Slide 43

Slide 43 text

シンボルの rename コマンドパレットから“Rename Symbol”を実行すると周囲の文脈から適切と思われる名前を提案してくれる。

Slide 44

Slide 44 text

コミットメッセージの提案現在の変更差分から、それを説明するコミットメッセージを提案。リポジトリの直近10個のコミット、コミッターの直近10個のコミットも参照。

Slide 45

Slide 45 text

コードレビューレビューして欲しい箇所を選択、もしくは現在の変更に対してCopilotによるコードレビューを受けることが可能。レビューコメントはエディタ上に表示され、可能な場合は変更提案も提示される。その変更提案を採用することも可能。

Slide 46

Slide 46 text

GitHub Copilot

Slide 47

Slide 47 text

コードレビューレビュー観点をカスタムインストラクションとして指定することも可能。

Slide 48

Slide 48 text

Thank you