Skip to main content

Utilisation de GitHub Codespaces dans Visual Studio Code

Vous pouvez dĂ©velopper dans votre espace de code directement dans Visual Studio Code en connectant l’extension GitHub Codespaces avec votre compte GitHub.

À propos de GitHub Codespaces dans Visual Studio Code

Vous pouvez utiliser votre installation locale de Visual Studio Code pour crĂ©er, gĂ©rer, utiliser et supprimer des codespaces. Pour utiliser GitHub Codespaces dans VS Code, vous devez installer l’extension Codespaces. Pour plus d’informations sur la configuration de GitHub Codespaces dans VS Code, consultez PrĂ©requis.

Par dĂ©faut, si vous crĂ©ez un codespace sur GitHub, il s’ouvre dans le navigateur. Si vous prĂ©fĂ©rez que les nouveaux codespaces s’ouvrent automatiquement dans VS Code, vous pouvez dĂ©finir VS Code comme Ă©diteur par dĂ©faut. Pour plus d’informations, consultez « DĂ©finition de votre Ă©diteur par dĂ©faut pour GitHub Codespaces Â».

Si vous prĂ©fĂ©rez travailler dans le navigateur, mais que vous souhaitez continuer Ă  utiliser vos extensions, thĂšmes et raccourcis VS Code existants, vous pouvez activer la fonctionnalitĂ© Synchronisation des paramĂštres. Pour plus d’informations, consultez « Personnalisation de GitHub Codespaces pour votre compte Â».

Prérequis

Pour dĂ©velopper Ă  partir d’un codespace directement dans VS Code, vous devez installer et vous connecter Ă  l’extension GitHub Codespaces avec vos informations d’identification GitHub. L’extension GitHub Codespaces requiert la version 1.51 d’octobre 2020 de VS Code (ou version ultĂ©rieure).

Utilisez Visual Studio Code Marketplace pour installer l’extension GitHub Codespaces. Pour plus d’informations, consultez Place de marchĂ© des extensions dans la documentation VS Code.

  1. Dans VS Code, dans la barre ActivitĂ©, cliquez sur l’icĂŽne de l’Explorateur distant.

    Capture d’écran de la barre d’activitĂ©s. L’icĂŽne de la barre latĂ©rale « Explorateur distant Â» (rectangle avec un cercle par-dessus) est mise en Ă©vidence avec un encadrĂ© orange.

    Remarque

    Si l'explorateur à distance n'est pas affiché dans la barre d'activité :

    1. Accédez à la palette de commandes. Par exemple, en appuyant sur Maj+Commande+P (Mac)/Ctrl+Maj+P (Windows/Linux).
    2. Entrez : details.
    3. Cliquez sur Codespaces : DĂ©tails.
  2. SĂ©lectionnez « GitHub Codespaces Â» dans le menu dĂ©roulant au sommet de la barre latĂ©rale de l’Explorateur distant, s’il n’est pas dĂ©jĂ  sĂ©lectionnĂ©.

  3. Cliquez sur Se connecter Ă  GitHub .

    Capture d’écran de la barre latĂ©rale « Explorateur distant Â» pour « GitHub Codespaces Â» avec le bouton « Se connecter Ă  GitHub Â» affichĂ©.

  4. Si vous n’ĂȘtes pas connectĂ© Ă  GitHub, vous ĂȘtes invitĂ© Ă  la faire. Connectez-vous.

  5. Lorsque vous ĂȘtes invitĂ© Ă  spĂ©cifier ce que vous souhaitez autoriser, cliquez sur le bouton Autoriser pour « GitHub Â».

  6. Si la page d’autorisation s’affiche, cliquez sur Autoriser Visual-Studio-Code.

CrĂ©ation d’un codespace dans VS Code

