Skip to main content

Visual Studio Code で GitHub Codespaces を使用する

GitHub Enterprise Cloud のアカウントに GitHub Codespaces 拡張機能を接続することで、Visual Studio Code で codespace を直接開発できます。

Visual Studio Code の GitHub Codespaces について

Visual Studio Code のローカル インストールを使用して、codespace の作成、管理、作業、削除を行うことができます。 VS Code で GitHub Codespaces を使用するには、Codespaces 拡張機能をインストールする必要があります。 VS Code での GitHub Codespaces の設定について詳しくは、「前提条件」をご覧ください。

既定では、GitHub.com で作成した新しい codespace は、ブラウザーで開きます。 VS Code で新しい codespace を自動的に開きたい場合は、既定のエディターを VS Code に設定できます。 詳しくは、「GitHub Codespaces の既定のエディターを設定する」をご覧ください。

ブラウザーで作業したいが、既存の VS Code 拡張機能、テーマ、ショートカットを引き続き使用する場合は、Settings Sync を有効にすることができます。詳しくは、「アカウントの GitHub Codespaces をパーソナライズする」をご覧ください。

前提条件

VS Code の codespace で直接開発するには、GitHub Codespaces 拡張機能をインストールして、GitHub Enterprise Cloud 資格情報を使用してサインインする必要があります。 GitHub Codespaces 拡張機能には、VS Code October 2020 Release 1.51 以降が必要です。

Visual Studio Code Marketplace を使用して GitHub Codespaces 拡張機能をインストールします。 詳細については、VS Code ドキュメントの「拡張機能マーケットプレース」を参照してください。

  1. VS Code の左サイドバーで、[リモート エクスプローラー] のアイコンをクリックします。

    Visual Studio Code のリモート エクスプローラー アイコン

    : リモート エクスプローラーがアクティビティ バーに表示されない場合:

    1. コマンド パレットにアクセスします。 たとえば、Shift + Command + P (Mac) / Ctrl + Shift + P (Windows/Linux) を押します。
    2. 次のコマンドを入力します: codespaces
    3. [コードスペース: 詳細] をクリックします。
  2. [GitHub にサインイン...] をクリックします。

    GitHub Codespaces にサインインする

  3. VS Code からの GitHub Enterprise Cloud のアカウントへのアクセスを承認するには、 [許可] をクリックします。

  4. 機能拡張を承認するには、GitHub Enterprise Cloud にサインインします。

  1. VS Code の左サイドバーで、[リモート エクスプローラー] のアイコンをクリックします。

    Visual Studio Code のリモート エクスプローラー アイコン

    : リモート エクスプローラーがアクティビティ バーに表示されない場合:

    1. コマンド パレットにアクセスします。 たとえば、Shift + Command + P (Mac) / Ctrl + Shift + P (Windows/Linux) を押します。
    2. 次のコマンドを入力します: codespaces
    3. [コードスペース: 詳細] をクリックします。
  2. [REMOTE EXPLORER] ドロップダウンを使用して、 GitHub Codespaces をクリックします。

    GitHub Codespaces ヘッダー

  3. [サインインして Codespaces を表示] をクリックします。

    サインインして GitHub Codespaces を表示する

  4. VS Code からの GitHub Enterprise Cloud のアカウントへのアクセスを承認するには、 [許可] をクリックします。

  5. 機能拡張を承認するには、GitHub Enterprise Cloud にサインインします。

VS Code で Codespaces を作成する

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

  1. VS Code の左サイドバーで、[リモート エクスプローラー] のアイコンをクリックします。

    Visual Studio Code のリモート エクスプローラー アイコン

    : リモート エクスプローラーがアクティビティ バーに表示されない場合:

    1. コマンド パレットにアクセスします。 たとえば、Shift + Command + P (Mac) / Ctrl + Shift + P (Windows/Linux) を押します。
    2. 次のコマンドを入力します: codespaces
    3. [コードスペース: 詳細] をクリックします。
  2. [追加] アイコン をクリックします。

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

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

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

    選択したリポジトリが組織所有であり、このリポジトリの料金がその組織かその親会社に請求されるよう、codespace が設定されている場合、後続のプロンプトにメッセージが表示され、codespace の料金の支払者が伝えられます。

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

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

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

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

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

    新しい codespace のインスタンス型

    : 使用可能なマシンは、数多くの要因によって、選択の幅が制限されます。 これには、Organization に対して構成されているポリシーや、リポジトリでの最低限の種類のマシン仕様が含まれます。 詳細については、「マシンのタイプへのアクセスの制限」および「コードスペース マシンの最低限の仕様の設定」を参照してください。

