VSCode – GitHub Copilot の使い方

概要

GitHub Copilot は、VSCode で利用可能な AI によるコーディング支援ツールです。 この記事では、VSCode で GitHub Copilot を設定し、効果的に活用する方法について説明します。

GitHub Copilot の料金

GitHub Copilot のサブスクリプション プラン – GitHub Docs を参照してください。

個人で使用する場合、Copilot Pro プランを契約することになります。 料金は月額 10 ドルで、為替によって変動する可能性がありますが、2025 年 2 月現在、1500 円前後となっています。 使用感を確認するために無料で使用できる Copilot Free プラン存在します。

GitHub Copilot のインストール

  1. GitHub Copilot 拡張機能のインストール: VSCode を起動し、サイドバーの拡張機能アイコン (四角いアイコン) をクリックします。 検索バーに「GitHub Copilot」と入力し、GitHub Copilot 拡張機能を見つけて「インストール」ボタンをクリックします。

  2. GitHub アカウントでサインイン: 拡張機能がインストールされたら、GitHub アカウントでサインインするよう求められます。画面の指示に従い、GitHub アカウントを使用してサインインします。

基本的な機能

サジェスト

コードの入力中に、続くコードの提案が灰色で表示されます。 提案されたコードを採用する場合は、Tab キーを押します。

ショートカット:

  • Tab: 提案されたコードを採用する
  • Alt + [ / Alt + ]: 提案されたコードが複数ある場合に切り替える

以下の例は、2 つの長方形を表す変数を定義したとき、それらの長方形に外接する長方形や共通部分を計算するコードが変数名を入力した段階で提案されています。

インラインチャットでコードを新規に作成する

Ctrl + I でインラインチャットが表示されるので、作成してほしい内容を文章で入力します。コードの提案が表示されるので、採用する場合、Ctrl + Enter を押します。

ショートカット:

  • Ctrl + I: インラインチャットを表示する
  • Esc: インラインチャットを閉じる
  • Ctrl + Enter: 提案されたコードを採用する
  • Esc: 提案されたコードをキャンセルする

以下の例は、2 枚の画像を読み込み、横方向に結合して保存する Python コードを作成する様子です。

インラインチャットで既存のコードを修正する

既存のコードを編集してもらう場合、編集対象のコードを選択したあと、Ctrl + I でインラインチャットを開き、指示を入力します。

以下の例は、関数を選択し、型ヒントを追加するように指示しています。

コードの不具合を修正する

コードの不具合を修正する場合、Ctrl + I でインラインチャットを開き、/fix を入力します。

以下の例は、モジュールのインポートを忘れていることにより発生しているエラーを修正しています。

または、エラー部分に表示されるポップアップから、「クイックフィックス」→「Copilot を使用して修正する」を選択することでも、修正されます。

テストコードの作成

テストコードの作成する場合、Ctrl + I でインラインチャットを開き、/tests を入力します。

ターミナルでコマンドをサジェスト

インラインチャットはターミナルでも使用できます。 Ctrl + I でインラインチャットを表示し、提案してほしいコマンドの内容を入力します。 提案されたコマンドは「実行」をクリックすると、挿入して実行されます。 また、「挿入」をクリックすると、挿入のみ行われます。

以下の例は、/etc 以下のファイル数をカウントするコマンドを指示しました。

コードにコメントを追加する

Ctrl + I でインラインチャットを表示し、/doc を入力すると、コードの関数などにコメントを追加します。

以下の例は、関数に Docstring が追加されました。

Web 上のチャット機能

GitHub Copilot より、Web 上のチャット機能も使用できます。

2025 年 2 月現在、以下のモデルが使用できます。

  • ChatGPT 4o
  • ChatGPT o1
  • ChatGPT o3-mini
  • Claude 3.5 Sonnet
  • Claude 3.7 Sonnet
  • Claude 3.7 Sonnet Thinking
  • Gemini 2.0 Flash

コメント

コメントする