VS Code での GitHub Copilot を使ったコード補完

GitHub Copilot は、AI を活用したペアプログラマーとして機能し、コード、コメント、テストなどの補完候補を自動的に提供します。これらの候補は、コードの記述中にエディターに直接表示され、幅広いプログラミング言語とフレームワークで動作します。

Copilot は2種類の候補を提供します

• コード補完 - エディターで入力を開始すると、Copilot があなたのコーディングスタイルに合い、既存のコードを考慮したコードの候補を提供します。

• Next Edit Suggestions - Copilot Next Edit Suggestions (Copilot NES) を使用して、次のコード編集を予測します。あなたが行っている編集に基づいて、NES は次に編集したい場所と、その編集内容の両方を予測します。

はじめに

1. GitHub Copilot 拡張機能をインストールします。

   GitHub Copilot 拡張機能をインストールする

2. Copilot を使用するには GitHub アカウントでサインインしてください。

   ヒント

   Copilot のサブスクリプションをお持ちでない場合は、Copilot Free プランにサインアップすることで Copilot を無料で利用でき、月ごとの補完とチャットの操作回数に制限が設けられます。

3. Copilot クイックスタートで、VS Code における Copilot の主要な機能をご覧ください。

インラインサジェスチョン

Copilot は、入力中にコードの候補を提供します。現在の行の補完であったり、まったく新しいコードブロックであったりします。候補のすべて、または一部を受け入れることも、入力し続けて候補を無視することもできます。

次の例では、Copilot が淡色のゴーストテキストを使用して、calculateDaysBetweenDates JavaScript 関数の実装を提案する方法に注目してください。

インラインサジェスチョンが表示されたら、Tab キーで受け入れることができます。

Copilot は、あなたのコードに既に存在するコーディングスタイルをコードの候補に適用しようとします。次の例では、Copilot が提案された subtract メソッドに対して、add メソッドと同じ入力パラメータの命名規則を適用していることに注目してください。

候補の部分的な受け入れ

GitHub Copilot の候補全体を受け入れたくない場合があります。⌘→ (Windows、Linux の場合は Ctrl+Right) キーボードショートカットを使用して、候補の次の単語または次の行を受け入れることができます。

代替の候補

任意の入力に対して、Copilot は複数の代替候補を提供する場合があります。候補にカーソルを合わせると、他の候補を確認できます。

コードコメントから候補を生成する

Copilot が候補を提供するのを待つのではなく、コードコメントを使用して、期待するコードに関するヒントを提供できます。たとえば、使用するアルゴリズムまたは概念のタイプ (例: 「再帰を使用」または「シングルトンパターンを使用」) を指定したり、クラスに追加するメソッドとプロパティを指定したりできます。

次の例は、Copilot に TypeScript で生徒を表すクラスを作成するように指示し、メソッドとプロパティに関する情報を提供する方法を示しています。

Next Edit Suggestions

インラインサジェスチョンは、コードの一部を自動補完するのに優れています。しかし、ほとんどのコーディングアクティビティは既存のコードの編集であるため、カーソル位置とそれ以外の場所の両方で編集を支援することは、Copilot のコード補完の自然な進化です。編集は単独で行われることは少なく、異なるシナリオでどのような編集を行う必要があるかには論理的な流れがあります。Copilot Next Edit Suggestions (Copilot NES) はこの進化形です。

あなたが行っている編集に基づいて、Copilot NES は次に編集したい場所と、その編集内容の両方を予測します。Copilot NES は、現在の作業に関連する将来の変更を提案することで、あなたが集中した状態を維持するのに役立ち、Tab キーを押すだけで、Copilot の候補に素早く移動して受け入れることができます。候補は、潜在的な変更の範囲に応じて、単一のシンボル、行全体、または複数行にわたる場合があります。

Copilot NES を使い始めるには、VS Code の設定 github.copilot.nextEditSuggestions.enabled を有効にします。

編集の候補をナビゲートして受け入れる

Tab キーを使用すると、提案されたコード変更に素早く移動でき、次の関連する編集を見つける時間を節約できます (ファイルや参照を手動で検索する必要はありません)。その後、もう一度 Tab キーで候補を受け入れることができます。

ガターの矢印は、編集の候補が利用可能であることを示します。矢印にカーソルを合わせると、キーボードショートカットと設定構成を含む編集の候補メニューを探索できます。

編集の候補が現在のエディタービューの下にある場合、矢印は右ではなく下を指します。

編集の候補による邪魔を減らす

デフォルトでは、編集の候補はガターの矢印で示され、コードの変更がエディターに表示されます。集中を妨げる要素を減らしたい場合は、Tab キーを押して候補に移動するか、ガターの矢印にカーソルを合わせるまで、エディターでのコード変更の表示を無効にできます。

エディターでコード変更の表示を無効にするには、設定エディターで editor.inlineSuggest.edits.showCollapsed 設定を有効にします。または、ガターの矢印にカーソルを合わせ、メニューから折りたたんで表示オプションを選択します。コード変更の表示を再度有効にするには、設定を無効にするか、ガターの矢印メニューから展開して表示を選択します。

