Visual Studio CodeでGitHub Copilotを使うための設定手順

Others,VS Code

Visual Studio Code (VS Code)でGitHub Copilotを利用するための初期設定手順です。
GitHub Copilot拡張機能のインストールからGitHubへのサインインといった利用開始までの手順を紹介しています。
Chat messagesなど、GitHub Copilotの使用量や上限に達した場合の動作についても確認しています。

※本記事内では、一部を除きVisual Studio CodeをVS Codeと表記します。

スポンサーリンク

Visual Studio Code(VS Code)でGitHub Copilotを使うための設定手順

前提条件

今回は、以下の前提条件で手順を確認しています。

    • GitHubアカウントを作成済みであること
    • Visual Studio Code(VS Code)をインストール済みであること
    • インターネットに接続できる環境であること

今回使用したVS Codeのバージョンは1.107.1です。
また、GitHubのアカウントは個人アカウントを使用しています。
組織アカウントの場合は、画面が異なりますのでご注意ください。

VS Codeのインストール手順については、こちらで紹介しています。

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

VS CodeではGitHub Copilotの拡張機能を利用できます。
コード補完などGitHub Copilotの機能を利用するには、GitHub Copilot拡張機能をインストールする必要があります。

環境への GitHub Copilot 拡張機能のインストール

なお、VS CodeでAI機能(GitHub Copilot)を初めて有効化する際に、必要な拡張機能も同時にインストールされます。
そのため多くの場合、GitHub Copilotの拡張機能を個別でインストールする必要はありません。

GitHub Copilotの拡張機能インストール手順

VS Codeをインストール直後にチャット画面が表示されることがありますが、この時点では利用できません。
チャット機能を利用するためには、GitHub Copilotの拡張機能をインストールし、GitHubにサインインする必要があります。

設定前のVS Code画面(Visual Studio CodeでGitHub Copilotを使うための設定手順)

VS Codeで拡張機能を表示します。
GitHub Copilotを選択し、インストールします。

GitHub Copilotの拡張機能をインストール(Visual Studio CodeでGitHub Copilotを使うための設定手順)
インストールが完了すると、拡張機能 GitHub Copilotのタブが表示されます。 GitHub Copilotの拡張機能(Visual Studio CodeでGitHub Copilotを使うための設定手順)

GitHubにサインインしてCopilotを使用開始

GitHubにサインインすることで、GitHub Copilotを使用することができるようになります。

Set up GitHub Copilot in VS Code

GitHubへのサインイン手順

Copilotのアイコンを選択します。
Sign in to use AI Featuresを選択します。

※「サインインしてCopilotを使用する」など、表示メッセージが異なる場合があります。

VS CodeでAI機能を有効化(Visual Studio CodeでGitHub Copilotを使うための設定手順)
GitHubへのサインイン画面が表示されます。
GitHubのアカウントを利用してサインインします。
GitHubへのサインイン画面(Visual Studio CodeでGitHub Copilotを使うための設定手順)
GitHubへのサインイン画面(Visual Studio CodeでGitHub Copilotを使うための設定手順)
VS Code上でGitHub Copilotを利用できるようになります。 GitHubへサインイン後のVS Code(Visual Studio CodeでGitHub Copilotを使うための設定手順)

GitHub Copilotの使用量(Chat messagesやCode completions)を確認する方法

GitHub CopilotのFreeプランを利用している場合、月ごとにChat messagesの使用上限があります。
同様にCode completions(コード補完)にも、月ごとに使用上限があります。

GitHub Copilot のプラン

Chat messages使用量を確認

GitHub Copilotのアイコンをクリックして、使用量を確認できます。

※表示されない場合は、GitHubのアカウントで確認します。

VS CodeでGitHub Copilotの利用量を確認(Visual Studio CodeでGitHub Copilotを使うための設定手順)
GitHubのアカウントで利用状況を確認する場合は、Settings(設定)から確認できます。
CopilotにあるFeaturesのメニューを選択します。
Usageで使用量を確認できます。
GitHubの設定画面でCopilotの利用量を確認(Visual Studio CodeでGitHub Copilotを使うための設定手順)

Chat messages使用量が上限に達した場合

Chat messagesの使用上限に達すると、Chat quota reachedのメッセージが表示され、チャットが利用できなくなります。
チャットを実行すると、GitHub Copilot Proへのアップグレードメッセージが表示されます。

Chat messages使用量が上限に達した場合

Chat messagesの上限に達した場合は、Chat quota reachedのメッセージが表示されます。

Chat messagesの上限値に達した場合(Visual Studio CodeでGitHub Copilotを使うための設定手順)
チャットを実行した場合、GitHub Copilot Proへのアップグレードメッセージが表示されます。 Chat messagesの上限値到達後にチャットを実施した場合(Visual Studio CodeでGitHub Copilotを使うための設定手順)

※アップグレードのメッセージのみで、ボタンが表示されない場合もあります。
※Chat messagesの上限に達しても、コード補完は利用できることがあります。

GitHub Copilotのコードやチャット履歴がAIモデルの学習に利用されないようにする

GitHubの設定に学習させないための設定があります。

GitHubの学習設定

GitHubのアカウントのSettings(設定)を表示します。
CopilotにあるFeaturesのメニューを選択します。
下にスクロールしPrivacyの項目を表示します。
Allow GitHub to use my data for product improvementsを確認します。チェックがついている場合は外します。

GitHub Copilotの設定画面(Visual Studio CodeでGitHub Copilotを使うための設定手順)
GitHub CopilotのPrivacy設定画面(Visual Studio CodeでGitHub Copilotを使うための設定手順)

※GitHubの個人アカウントを使用している場合の画面例です。組織アカウントなど利用環境により異なる場合があります。

—広告—

最後に

今回は、Visual Studio Code (VS Code)でGitHub Copilotを利用する手順を確認しました。
GitHub Copilotはコード補完、コード生成、コードのレビューや説明、テストコードの生成などに利用できます。

引き続き、いろいろ試してみたいと思います。

Visual Studio CodeでAzure CLIやAzure PowerShellを使うための設定手順はこちらで紹介しています。

Azure Open AIのリソース作成からモデルデプロイまでの手順を紹介しています。

スポンサーリンク