Skip to main content

Getting started with GitHub Copilot in Visual Studio Code

Learn how to install GitHub Copilot in Visual Studio Code, and start seeing suggestions as you write comments and code.

GitHub のお客様は、GitHub.com の個人アカウントで GitHub Copilot を利用できます。 Managed user accountsでは、GitHub Copilot を使うことができません。

確認が取れている学生、教師、およびパブリックのオープン ソース プロジェクトのメンテナンス担当者は、GitHub Copilot を無料で使うことができます。 学生、教師、または一般的なオープンソース プロジェクトのメンテナンス担当者ではない場合にも、1 回限りの 60 日間の試用版で GitHub Copilot を無料で試すことができます。 無料試用期間の後、継続して使うには有料サブスクリプションが必要になります。 詳しくは、「GitHub Copilot の課金について」をご覧ください。

About GitHub Copilot and Visual Studio Code

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

If you use Visual Studio Code, you can view and incorporate suggestions from GitHub Copilot directly within the editor. This guide demonstrates how to use GitHub Copilot within Visual Studio Code for macOS, Windows, or Linux.

Prerequisites

To use GitHub Copilot in Visual Studio Code, you must have Visual Studio Code installed. For more information, see the Visual Studio Code download page.

Installing the Visual Studio Code extension

To use GitHub Copilot, you must first install the Visual Studio Code extension.

  1. In the Visual Studio Code Marketplace, go to the GitHub Copilot extension page and click Install. Install GitHub Copilot extension Visual Studio Code
  2. A popup will appear, asking to open Visual Studio Code. Click Open Visual Studio Code.
  3. In the "Extension: GitHub Copilot" tab in Visual Studio Code, click Install. Install button in Visual Studio Code
  4. If you have not previously authorized Visual Studio Code in your GitHub account, you will be prompted to sign in to GitHub in Visual Studio Code.
    • If you have previously authorized Visual Studio Code for your account on GitHub, GitHub Copilot will be automatically authorized. Screen shot of Visual Studio Code authorization screen
  5. In your browser, GitHub will request the necessary permissions for GitHub Copilot. To approve these permissions, click Authorize Visual Studio Code.
  6. In Visual Studio Code, in the "Visual Studio Code" dialog box, to confirm the authentication, click Open.

Seeing your first suggestion

Note: If you have duplication detection enabled for GitHub Copilot, you may receive limited suggestions, or no suggestions, when using the code examples provided. As an alternative, you can start by typing your own code to see suggestions from GitHub Copilot. For more information on duplication detection, see "Enabling or disabling duplication detection."

GitHub Copilot は、多数の言語とさまざまなフレームワークに対する候補を提示しますが、特に Python、JavaScript、TypeScript、Ruby、Go、C#、C++ に適しています。 The following samples are in JavaScript, but other languages will work similarly.

  1. Visual Studio Code で、新しい JavaScript ( *.js) のファイルを作成します。
  2. In the JavaScript file, type the following function header. GitHub Copilot will automatically suggest an entire function body in grayed text, as shown below. The exact suggestion may vary.
    JavaScript
    function calculateDaysBetweenDates(begin, end) {
    Screenshot of a first suggestion Visual Studio Code
  3. 候補を受け入れるには、Tab キーを押します。

Seeing alternative suggestions

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

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

  2. In the JavaScript file, type the following function header. GitHub Copilot will show you a suggestion.

    JavaScript
    function calculateDaysBetweenDates(begin, end) {
  3. 必要に応じて、使用可能な場合は、代替候補を表示できます。

    OSSee next suggestionSee previous suggestion
    macOSOption (⌥) or Alt+]Option (⌥) or Alt+[
    WindowsAlt+]Alt+[
    LinuxAlt+]Alt+[
  4. Alternatively, you can hover over the suggestion to see the GitHub Copilot command palette for choosing suggestions.

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

Seeing multiple suggestions in a new tab

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

  1. Visual Studio Code で、新しい JavaScript ( *.js) のファイルを作成します。
  2. In the JavaScript file, type the following function header. GitHub Copilot will show you a suggestion.
    JavaScript
    function calculateDaysBetweenDates(begin, end) {
  3. To open a new tab with multiple additional options, press Ctrl+Enter.
  4. To accept a suggestion, above the suggestion, click Accept Solution. To reject all suggestions, close the tab.

Generating code suggestions from comments

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

  1. Visual Studio Code で、新しい JavaScript ( *.js) のファイルを作成します。
  2. In the JavaScript file, type the following comment. GitHub Copilot will suggest an implementation of the function.
    JavaScript
    // find all images without alternate text
    // and give them a red border
    function process() {

Using a framework

You can also use GitHub Copilot to generate suggestions for APIs and frameworks. The following example uses GitHub Copilot to create a simple Express server that returns the current time.

  1. Visual Studio Code で、新しい JavaScript ( *.js) のファイルを作成します。
  2. In the JavaScript file, type the following comment and then press Enter. GitHub Copilot will suggest an implementation of the Express app.
    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. To accept each line, press Tab.

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

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

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

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

    • GitHub Copilot からの候補をグローバルに無効にするには、 [グローバルに無効にする] をクリックします。
    • 指定された言語に対して GitHub Copilot からの候補を無効にするには、 [言語 に対して無効にする] をクリックします。 GitHub Copilot をグローバルに、または現在の言語に対して無効にするためのオプションのスクリーンショット

Further reading