Runbook技術サイト
技術メモ
GitHub CopilotのTipsまとめ

GitHub CopilotのTipsまとめ

GitHub CopilotのTipsまとめ。VS Codeで使う想定です。

基本の機能

インラインサジェスト
チャット
インラインチャット

インラインサジェスト

普通に便利なやつ
大抵の人はこれのために入れておくだけで十分

コマンド

提案を受け入れる	Tab
提案を拒否する	Esc
次の提案を表示	Alt + ]
前の提案を表示	Alt + [
次の単語を受け入れる	Ctrl + →
複数の提案を含む新しいタブを開く	Ctrl + Enter

良いサジェストを得るために

Best practices for GitHub Copilot in VS Code

Optimize your development experience with GitHub Copilot in VS Code with best practices for crafting chat prompts and providing context.

code.visualstudio.com

トップレベルのコメント

作業中のファイルのトップレベルのコメントは、作成中の部分の全体的なコンテキストを Copilot が理解するのに役立ちます。

適切なインクルードとモジュール参照

インクルードやモジュール参照を手動で設定することをお勧めします。 Copilot は提案を行うことができますが、どのような依存関係を含める必要があるかについては、おそらくご自身が最もよく知っています。これは、提案を作成するときに使用したいフレームワーク、ライブラリ、およびそれらのバージョンを Copilot に知らせるのにも役立ちます。

意味のある関数名

fetchData()メソッドが同僚や数か月後のあなたにとってあまり意味がないのと同様に、fetchData()というメソッド名はCopilot にとっても役に立ちません。意味のある関数名を使用すると、Copilot が必要なことを実行する本体を提供するのに役立ちます。

具体的で適切なスコープの関数コメント

関数名は、長すぎない範囲で、わかりやすいものにする必要があります。関数のコメントは、Copilot が知る必要がある詳細を説明するのに役立ちます。

サンプルコード

Copilot を正しく使うコツは、探しているものに近いサンプルコードをコピーして、開いているエディターに貼り付けることです。小さな例を提供すると、Copilot が言語や達成したいタスクに一致する提案を生成するのに役立ちます。 Copilot が必要な実際に使用するコードの提供を開始したら、ファイルからサンプルコードを削除できます。これは、デフォルトで古いコードの提案が提供される場合に、Copilot を新しいライブラリバージョンにジャンプスタートする場合に特に役立ちます。

チャット

チャットウインドウから質問する。
プログラミングに関することなら基本的に何でも聞ける。

エージェント

プロンプトに @workspaceなどをつけることで、エージェントを指定することができる。

@workspace	開いているワークスペースのコードに関する質問を受けるエージェント
@terminal	ターミナルに関する質問を受けるエージェント
@vscode	VSCodeに関する質問を受けるエージェント

@workspace組み込みコマンド

/explain	コードの説明を表示する
/fix	コードを修正する
/tests	テストコードを生成する
/new	新規コードの雛形を生成する

よく使うコマンド

JavaScriptに変換して
最適化して
コメントを追加して
翻訳して
関数名（変数名）を提案して
読みやすくして
リファクタリングして
型を付けて

インラインチャット

「CTRL + i」で発動する。
できることはチャットと同じだが、インラインでそのままコードを挿入してもらえる。
「こんな感じのコードを書いて」という場合や、「このコードのコメントを書いて」という場合に使いやすい。
例）日付をフォーマットする関数を書いて。

Tips

GitHub Copilot Patterns & Exercises

patterns.hattori.dev

すぐに使えそうなTipsを紹介する。

使用例及びレスポンス例を書く

使用例やレスポンス例を書くことで提案の精度を上げる。

// ふたつの日付の差分を求める
// 使用例: diffDate('2011/10/11 13:40:35', '2011/10/10 12:30:25');
// 戻り値の例: { day: 100, hour: 13, min:40, second: 35 }

または

// ふたつの日付の差分を求める
// 引数: ふたつの日付を表す文字列
// 戻り値: day, hour, min, secondを要素に持つ構造体

アウトラインを先に提示する

プログラムのハイレベルなアーキテクチャを先に設計し、コードの各部分の機能と目的についてコメントしていくことにより、GitHub Copilot も文脈をよりよく理解し、より的確な提案をすることができます。

/*
React Hooksでログインフォームを生成する
入力されたメールアドレスとパスワードをバックエンドにFetchする
メールアドレスのplaceholderを「メールアドレス」にする
パスワードのplaceholderを「パスワード」にする
ログインボタンのテキストを「ログイン」にする
*/

小さなまとまりで作業する

すべてを一度に生成しようとする代わりに、タスクを小さな部分に分割し、限定されたコンテキストを GitHub Copilot に提供します。このアプローチは開発プロセスを合理化するだけでなく、生成されたコードの品質も向上させます。

# Just write your code description by yourself
class complex_calculation:
  def __init__(self, n):
    self.n = n

  def foo_calculation(self):
    # Ask GitHub Copilot to complete this function

  def bar_calculation(self):
    # Ask GitHub Copilot to complete this function