Démarrage rapide pour GitHub Codespaces

Démarrez rapidement avec GitHub Codespaces.

Dans cet article

Introduction

Dans ce guide, vous allez créer un codespace à partir d’un modèle de référentiel et explorer certaines des fonctionnalités essentielles disponibles dans le codespace. Vous allez travailler dans la version du navigateur de Visual Studio Code, qui est initialement l’éditeur par défaut pour GitHub Codespaces. Après avoir essayé ce guide de démarrage rapide, vous pouvez utiliser Codespaces dans d’autres éditeurs et modifier l’éditeur par défaut. Des liens sont fournis à la fin de ce guide.

À partir de ce guide de démarrage rapide, vous allez découvrir comment créer un codespace, vous connecter à un port transféré pour voir votre application s’exécuter, publier votre codespace dans un nouveau dépôt et personnaliser votre configuration avec des extensions.

Pour plus d’informations sur le fonctionnement GitHub Codespaces exact, consultez le guide complémentaire Présentation approfondie de GitHub Codespaces.

Création de votre codespace

  1. Accédez au dépôt de modèles github/haikus-for-codespaces.

  2. Cliquez sur Utiliser ce modèle, puis sur Ouvrir dans un codespace.

    Capture d’écran du bouton « Utiliser ce modèle » et du menu déroulant développé pour afficher l’option « Ouvrir dans un codespace ».

Exécution de l'application

Une fois le codespace créé, le dépôt de modèles est automatiquement cloné dans celui-ci. Vous pouvez maintenant exécuter l’application et la lancer dans un navigateur.

  1. Lorsque le terminal devient disponible, entrez la commande npm run dev. Cet exemple utilise un projet Node.js et cette commande exécute le script intitulé « dev » dans le fichier package.json, qui démarre l’application web définie dans l’exemple de dépôt.

    Capture d’écran du terminal dans VS Code avec la commande « npm run dev » entrée.

    S’il s’agit d’un autre type d’application, entrez la commande de démarrage correspondante pour ce projet.

  2. Quand votre application démarre, le codespace reconnaît le port sur lequel l’application s’exécute et affiche un message contextuel pour vous informer que le port a été transféré.

    Capture d’écran du message contextuel : « Votre application exécutée sur le port 3000 est disponible ». En dessous se trouve un bouton vert intitulé « Ouvrir dans le navigateur ».

  3. Cliquez sur Ouvrir dans le navigateur pour afficher votre application en cours d’exécution dans un nouvel onglet.

Modifier l’application et afficher les modifications

  1. Revenez à votre codespace et ouvrez le fichier haikus.json en cliquant dessus dans l’Explorateur.

  2. Modifiez le champ text du premier haiku pour personnaliser l’application avec votre propre haiku.

  3. Revenez à l’onglet de l’application en cours d’exécution dans votre navigateur et actualisez pour afficher vos modifications.

Si vous avez fermé l’onglet du navigateur, cliquez sur l’onglet VS CodePorts, pointez sur la valeur d’adresse locale du port en cours d’exécution, puis cliquez sur l’icône Ouvrir dans le navigateur .

Capture d’écran du volet « Ports ». L’onglet « Ports » et une icône de globe, qui ouvre le port transféré dans un navigateur, sont mis en évidence avec des encadrés en orange.

Validation (commit) et envoi (push) de vos modifications

Maintenant que vous avez apporté quelques modifications, vous pouvez utiliser le terminal intégré ou la vue source pour publier votre travail dans un nouveau dépôt.

  1. Dans la barre d’activités, cliquez sur la vue Contrôle de code source.

    Capture d’écran de la barre d’activités VS Code avec le bouton Contrôle de code source mis en surbrillance avec un encadré orange.

  2. Pour indexer vos modifications, cliquez sur à côté du fichier haikus.json, ou à côté de Modifications si vous avez modifié plusieurs fichiers et que vous souhaitez tous les indexer.

    Capture d’écran de la barre latérale « Contrôle de code source » avec le bouton de mise en scène (signe plus), à droite de « Modifications », mis en évidence avec un contour orange foncé.

  3. Pour valider vos modifications mises en scène, tapez un message de validation décrivant la modification que vous avez apportée, puis cliquez sur Valider.

    Capture d’écran de la barre latérale « Contrôle de code source ». Le message de commit, « Modifier le texte et les styles du haïku », et le bouton « Commit » sont mis en évidence en orange.

  4. Cliquez sur Publier la branche.

    Capture d’écran de la barre latérale « Gestion de code source » montrant le bouton « Publier la branche ».

  5. Dans la liste déroulante « Nom du référentiel », tapez un nom pour votre nouveau référentiel, puis sélectionnez Publier dans GitHub un référentiel privé ou Publier dans GitHub un référentiel public.

    Capture d’écran du menu déroulant du nom du référentiel dans VS Code. Deux options s’affichent pour publier sur un dépôt privé ou public.

    Le propriétaire du nouveau référentiel sera le GitHub compte avec lequel vous avez créé l’espace de code.

  6. Dans la fenêtre contextuelle qui s’affiche dans le coin inférieur droit de l’éditeur, cliquez sur GitHubOuvrir pour afficher le nouveau référentiel sur GitHub. Dans le nouveau dépôt, affichez le fichier haikus.json et vérifiez que la modification que vous avez apportée dans votre codespace a bien été poussée dans le dépôt.

    Capture d’écran d’un message de confirmation d’un dépôt publié avec succès, montrant le bouton « Ouvrir dans GitHub ».

Personnalisation avec une extension

Lorsque vous vous connectez à un espace de code à l’aide du navigateur ou de l’application Visual Studio Code de bureau, vous pouvez accéder à la Visual Studio Code Place de marché directement à partir de l’éditeur. Pour cet exemple, vous allez installer une VS Code extension qui modifie le thème, mais vous pouvez installer n’importe quelle extension utile pour votre flux de travail.

  1. Dans la barre d’activités, cliquez sur l’icône Extensions.

    Capture d’écran de la barre d’activités. L’icône Extensions est mise en évidence avec un encadré orange.

  2. Dans la barre de recherche, tapez fairyfloss et cliquez sur Installer.

    Capture d’écran de « Extensions : Place de marché ». La zone de recherche affiche « fairyfloss ». Les résultats affichent l’extension « fairyfloss » avec un bouton « Installer ».

  3. Sélectionnez le thème fairyfloss en le sélectionnant dans la liste.

    Capture d’écran de la liste déroulante « Sélectionner le thème de couleur », avec le thème « fairyfloss » sélectionné.

À propos de la synchronisation des paramètres

Vous pouvez activer la synchronisation des paramètres pour synchroniser les extensions et d’autres paramètres entre les appareils et les instances de VS Code. Vos paramètres synchronisés sont mis en cache dans le cloud. Si la synchronisation des paramètres est activée dans un codespace, toutes les mises à jour que vous apportez à vos paramètres dans le codespace sont envoyées vers le cloud et toutes les mises à jour que vous envoyez au cloud à partir d’un autre emplacement sont extraites de votre codespace. Pour plus d’informations, consultez Personnaliser GitHub Codespaces pour votre compte.

Étapes suivantes

Vous avez créé, personnalisé et exécuté avec succès votre première application dans un codespace. Il vous reste encore beaucoup de choses à découvrir. Voici quelques ressources utiles pour effectuer vos prochaines étapes avec GitHub Codespaces.

Pour aller plus loin