VS Code での GitHub Copilot によるコード補完

GitHub Copilotは、AI搭載のペアプログラマーとして機能し、コード、コメント、テストなどを補完するための提案を自動的に提供します。これらの提案は、コードを書いている間にエディター内で直接提供され、幅広いプログラミング言語やフレームワークで動作します。

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

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

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

はじめに

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

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

2. Copilot を使用するには、GitHub アカウントでサインインします。

   ヒント

   まだ Copilot のサブスクリプションをお持ちでない場合は、Copilot Free プランにサインアップすることで、月間の補完とチャット対話の制限付きで Copilot を無料で使用できます。

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

インライン提案

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

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

インライン提案が表示されたら、Tab キーで受け入れることができます。

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

提案を部分的に受け入れる

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

代替の提案

任意の入力に対して、Copilot は複数の代替提案を提示することがあります。提案にマウスカーソルを合わせると、他の提案を表示できます。

コードコメントから提案を生成する

Copilot に提案を任せる代わりに、コードコメントを使用して、期待するコードについてのヒントを与えることができます。たとえば、使用するアルゴリズムや概念の種類（「再帰を使用」や「シングルトンパターンを使用」など）を指定したり、クラスに追加するメソッドやプロパティを指定したりできます。

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

次の編集の提案

インライン提案は、コードの一部を自動補完するのに優れています。しかし、コーディング作業のほとんどは既存のコードの編集であるため、Copilot のコード補完が、カーソル位置だけでなく、離れた場所での編集も支援するのは自然な進化です。編集は孤立して行われることは少なく、さまざまなシナリオでどのような編集が必要かという論理的な流れがあります。Copilot の次の編集の提案 (Copilot NES) は、この進化形です。

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

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

編集提案の移動と受け入れ

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

ガターの矢印は、編集提案が利用可能かどうかを示します。矢印にマウスカーソルを合わせると、キーボードショートカットや設定構成を含む編集提案メニューが表示されます。

編集提案が現在のエディタービューの下にある場合、矢印は右ではなく下を向きます。

編集提案による注意散漫を減らす

デフォルトでは、編集提案はガターの矢印で示され、コードの変更はエディターに表示されます。注意散漫を減らしたい場合は、Tab キーを押して提案に移動するか、ガターの矢印にマウスカーソルを合わせるまで、エディターでのコード変更の表示を無効にできます。

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

次の編集の提案のユースケース

間違いの検出と修正

• Copilot はタイプミスのような単純な間違いを支援します。const x = 5 であるべきところを cont x = 5 や conts 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. 「change completions model」と入力し、GitHub Copilot: Change Completions Model コマンドを選択します。

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

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

ヒントとテクニック

コンテキスト

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

設定

コード補完の設定

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

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

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

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

次の編集の提案の設定

• github.copilot.nextEditSuggestions.enabled - Copilot の次の編集の提案 (Copilot NES) を有効にします。

• editor.inlineSuggest.edits.allowCodeShifting - Copilot NES が提案を表示するためにコードを移動できるかどうかを設定します。

• editor.inlineSuggest.edits.renderSideBySide - Copilot NES が可能であれば大きな提案を横並びで表示できるか、または常に大きな提案を関連コードの下に表示すべきかを設定します。

  • auto (既定): ビューポートに十分なスペースがある場合は、大きな編集提案を横並びで表示します。それ以外の場合は、提案は関連コードの下に表示されます。
  • never: 提案を横並びで表示せず、常に関連コードの下に表示します。

次のステップ

• Copilot クイックスタートで主要な機能を発見してください。

• Copilot Chat で AI チャット会話を使用してください。

• YouTube の VS Code Copilot シリーズのビデオをご覧ください。