次の編集の候補のユースケース

間違いの発見と修正

• Copilot はタイプミスなどの単純な間違いを修正するのに役立ちます。 cont x = 5 や conts x = 5 のように、文字が欠落しているか入れ替わっている場合の修正を提案します。これらは const x = 5 であるべきでした。

  

• Copilot は、論理におけるより困難な間違いも修正するのに役立ちます。例えば、反転した三項演算子などです。

  

  または、|| の代わりに && を使用すべきだった比較などです。

  

意図の変更

• Copilot は、新しい意図の変更に合わせて、残りのコードへの変更を提案します。 例えば、クラスを Point から Point3D に変更すると、Copilot はクラス定義に z 変数を追加することを提案します。変更を受け入れた後、Copilot NES は次に距離計算に z を追加することを推奨します。

  

リファクタリング

• ファイル内で変数を一度リネームすると、Copilot は他のすべての場所でそれを更新するよう提案します。 新しい名前または命名パターンを使用した場合、Copilot はそれに合わせて以降のコードを更新するよう提案します。

  

• コードスタイルの合わせ込み。コードをコピーして貼り付けた後、Copilot は貼り付け先の現在のコードに合わせるように調整する方法を提案します。

コード補完の有効化または無効化

コード補完は、すべての言語に対して有効または無効にすることも、特定の言語のみに対して有効または無効にすることもできます。

• コード補完を有効または無効にするには、ステータスバーの Copilot メニューを選択し、コード補完を有効または無効にするオプションをチェックまたはアンチェックします。

  特定の言語のコード補完を無効にするオプションは、アクティブなエディターの言語に依存します。

  

• または、設定エディターで github.copilot.enable 設定を変更します。

  コード補完を有効または無効にしたい各言語のエントリを追加します。すべての言語のコード補完を有効または無効にするには、* の値を true または false に設定します。

スヌーズ機能を使用すると、エディター内のすべてのコード補完を一時的に無効にできます。コード補完をスヌーズするには、ステータスバーの Copilot メニューを選択し、スヌーズ ボタンを選択してスヌーズ時間を5分増やします。コード補完を再開するには、Copilot メニューのスヌーズをキャンセルボタンを選択します。

または、コマンドパレットでインラインサジェスチョンをスヌーズとインラインサジェスチョンのスヌーズをキャンセルコマンドを使用します。

補完のための AI モデルを変更する

異なる大規模言語モデル (LLM) は異なる種類のデータでトレーニングされており、異なる機能や強みを持つ場合があります。VS Code での異なる AI 言語モデルの選択方法について詳しくはこちらをご覧ください。

エディターでコード補完を生成するために使用される言語モデルを変更するには

1. コマンドパレット (F1) を開きます。

2. 補完モデルの変更と入力し、GitHub Copilot: 補完モデルの変更コマンドを選択します。

3. ドロップダウンメニューから、使用したいモデルを選択します。

または、コマンドセンターが有効な場合は、VS Code のタイトルバーにある Copilot メニューをクリックし、ドロップダウンメニューからコード補完の設定をクリックします。その後、ドロップダウンメニューで補完モデルの変更...を選択し、使用したいモデルを選択します。

ヒントとテクニック

コンテキスト

関連性の高いインラインサジェスチョンを提供するために、Copilot はエディターの現在および開いているファイルを調べてコンテキストを分析し、適切な候補を作成します。Copilot の使用中に VS Code で関連ファイルを開いておくことで、このコンテキストを設定し、Copilot がプロジェクトの全体像を把握するのに役立ちます。

設定

コード補完の設定

• github.copilot.enable - すべてまたは特定の言語のインライン補完を有効または無効にします。

• editor.inlineSuggest.fontFamily - インライン補完のフォントを設定します。

• editor.inlineSuggest.showToolbar - インライン補完に表示されるツールバーを有効または無効にします。

• editor.inlineSuggest.syntaxHighlightingEnabled - インライン補完の構文強調表示を有効または無効にします。

Next Edit Suggestions の設定

• github.copilot.nextEditSuggestions.enabled - Copilot Next Edit Suggestions (Copilot NES) を有効にします。

• editor.inlineSuggest.edits.allowCodeShifting - Copilot NES が候補を表示するためにコードをシフトできるかどうかを設定します。

• editor.inlineSuggest.edits.renderSideBySide - Copilot NES が可能な場合に大きな候補をサイドバイサイドで表示できるか、または関連するコードの下に常に大きな候補を表示すべきかを設定します。

  • 自動 (デフォルト): ビューポートに十分なスペースがある場合、大きな編集候補をサイドバイサイドで表示します。それ以外の場合は、関連するコードの下に候補が表示されます。
  • 常に表示しない: サイドバイサイドで候補を表示せず、常に関連するコードの下に候補を表示します。

次のステップ

• Copilot クイックスタートで、主要な機能をご覧ください。

• Copilot Chat を使って AI チャット会話を利用します。

• YouTube のVS Code Copilot シリーズの動画をご覧ください。