The Wayback Machine - https://web.archive.org/web/20220911092345/https://docs.github.com/ja/codespaces/developing-in-codespaces/using-github-codespaces-in-visual-studio-code
Skip to main content

Using GitHub Codespaces in Visual Studio Code

You can develop in your codespace directly in Visual Studio Code by connecting the GitHub Codespaces extension with your account on GitHub.

GitHub Codespaces is available for organizations using GitHub Team or GitHub Enterprise Cloud. GitHub Codespaces is also available as a limited beta release for individual users on GitHub Free and GitHub Pro plans. 詳細については、「GitHub's products」を参照してください。

About GitHub Codespaces in Visual Studio Code

You can use your local install of Visual Studio Code to create, manage, work in, and delete codespaces. To use GitHub Codespaces in VS Code, you need to install the Codespaces extension. For more information on setting up Codespaces in VS Code, see "Prerequisites."

By default, if you create a new codespace on GitHub.com, it will open in the browser. If you would prefer to open any new codespaces in VS Code automatically, you can set your default editor to be VS Code. For more information, see "Setting your default editor for GitHub Codespaces."

If you prefer to work in the browser, but want to continue using your existing VS Code extensions, themes, and shortcuts, you can turn on Settings Sync. For more information, see "Personalizing GitHub Codespaces for your account."

Prerequisites

To develop in a codespace directly in VS Code, you must install and sign into the Codespaces extension with your GitHub credentials. The Codespaces extension requires VS Code October 2020 Release 1.51 or later.

Use the Visual Studio Code Marketplace to install the Codespaces extension. For more information, see Extension Marketplace in the VS Code documentation.

  1. In VS Code, in the left sidebar, click the Remote Explorer icon.

    The Remote Explorer icon in Visual Studio Code

    Note: If the Remote Explorer is not displayed in the Activity Bar:

    1. Access the Command Palette. For example, by pressing Shift+Command+P (Mac) / Ctrl+Shift+P (Windows/Linux).
    2. Type: codespaces.
    3. Click Codespaces: Details.
  2. Click Sign in to view GitHub....

    Signing in to view Codespaces

  3. To authorize VS Code to access your account on GitHub, click Allow.

  4. Sign in to GitHub to approve the extension.

  1. In VS Code, in the left sidebar, click the Remote Explorer icon.

    The Remote Explorer icon in Visual Studio Code

    Note: If the Remote Explorer is not displayed in the Activity Bar:

    1. Access the Command Palette. For example, by pressing Shift+Command+P (Mac) / Ctrl+Shift+P (Windows/Linux).
    2. Type: codespaces.
    3. Click Codespaces: Details.
  2. Use the "REMOTE EXPLORER" drop-down, then click GitHub Codespaces.

    The Codespaces header

  3. Click Sign in to view Codespaces....

    Signing in to view Codespaces

  4. To authorize VS Code to access your account on GitHub, click Allow.

  5. Sign in to GitHub to approve the extension.

Creating a codespace in VS Code

GitHub.com のアカウントを GitHub Codespaces 拡張機能に接続したら、新しい codespace を作成することができます。 GitHub Codespaces 拡張機能の詳しい情報については、VS Code Marketplace マーケットプレースに関するページを参照してください。

: 現在、VS Code では、codespace 作成時に、開発コンテナー構成を選択することができません。 特定の開発コンテナー構成を選択する場合は、GitHub Web インターフェイスを使って、codespace を作成します。 詳しい情報については、このページの上部にある [Web ブラウザー] タブをクリックしてください。

  1. In VS Code, in the left sidebar, click the Remote Explorer icon.

    The Remote Explorer icon in Visual Studio Code

    Note: If the Remote Explorer is not displayed in the Activity Bar:

    1. Access the Command Palette. For example, by pressing Shift+Command+P (Mac) / Ctrl+Shift+P (Windows/Linux).
    2. Type: codespaces.
    3. Click Codespaces: Details.
  2. [追加] アイコン をクリックします。

    Codespaces の [Create New Codespace] オプション

  3. 開発するリポジトリの名前を入力し、それを選択します。

    新しい Codespaces を作成するためのリポジトリを検索する

  4. 開発するブランチをクリックします。

    新しい Codespaces を作成するためのブランチを検索する

  5. 開発コンテナー構成ファイルの選択を求められたら、一覧からファイルを選びます。

    Codespaces の開発コンテナー構成ファイルの選択

  6. 使用するマシンの種類をクリックします。

    新しい Codespaces のインスタンスタイプ

    : 使用可能なマシンの種類の選択は、組織に設定されたポリシーまたはリポジトリの最低限のマシンのタイプの仕様によって制限される場合があります。 詳細については、「マシンのタイプへのアクセスの制限」および「コードスペース マシンの最低限の仕様の設定」を参照してください。

Opening a codespace in VS Code

  1. In VS Code, in the left sidebar, click the Remote Explorer icon.

    The Remote Explorer icon in Visual Studio Code

    Note: If the Remote Explorer is not displayed in the Activity Bar:

    1. Access the Command Palette. For example, by pressing Shift+Command+P (Mac) / Ctrl+Shift+P (Windows/Linux).
    2. Type: codespaces.
    3. Click Codespaces: Details.
  2. Under "Codespaces", click the codespace you want to develop in.

  3. Click the Connect to Codespace icon.

    The Connect to Codespace icon in VS Code

Changing the machine type in VS Code

通常、2 コアから 32 コアの任意のリモート マシン上で codespace を実行できます。 これらはそれぞれ、異なるレベルのリソースと支払い層を持っています。 詳しくは、「GitHub Codespaces の支払いについて」をご覧ください。

既定では、codespace を作成するときに、有効なリソースが最も少ないマシンの種類が使われます。 You can change the machine type of your codespace at any time.

  1. In VS Code, open the Command Palette (shift command P / shift control P).

  2. Search for and select "Codespaces: Change Machine Type."

    Searching for a branch to create a new Codespaces

  3. Click the codespace that you want to change.

    Searching for a branch to create a new Codespaces

  4. Choose the machine type you want to use.

    Note: 使用可能なマシンの種類の選択は、組織に設定されたポリシーまたはリポジトリの最低限のマシンのタイプの仕様によって制限される場合があります。 詳細については、「マシンのタイプへのアクセスの制限」および「コードスペース マシンの最低限の仕様の設定」を参照してください。

  5. If the codespace is currently running, a message is displayed asking if you would like to restart and reconnect to your codespace now.

    Click Yes if you want to change the machine type used for this codespace immediately.

    If you click No, or if the codespace is not currently running, the change will take effect the next time the codespace restarts.

Deleting a codespace in VS Code

現在 codespace で作業していない場合、VS Code 内から codespace を削除できます。

  1. In VS Code, in the left sidebar, click the Remote Explorer icon.

    The Remote Explorer icon in Visual Studio Code

    Note: If the Remote Explorer is not displayed in the Activity Bar:

    1. Access the Command Palette. For example, by pressing Shift+Command+P (Mac) / Ctrl+Shift+P (Windows/Linux).
    2. Type: codespaces.
    3. Click Codespaces: Details.
  2. [GITHUB CODESPACE] で、削除する codespace を右クリックします。

  3. [Codespace の削除] をクリックします。

    GitHub で Codespaces を削除する

Switching to the Insiders build of VS Code

You can use the Insiders Build of VS Code within Codespaces.

  1. In bottom left of your Codespaces window, select Settings.

  2. From the list, select "Switch to Insiders Version".

    Clicking on "Insiders Build" in Codespaces

  3. Once selected, Codespaces will continue to open in Insiders Version.