Skip to main content

Visual Studio Code で GitHub Codespaces を使用する

          Visual Studio Code拡張機能をGitHub Codespaces アカウントに接続することで、GitHub内のコードスペースで直接開発できます。

          GitHub CodespacesについてVisual Studio Code

          Visual Studio Codeのローカル インストールを使用して、コードスペースの作成、管理、操作、削除を行うことができます。 
          VS Code で GitHub Codespaces を使用するには、Codespaces 拡張機能をインストールする必要があります。
          GitHub CodespacesでのVS Codeの設定の詳細については、「[前提条件](#prerequisites)」を参照してください。

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

ブラウザーで作業したいが、既存の VS Code 拡張機能、テーマ、ショートカットを引き続き使用する場合は、[設定の同期] をオンにすることができます。詳細については、 AUTOTITLE を参照してください。

前提条件

          VS Codeで直接コードスペースで開発するには、GitHub Codespaces資格情報を使用してGitHub拡張機能をインストールしてサインインする必要があります。 
          GitHub Codespaces拡張機能には、2020 年 10 月リリース 1.51 以降VS Code必要があります。

          Visual Studio Code Marketplaceを使用して、[GitHub Codespaces](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces)拡張機能をインストールします。 詳細については、[](https://code.visualstudio.com/docs/editor/extension-gallery)ドキュメントのVS Code を参照してください。
  1. VS Code のアクティビティ バーで、[リモート エクスプローラー] アイコンをクリックします。

    アクティビティ バーのスクリーンショット。 [リモート エクスプローラー] サイド バーのアイコン (四角形の上に円が重なっている) がオレンジ色の枠線で強調表示されています。

    メモ

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

    1. コマンド パレットにアクセスします。 たとえば、Shift + Command + P (Mac) / Ctrl + Shift + P (Windows/Linux) を押します。
    2. 次のコマンドを入力します: details
    3. [コードスペース: 詳細] をクリックします。
  2. [リモート エクスプローラー] サイド バーの上部にあるドロップダウンから [GitHub Codespaces] を選択します (まだ選択されていない場合)。

  3.        **[サインイン] GitHubをクリックします。**
    

    [リモート エクスプローラー] サイド バーの [GitHub Codespaces] のスクリーンショット。[GitHub にサインイン] ボタンが表示されています。

  4. 現在 GitHub にサインインしていない場合は、サインインするように求められます。 さあ、サインインしてください。

  5. 承認する内容を指定するように求められたら、[****] の [GitHub] ボタンをクリックします。

  6. 承認ページが表示されたら、 [Visual-Studio-Code の承認] をクリックします。

          GHE.com

に企業を接続する

          GitHubのサブドメインを介してGHE.comにアクセスする場合は、コードスペースに接続する前に、`Github-enterprise: Uri`で`Github > Codespaces: Auth Provider`とVS Codeの設定を構成する必要があります。

1. VS Code設定を開くには、Command+(Mac) または Ctrl+(Windows) を押します。

  1. 検索バーで enterprise を検索します。

  2.        `Github-enterprise: Uri`設定で、GitHubにアクセスする URL を入力します。 たとえば、 `https://octocorp.ghe.com`と指定します。
    

    または、 settings.json ファイルに次のコードを追加することもできます。

    JSON
    "github-enterprise.uri": "https://SUBDOMAIN.ghe.com"
    
  3.        VS Code設定で、`Codespaces Auth Provider`を検索します。
    
  4.        `Github > Codespaces: Auth Provider`設定で、ドロップダウンから`github-enterprise`を選択します。
    

    または、 settings.json ファイルに次のコードを追加することもできます。

    JSON
    "github.codespaces.authProvider": "github-enterprise"
    
  5. サインインを求めるプロンプトが表示されます。 GitHubをクリックして****、指示に従いアカウントを承認します。

    プロンプトが 表示されない場合は、 VS Code再起動してみてください。

           GitHub.comのアカウントに戻す必要がある場合は、`Github > Codespaces: Auth Provider`設定を既定値に戻し、`Github-enterprise: Uri`設定を削除します。
    

でコードスペースを作成する VS Code

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

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

    アクティビティ バーのスクリーンショット。 [リモート エクスプローラー] サイド バーのアイコン (四角形の上に円が重なっている) がオレンジ色の枠線で強調表示されています。

    メモ

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

    1. コマンド パレットにアクセスします。 たとえば、Shift + Command + P (Mac) / Ctrl + Shift + P (Windows/Linux) を押します。
    2. 次のコマンドを入力します: details
    3. [コードスペース: 詳細] をクリックします。
  2. [リモート エクスプローラー] サイド バーの上にマウス ポインターを合わせ、[] をクリックします。

    GitHub Codespaces の [リモート エクスプローラー] サイド バーのスクリーンショット。 プラス記号ボタンの横に [新しい codespace の作成] というヒントが表示されています。

  3. テキスト ボックスに開発を行うリポジトリの名前を入力し、それを選択します。

    テキスト ボックスに入力された「octo-org/he」と、この文字列で始まる 4 つのリポジトリの一覧のスクリーンショット。

    後続のプロンプトの右側に、codespace の料金を支払うユーザーを示すメッセージが表示されます。

    ブランチのプロンプトのスクリーンショット。"hubwriter によって支払われた使用量" というメッセージが表示されています。

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

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

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

    メモ

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

          VS Codeでコードスペースを開く
  1. VS Code のアクティビティ バーで、[リモート エクスプローラー] アイコンをクリックします。

    アクティビティ バーのスクリーンショット。 [リモート エクスプローラー] サイド バーのアイコン (四角形の上に円が重なっている) がオレンジ色の枠線で強調表示されています。

    メモ

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

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

  3. 接続アイコン (プラグの記号) をクリックします。

    [リモート エクスプローラー] サイド バーのスクリーンショット。 codespace の接続アイコン (プラグの記号) が濃いオレンジ色の枠線で強調表示されています。

でマシンの種類を変更する VS Code

          通常、任意の種類のリモート マシン上で codespace を実行できます。 これらのマシンの種類には、2 コアから 32 コアまでのハードウェア仕様が用意されていますが、すべての種類のマシンが常に使用できるわけではありません。 マシンの各種類には、それぞれ異なるレベルのリソースと異なる請求レベルが用意されています。 詳しくは、「[AUTOTITLE](/billing/managing-billing-for-your-products/managing-billing-for-github-codespaces/about-billing-for-github-codespaces)」を参照してください。
          
          既定では、codespace を作成するときに、有効なリソースが最も少ないマシンの種類が使われます。 コードスペースのマシンの種類はいつでも変更できます。

メモ

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

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

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

    検索文字列として「change machine」と入力され、ドロップダウン リストに [Codespaces: マシンの種類の変更] と表示されているスクリーンショット。

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

    4 つの codespace のドロップダウン リストを示すスクリーンショット。

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

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

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

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

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

でコードスペースを削除する VS Code

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

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

    アクティビティ バーのスクリーンショット。 [リモート エクスプローラー] サイド バーのアイコン (四角形の上に円が重なっている) がオレンジ色の枠線で強調表示されています。

    メモ

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

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

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

Web クライアントで VS Code Insider に切り替える

          VS Code Web クライアントを使用している場合は、アプリケーションの Insider バージョンに切り替えることができます。 このバージョンのVS Codeの詳細については、[](https://code.visualstudio.com/blogs/2016/02/01/introducing_insiders_build) ブログの VS Codeを参照してください。

codespace でバージョンを切り替えた後は、codespace を停止して再起動しても、Web クライアントでは引き続き Insiders バージョンが使用されます。 VS Code Web クライアントで作成して開く新しいコードスペースでも、Insider バージョンが使用されます。

  1. コードスペースを表示しているブラウザー ウィンドウの左下にある [ ] をクリックします。

  2. メニューで、[Insiders バージョンに切り替える] を選択します。

    VS Code Web クライアントのスクリーンショット。 歯車アイコンがオレンジ色の枠線で強調表示されています。 [Insiders バージョンに切り替える] がメニューに表示されています。

  3.        **[再読み込み]** をクリックします。
    

安定バージョンの VS Codeに戻すには、プロセスを繰り返しますが、[ 安定バージョンに切り替える] を選択します。 戻した後は、codespace を停止して再起動しても、codespace では引き続き安定バージョンが使用されます。 VS Code Web クライアントで作成して開く新しいコードスペースでも、安定バージョンが使用されます。

Insiders デスクトップ アプリケーションの利用方法 Codespaces

          GitHub Codespaces デスクトップ アプリケーションの Insider バージョンでVS Codeを使用するには、VS Code Insiders アプリケーション内からコードスペースを開始または作成します。 詳細については、VS Code[でのコードスペースの作成](#creating-a-codespace-in-vs-code)と、この記事の前[のVS Codeでコードスペースを開](#opening-a-codespace-in-vs-code)く方法に関する記事を参照してください。

参考資料

  •         [AUTOTITLE](/codespaces/reference/using-the-vs-code-command-palette-in-codespaces)
    
  •         [AUTOTITLE](/codespaces/reference/using-github-copilot-in-github-codespaces)