Visual Studio Code で GitHub Copilot の使用を開始する

GitHub Copilot を試す

GitHub Copilot と Visual Studio Code について

GitHub Copilot では、コーディング時に AI ペア プログラマーからオートコンプリート スタイルの候補が提示されます。 詳細については、「GitHub Copilot について」を参照してください。

Visual Studio Code を使う場合、エディター内に GitHub Copilot の候補を直接表示し、取り入れることができます。 このガイドでは、macOS、Windows、Linux 用の Visual Studio Code 内で GitHub Copilot を使う方法について説明します。

前提条件

• GitHub Copilot を使用するには、アクティブな GitHub Copilot サブスクリプションが必要です。 詳しくは、「GitHub Copilot の課金について」をご覧ください。

• Visual Studio Code で GitHub Copilot を使うには、Visual Studio Code がインストールされている必要があります。 詳細については、Visual Studio Code のダウンロード ページを参照してください。

Visual Studio Code 拡張機能をインストールする

GitHub Copilot を使うには、最初に Visual Studio Code 拡張機能をインストールする必要があります。

1. Visual Studio Code Marketplace で、GitHub Copilot 拡張機能ページに移動し、 [Install](インストール) をクリックします。
2. ポップアップが表示され、Visual Studio Code を開くように求められます。 [Open Visual Studio Code] をクリックします。
3. Visual Studio Code の [Extension: GitHub Copilot] タブの [Install](インストール) をクリックします。
4. GitHub アカウントで Visual Studio Code を以前に認可していない場合は、Visual Studio Code で GitHub にサインインするように求められます。
   • GitHub のアカウントで Visual Studio Code を以前に認可している場合は、GitHub Copilot は自動的に認可されます。
5. ブラウザーで、GitHub から、GitHub Copilot に必要なアクセス許可が要求されます。 これらのアクセス許可を承認するには、 [Visual Studio Code の認可] をクリックします。
6. Visual Studio Code の [Visual Studio Code] ダイアログ ボックスで、認証を確認するには、 [Open](開く) をクリックします。

最初の候補を表示する

GitHub Copilot は、多数の言語とさまざまなフレームワークに対する候補を提示しますが、特に Python、JavaScript、TypeScript、Ruby、Go、C#、C++ に適しています。 次のサンプルは JavaScript で記述されていますが、他の言語も同様に動作します。

1. Visual Studio Code で、新しい JavaScript ( *.js) のファイルを作成します。
2. JavaScript ファイルで、次の関数ヘッダーを入力します。 次に示すように、GitHub Copilot から自動的に関数本文全体の候補が灰色のテキストで表示されます。 実際に表示される候補はこのとおりではない場合があります。
   JavaScript

   function calculateDaysBetweenDates(begin, end) {

   1. 候補を受け入れるには、Tab キーを押します。

代替候補の表示

特定の入力に対して、GitHub Copilot が複数の候補を提示することがあります。 使う候補を選択するか、すべての候補を拒否できます。

1. Visual Studio Code で、新しい JavaScript ( *.js) のファイルを作成します。

2. JavaScript ファイルで、次の関数ヘッダーを入力します。 GitHub Copilot による候補が表示されます。

   JavaScript

   function calculateDaysBetweenDates(begin, end) {

3. 必要に応じて、使用可能な場合は、代替候補を表示できます。

   OS	次の候補を表示	前の候補を表示
   macOS	Option (⌥) または Alt+]	Option (⌥) または Alt+[
   Windows	Alt+]	Alt+[
   Linux	Alt+]	Alt+[

4. または、候補の上にマウス ポインターを置くと、候補を選択するためのGitHub Copilot コマンド パレットが表示されます。

5. 候補を受け入れるには、Tab キーを押します。すべての候補を拒否するには、Esc キーを押します。

新しいタブに複数の候補を表示する

GitHub Copilot が提示する最初の候補はどれも必要ないかもしれません。 キーボード ショートカットを使って、GitHub Copilot で新しいタブに複数の候補を表示するように指示できます。

1. Visual Studio Code で、新しい JavaScript ( *.js) のファイルを作成します。
2. JavaScript ファイルで、次の関数ヘッダーを入力します。 GitHub Copilot による候補が表示されます。
   JavaScript

   function calculateDaysBetweenDates(begin, end) {

3. 複数の追加オプションを含む新しいタブを開くには、Ctrl+Enter キーを押します。
4. 候補を受け入れるには、候補の上にある [Accept Solution](ソリューションの受入) をクリックします。 すべての候補を拒否するには、タブを閉じます。

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

コメント内で自然言語を使用して実行する操作を記述できます。GitHub Copilot では、目標を達成するためのコードの候補が示されます。

1. Visual Studio Code で、新しい JavaScript ( *.js) のファイルを作成します。
2. JavaScript ファイルで、次のコメントを入力します。 GitHub Copilot による関数の実装の候補が表示されます。
   JavaScript

   // find all images without alternate text
   // and give them a red border
   function process() {

フレームワークの使用

GitHub Copilot を使うと、API やフレームワークの候補を生成することもできます。 次の例では、GitHub Copilot を使って、現在の時刻を返す単純な Express サーバーを作成しています。

1. Visual Studio Code で、新しい JavaScript ( *.js) のファイルを作成します。
2. JavaScript ファイルで、次のコメントを入力し、Enter キーを押します。 GitHub Copilot による Express アプリの実装の候補が表示されます。
   JavaScript

   // Express server on port 3000

3. To accept each line, press Tab, then Enter.
4. Type the following comment and then press Enter. GitHub Copilot will suggest an implementation for the default handler.
   JavaScript

   // Return the current time

5. 各行を受け入れるには、Tab キーを押します。

GitHub Copilot の有効化または無効化

Visual Studio Code 内から GitHub Copilot を有効または無効にすることができます。 Visual Studio Code ウィンドウの下部パネルにある GitHub Copilot 状態アイコンは、GitHub Copilot が有効であるか無効であるかを示します。 有効にすると、アイコンの背景色はステータス バーの色と一致します。 無効にすると、アイコンの背景色はステータス バーの色と異なります。

1. GitHub Copilot を有効または無効にするには、Visual Studio Code ウィンドウの下部パネルにある状態アイコンをクリックします。

2. GitHub Copilot を無効にする場合は、候補をグローバルに無効にするか、現在編集中のファイルの言語に対して無効にするかを確認するメッセージが表示されます。

   • GitHub Copilot からの候補をグローバルに無効にするには、 [グローバルに無効にする] をクリックします。
   • 指定された言語に対して GitHub Copilot からの候補を無効にするには、 [言語 に対して無効にする] をクリックします。

参考資料

• GitHub Copilot