VS Code で codespace を開く

  1. VS Code の左サイドバーで、[リモート エクスプローラー] のアイコンをクリックします。

    Visual Studio Code のリモート エクスプローラー アイコン

    : リモート エクスプローラーがアクティビティ バーに表示されない場合:

    1. コマンド パレットにアクセスします。 たとえば、Shift + Command + P (Mac) / Ctrl + Shift + P (Windows/Linux) を押します。
    2. 次のコマンドを入力します: codespaces
    3. [コードスペース: 詳細] をクリックします。
  2. [Codespaces] で、開発するコードスペースをクリックします。

  3. [Connect to Codespace] アイコンをクリックします。

    VS Code の [Connect to Codespace](Codespace への接続) アイコン

VS Code のマシンの種類の変更

通常、任意の種類のリモート マシン上で codespace を実行できます。 これらのマシンの種類には、2 コアから 32 コアまでのハードウェア仕様が用意されていますが、すべての種類のマシンが常に使用できるわけではありません。 マシンの各種類には、それぞれ異なるレベルのリソースと異なる請求レベルが用意されています。 詳しくは、「GitHub Codespaces の支払いについて」をご覧ください。

既定では、codespace を作成するときに、有効なリソースが最も少ないマシンの種類が使われます。 codespace のマシンの種類はいつでも変更できます。

: 使用可能なマシンは、数多くの要因によって、選択の幅が制限されます。 これには、Organization に対して構成されているポリシーや、リポジトリでの最低限の種類のマシン仕様が含まれます。 詳細については、「マシンのタイプへのアクセスの制限」および「コードスペース マシンの最低限の仕様の設定」を参照してください。

  1. VS Code で、Command + Shift + P (Mac) または Ctrl + Shift + P (Windows/Linux) を使ってコマンド パレットを開きます。

  2. 「Codespaces: マシンの種類の変更」を検索して選択します。

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

  3. codespace 内でこれらの手順に従っていない場合は、変更する codespace をクリックします。

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

    codespace でこれらの手順に従っている場合は、作業中の codespace に変更が適用されます。

  4. 使用するマシンの種類を選択びます。

  5. 異なるストレージ容量を持つマシンの種類に変更する場合は、続行するかどうかを確認するプロンプトが表示されます。 そのプロンプトを読み、 [はい] をクリックして同意します。

ストレージ容量が異なる仮想マシンに変更した場合 (たとえば、64 GB から 32 GB)、そのマシンの種類が変更される間の短時間は codespace を使用できなくなります。 codespace が現在アクティブの場合は、自動的に停止されます。 変更が完了すると、新しい種類のマシンで実行されている codespace を再起動できます。

同じストレージ容量を持つ仮想マシンに変更した場合は、次回 codespace を再起動するときに変更が適用されます。 アクティブな codespace は自動的に停止されません。 codespace の再起動について詳しくは、「codespace の停止と開始」を参照してください。

VS Code で Codespaces を削除する

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

  1. VS Code の左サイドバーで、[リモート エクスプローラー] のアイコンをクリックします。

    Visual Studio Code のリモート エクスプローラー アイコン

    : リモート エクスプローラーがアクティビティ バーに表示されない場合:

    1. コマンド パレットにアクセスします。 たとえば、Shift + Command + P (Mac) / Ctrl + Shift + P (Windows/Linux) を押します。
    2. 次のコマンドを入力します: codespaces
    3. [コードスペース: 詳細] をクリックします。
  2. [GITHUB CODESPACE] で、削除する codespace を右クリックします。

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

    GitHub で Codespaces を削除する

VS Code の Insider ビルドへの切り替え

GitHub Codespaces 内で [VS Code の Insiders ビルド] を使うことができます。

  1. GitHub Codespaces ウィンドウの左下にある [ 設定] を選びます。

  2. 一覧から [Insiders バージョンに切り替える] を選択します。

    GitHub Codespaces で [Insiders ビルド] をクリックする

  3. 選択すると、GitHub Codespaces が Insider バージョンで開いたままになります。

参考資料