Remarque : l’éditeur github.dev est actuellement en préversion bêta. Vous pouvez formuler des commentaires dans nos discussions.
À propos de l’éditeur github.dev
L’éditeur github.dev introduit une expérience d’édition légère qui s’exécute entièrement dans votre navigateur. Avec l’éditeur github.dev, vous pouvez parcourir les fichiers et les référentiels de code source dans GitHub, ainsi qu’effectuer et valider des modifications du code. Vous pouvez ouvrir n’importe quel dépôt, duplication ou demande de tirage dans l’éditeur.
L’éditeur github.dev est disponible gratuitement pour tous sur GitHub.com.
L’éditeur github.dev offre la plupart des avantages de Visual Studio Code, notamment la recherche, la coloration syntaxique et un affichage Contrôle de code source. Vous pouvez également utiliser une Synchronisation des paramètres pour partager vos propres paramètres VS Code avec l’éditeur. Pour plus d’informations, consultez Synchronisation des paramètres dans la documentation VS Code.
L’éditeur github.dev s’exécute entièrement dans le bac à sable de votre navigateur. L’éditeur ne clone pas le dépôt, mais utilise plutôt l’extension de Dépôts GitHub pour exécuter la plupart des fonctionnalités que vous utiliserez. Votre travail est enregistré dans le stockage local du navigateur jusqu’à ce que vous le validiez. Vous devez valider régulièrement vos modifications pour vous assurer qu’elles soient toujours accessibles.
Il est nécessaire d’être connecté à GitHub.com pour utiliser l’éditeur github.dev.
Ouverture de l’éditeur github.dev
N’importe quel référentiel GitHub peut être ouvert de deux manières dans l’éditeur github.dev :
-
Pour ouvrir le dépôt dans le même onglet de navigateur, appuyez sur . pendant vous parcourez un dépôt ou une demande de tirage sur GitHub.
Pour ouvrir le dépôt dans un nouvel onglet de navigateur, appuyez sur >.
-
Modifiez l’URL de « github.com » en « github.dev ».
-
Lorsque vous affichez un fichier, sélectionnez le menu déroulant et cliquez sur github.dev.
Codespaces et github.dev
github.dev et GitHub Codespaces vous permettent tous deux de modifier votre code directement dans votre référentiel. Toutefois, ils offrent des avantages légèrement différents, selon votre cas d’usage.
| github.dev | GitHub Codespaces | |
|---|---|---|
| Coût | Libre. | Quota mensuel gratuit pour l’utilisation des comptes personnels. Pour plus d’informations sur la tarification, consultez À propos de la facturation pour GitHub Codespaces. |
| Disponibilité | Disponible pour tout le monde sur GitHub.com. | Disponible pour tout le monde sur GitHub.com. |
| Démarrage | L’éditeur github.dev s’ouvre instantanément lorsque vous appuyez sur une touche. Vous pouvez commencer à l’utiliser immédiatement, sans configuration ni installation supplémentaires. | Lorsque vous créez ou reprenez un codespace, une machine virtuelle est affectée à celui-ci, et le conteneur est configuré en fonction du contenu d’un fichier devcontainer.json. Cette configuration peut prendre quelques minutes pour créer l’environnement. Pour plus d’informations, consultez « Création d’un codespace pour un dépôt ». |
| Calcul | Étant donné qu’il n’y a pas de calcul associé, vous ne pouvez pas générer et exécuter votre code ou utiliser le terminal intégré. | Avec GitHub Codespaces, vous bénéficiez de la puissance d’une machine virtuelle dédiée sur laquelle vous pouvez exécuter et déboguer votre application. |
| Accès du Terminal | Aucun. | GitHub Codespaces fournit un ensemble commun d’outils par défaut, ce qui signifie que vous pouvez utiliser le Terminal exactement comme vous le feriez dans votre environnement local. |
| Extensions | Seul un sous-ensemble d’extensions pouvant s’exécuter sur le web apparaît dans l’affichage Extensions et peut être installé. Pour plus d’informations, consultez « Utilisation d’extensions ». | Avec GitHub Codespaces, vous pouvez utiliser la plupart des extensions de la Visual Studio Code Marketplace. |
Continuer à travailler sur Codespaces
Vous pouvez lancer votre workflow dans l’éditeur github.dev et continuer à travailler sur un codespace. Si vous tentez d’accéder à l’affichage Exécuter et déboguer ou au Terminal, un message vous indique qu’ils ne sont pas disponibles dans l’éditeur github.dev.
Pour poursuivre votre travail dans un codespace, cliquez sur Continuer à travailler sur... et sélectionnez Créer un codespace pour créer un codespace sur votre branche active. Avant de choisir cette option, vous devez valider toutes les modifications.
Utilisation du contrôle de code source
Quand vous utilisez github.dev, toutes les actions sont gérées par l’affichage « Contrôle de code source », qui se trouve dans la barre d’activité située à gauche. Pour plus d’informations sur l’affichage « Contrôle de code source », consultez « Contrôle de version » dans la documentation VS Code.
Étant donné que l’éditeur github.dev utilise l’extension Référentiels GitHub pour ses fonctionnalités, vous pouvez changer de branche sans avoir à remiser (stash) les modifications. Pour plus d’informations, consultez « Dépôts GitHub » dans la documentation VS Code.
Créer une branche
-
Si la branche actuelle n’est pas affichée dans la barre d’état, au bas de votre codespace, cliquez avec le bouton droit sur la barre d’état, puis sélectionnez Contrôle de code source.
-
Cliquez sur le nom de la branche dans la barre d’état.
-
Dans la liste déroulante, cliquez sur la branche vers laquelle vous souhaitez basculer ou entrez le nom d’une nouvelle branche, puis cliquez sur Créer une branche.
Toute modification non validée que vous avez apportée dans votre ancienne branche sera disponible sur votre nouvelle branche.
Validation de vos modifications
-
Dans la barre d’activités, cliquez sur la vue Contrôle de code source.
-
Pour indexer vos changements, cliquez sur à côté du fichier que vous avez changé ou à côté de Changements si vous avez changé plusieurs fichiers et que vous voulez tous les indexer.
-
Dans la zone de texte, tapez un message de validation décrivant le changement effectué.
-
Cliquez sur Commiter et pousser.
Vos changements sont automatiquement poussés vers votre branche dans GitHub.
Créer une demande de tirage
-
Une fois que vous avez validé les modifications apportées à votre copie locale du référentiel, cliquez sur l’icône de demande de tirage en haut de la barre latérale « Contrôle de code source ».
-
Vérifiez que la branche locale, le dépôt à partir duquel vous effectuez la fusion, ainsi que la branche distante et le dépôt distant vers lesquels vous effectuez la fusion sont corrects. Donnez ensuite un titre et une description à la demande de tirage.
-
Cliquez sur Créer.
Utilisation d’une demande de tirage existante
Vous pouvez utiliser l’éditeur github.dev pour utiliser une demande de tirage (pull request) existante.
- Accédez à la demande de tirage (pull request) que vous souhaitez ouvrir dans l’éditeur github.dev.
- Appuyez sur
.pour ouvrir la demande de tirage (pull request) dans l’éditeur github.dev. - Une fois que vous avez apporté des modifications, validez-les en suivant les étapes décrites dans Valider vos modifications. Vos modifications étant validées directement dans la branche, il n’est pas nécessaire de les envoyer (push).
Utilisation d’extensions
L’éditeur github.dev prend en charge les extensions VS Code spécifiquement créées ou mises à jour pour s’exécuter sur le web. Ces extensions sont appelées « extensions web ». Pour savoir comment créer une extension web ou mettre à jour votre extension existante pour travailler à partir du web, consultez « Extensions web » dans la documentation VS Code.
Les extensions qui peuvent s’exécuter dans l’éditeur github.dev apparaissent dans l’affichage Extensions et peuvent être installées. Si vous utilisez la Synchronisation des paramètres, toutes les extensions compatibles sont également installées automatiquement. Pour plus d’informations, consultez « Synchronisation des paramètres » dans la documentation VS Code.
Utilisation de l’éditeur github.dev derrière un pare-feu
Si vous travaillez derrière un pare-feu, vous devez ajouter les URL suivantes à la liste d’autorisation de votre pare-feu.
| URL | Utilisation |
|---|---|
https://*.vscode-cdn.net | L’éditeur github.dev s’exécute entièrement dans le navigateur. Pour ce faire, il doit télécharger les ressources VS Code à partir de points de terminaison situés à cette URL. |
https://update.code.visualstudio.com | L’éditeur github.dev s’exécute entièrement dans le navigateur. Pour ce faire, il doit télécharger les ressources VS Code à partir de points de terminaison situés à cette URL. |
https://api.github.com | Permet de récupérer des fichiers sources à partir de GitHub. |
https://vscode-sync-insiders.trafficmanager.net | Facultatif. Pour autoriser la synchronisation des paramètres. |
Chaque extension installée dans l’éditeur github.dev est exécutée sous un Worker web indépendant. Cela permet d’ajouter une couche de sécurité entre plusieurs extensions exécutées dans le même navigateur. Par conséquent, les URL de demande provenant d’extensions se présentent sous la forme https://v--151hfiju3s93ktt2rqh65902gukb27osot905m4g52k40kaea3h6.vscode-cdn.net.
Les données sont récupérées du référentiel à l’exécution à l’aide de l’extension Référentiels GitHub. Ces données ne sont pas stockées sur l’ordinateur local entre les sessions github.dev, à l’exception du stockage dans le navigateur des fichiers non enregistrés et des fichiers actuellement affichés (pour permettre les rechargements de pages). Les seules données hors référentiel stockées localement entre les sessions sont certains paramètres utilisateur et les informations d’identification envoyées par le flux d’authentification de GitHub.
Résolution des problèmes
En cas de problèmes lors de l’ouverture de l’éditeur github.dev, essayez la procédure suivante :
- Assurez-vous que vous êtes connecté à GitHub.
- Désactivez tout bloqueur de publicité.
- Utilisez une fenêtre non privée dans votre navigateur pour ouvrir l’éditeur github.dev.
Limitations connues
- L’éditeur github.dev est actuellement pris en charge dans Chrome (et d’autres navigateurs basés sur Chromium), Edge, Firefox et Safari. Nous vous recommandons d’utiliser les dernières versions de ces navigateurs.
- Il se peut que certaines combinaisons de touches ne fonctionnent pas, selon le navigateur que vous utilisez. Ces limitations de combinaison de touches sont documentées dans la section « Limitations et adaptations connues » de la documentation VS Code.
- Il est possible que
.ne fonctionne pas pour ouvrir l’éditeur github.dev, en fonction de la disposition de votre clavier local. Dans ce cas, vous pouvez ouvrir le référentiel GitHub de votre choix dans l’éditeur github.dev en remplaçant l’URLgithub.compargithub.dev.