AprĂšs avoir connectĂ© votre compte sur GitHub Ă  l’extension GitHub Codespaces, vous pouvez crĂ©er un codespace. Pour plus d’informations sur l’extension GitHub Codespaces, consultez la VS Code Marketplace.

  1. Dans VS Code, dans la barre ActivitĂ©, cliquez sur l’icĂŽne de l’Explorateur distant.

    Capture d’écran de la barre d’activitĂ©s. L’icĂŽne de la barre latĂ©rale « Explorateur distant Â» (rectangle avec un cercle par-dessus) est mise en Ă©vidence avec un encadrĂ© orange.

    Remarque

    Si l'explorateur à distance n'est pas affiché dans la barre d'activité :

    1. Accédez à la palette de commandes. Par exemple, en appuyant sur Maj+Commande+P (Mac)/Ctrl+Maj+P (Windows/Linux).
    2. Entrez : details.
    3. Cliquez sur Codespaces : DĂ©tails.
  2. Pointez sur la barre latĂ©rale « Explorateur distant Â», puis cliquez sur .

    Capture d’écran de la barre latĂ©rale « Explorateur distant Â» pour GitHub Codespaces. L’info-bulle « CrĂ©er un codespace Â» s’affiche Ă  cĂŽtĂ© du bouton signe plus.

  3. Dans la zone de texte, entrez le nom du référentiel dans lequel vous souhaitez développer, puis sélectionnez-le.

    Capture d’écran de « octo-org/he Â» entrĂ© dans la zone de texte et une liste de quatre dĂ©pĂŽts qui commencent par cette chaĂźne.

    Un message s’affiche à droite des invites suivantes vous indiquant qui paiera pour le codespace.

    Capture d’écran d’une invite pour une branche, avec le message « Utilisation payĂ©e par hubwriter Â».

  4. Cliquez sur la branche sur laquelle vous souhaitez développer.

  5. Si vous ĂȘtes invitĂ© Ă  choisir un fichier de configuration de conteneur de dĂ©veloppement, choisissez un fichier dans la liste.

  6. Choisissez le type de machine que vous souhaitez utiliser.

    Remarque

    Votre choix de types d’ordinateurs disponibles peut ĂȘtre limitĂ© par un certain nombre de facteurs. Il peut s’agir par exemple d’une stratĂ©gie configurĂ©e pour votre organisation, ou une spĂ©cification de type d’ordinateur minimal pour votre dĂ©pĂŽt. Pour plus d’informations, consultez « Restriction de l’accĂšs aux types de machines Â» et « DĂ©finition d’une spĂ©cification minimale pour les machines de codespaces Â».

Ouverture d’un codespace dans VS Code

  1. Dans VS Code, dans la barre ActivitĂ©, cliquez sur l’icĂŽne de l’Explorateur distant.

    Capture d’écran de la barre d’activitĂ©s. L’icĂŽne de la barre latĂ©rale « Explorateur distant Â» (rectangle avec un cercle par-dessus) est mise en Ă©vidence avec un encadrĂ© orange.

    Remarque

    Si l'explorateur à distance n'est pas affiché dans la barre d'activité :

    1. Accédez à la palette de commandes. Par exemple, en appuyant sur Maj+Commande+P (Mac)/Ctrl+Maj+P (Windows/Linux).
    2. Entrez : details.
    3. Cliquez sur Codespaces : DĂ©tails.
  2. Sous « GitHub Codespaces Â», pointez sur le codespace dans lequel vous souhaitez dĂ©velopper.

  3. Cliquez sur l’icîne de connexion (symbole de plug-in).

    Capture d’écran de la barre latĂ©rale « Explorateur distant Â». L’icĂŽne de connexion d’un codespace (symbole de plug-in) est mise en Ă©vidence avec un contour orange foncĂ©.

Modification du type de machine dans VS Code

En rĂšgle gĂ©nĂ©rale, vous pouvez exĂ©cuter votre codespace sur une sĂ©lection de types d’ordinateurs distants. Ces types d’ordinateur offrent un choix de spĂ©cifications matĂ©rielles allant de 2 cƓurs Ă  32 cƓurs, mĂȘme si la gamme complĂšte de types d’ordinateur n’est pas toujours disponible. Chaque type d’ordinateur correspond Ă  un niveau de ressources diffĂ©rent et Ă  un niveau de facturation diffĂ©rent. Pour plus d’informations, consultez Facturation GitHub Codespaces.

Par défaut, le type de machine doté des ressources valides les plus faibles est utilisé quand vous créez un codespace. Vous pouvez à tout moment modifier le type de machine de votre codespace.

Remarque

Votre choix de types d’ordinateurs disponibles peut ĂȘtre limitĂ© par un certain nombre de facteurs. Il peut s’agir par exemple d’une stratĂ©gie configurĂ©e pour votre organisation, ou une spĂ©cification de type d’ordinateur minimal pour votre dĂ©pĂŽt. Pour plus d’informations, consultez « Restriction de l’accĂšs aux types de machines Â» et « DĂ©finition d’une spĂ©cification minimale pour les machines de codespaces Â».

  1. Dans VS Code, ouvrez la palette de commandes avec Commande+Maj+P (Mac) ou Ctrl+Maj+P (Windows/Linux).

  2. Recherchez et sĂ©lectionnez « Codespaces : Modifier le type de machine Â».

    Capture d’écran de « change machine Â» entrĂ© en tant que chaĂźne de recherche et de « Codespaces: Change Machine Type Â» dans la liste dĂ©roulante.

  3. Si vous ne suivez pas ces instructions dans un codespace, cliquez sur le codespace Ă  changer.

    Capture d’écran d’une liste dĂ©roulante de quatre codespaces.

    Si vous suivez ces instructions dans un codespace, le changement s’applique au codespace dans lequel vous travaillez.

  4. Sélectionnez le type de machine à utiliser.

  5. Si vous passez Ă  un type de machine ayant une autre capacitĂ© de stockage, une invite s’affiche pour vous demander si vous souhaitez continuer. Lisez l’invite, puis cliquez sur Oui pour accepter.

Si vous passez Ă  une machine virtuelle ayant une capacitĂ© de stockage diffĂ©rente (par exemple, d’une machine de 32 Go Ă  une autre de 64 Go), votre espace de code sera indisponible pendant une courte pĂ©riode, le temps que le type de machine soit modifiĂ©. Si le codespace est actif, il est automatiquement arrĂȘtĂ©. Une fois le changement effectuĂ©, vous pourrez redĂ©marrer le codespace qui s’exĂ©cute sur le nouveau type de machine.

Si vous ĂȘtes passĂ© Ă  une machine virtuelle ayant la mĂȘme capacitĂ© de stockage, le changement sera appliquĂ© au prochain redĂ©marrage du codespace. Un codespace actif n’est pas arrĂȘtĂ© automatiquement. Pour plus d’informations sur le redĂ©marrage d’un codespace, consultez ArrĂȘt et dĂ©marrage d’un codespace.

Suppression d’un codespace dans VS Code

Vous pouvez supprimer des codespaces depuis VS Code Ă  condition de ne pas travailler dans un codespace.

  1. Dans VS Code, dans la barre ActivitĂ©, cliquez sur l’icĂŽne de l’Explorateur distant.

    Capture d’écran de la barre d’activitĂ©s. L’icĂŽne de la barre latĂ©rale « Explorateur distant Â» (rectangle avec un cercle par-dessus) est mise en Ă©vidence avec un encadrĂ© orange.

    Remarque

    Si l'explorateur à distance n'est pas affiché dans la barre d'activité :

    1. Accédez à la palette de commandes. Par exemple, en appuyant sur Maj+Commande+P (Mac)/Ctrl+Maj+P (Windows/Linux).
    2. Entrez : details.
    3. Cliquez sur Codespaces : DĂ©tails.
  2. Sous « GitHub Codespaces Â», cliquez avec le bouton droit sur le codespace que vous souhaitez supprimer.

  3. Cliquez sur Supprimer le codespace.

Passage Ă  VS Code Insiders dans le client web

Si vous utilisez le client web VS Code, vous pouvez basculer vers la version Insiders de l’application. Pour plus d’informations sur cette version de VS Code, consultez PrĂ©sentation de la version Insiders dans le billet de blog VS Code.

Une fois que vous avez changĂ© de version dans un codespace, le client web continue Ă  utiliser la version Insiders si vous arrĂȘtez et redĂ©marrez le codespace. Les nouveaux codespaces que vous crĂ©ez et ouvrez dans le client web VS Code utilisent Ă©galement la version Insiders.

  1. En bas Ă  gauche de la fenĂȘtre du navigateur qui affiche un codespace, cliquez sur .

  2. Dans le menu, sĂ©lectionnez « Passer Ă  la version Insiders Â».

    Capture d’écran du client web VS Code. Une icĂŽne reprĂ©sentant un engrenage est mise en Ă©vidence avec un encadrĂ© orange. « Passer Ă  la version Insiders Â» s’affiche dans le menu.

  3. Cliquez sur Recharger.

Pour revenir Ă  la version stable de VS Code, rĂ©pĂ©tez le processus, mais choisissez Basculer vers la version stable. Une fois que vous basculez Ă  nouveau, le codespace continue d’utiliser la version stable si vous arrĂȘtez et redĂ©marrez le codespace. Les nouveaux codespaces que vous crĂ©ez et ouvrez dans le client web VS Code utilisent Ă©galement la version stable.

Utilisation de l’application de bureau Insiders pour Codespaces

Pour utiliser GitHub Codespaces dans la version Insiders de l’application de bureau VS Code, dĂ©marrez ou crĂ©ez vos codespaces Ă  partir de l’application VS Code Insiders. Pour plus d’informations, consultez CrĂ©ation d’un codespace dans VS Code et Ouverture d’un codespace dans VS Code plus haut dans cet article.

Pour aller plus loin