Skip to main content
Nous publions des mises à jour fréquentes de notre documentation, et la traduction de cette page peut encore être en cours. Pour obtenir les informations les plus actuelles, consultez la documentation anglaise.

Éditeur web github.dev

Vous pouvez utiliser l’éditeur web github.dev pour modifier des fichiers et valider vos modifications.

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 ».

  • Lors de l’affichage d’un fichier, utilisez le menu déroulant en regard de et sélectionnez Ouvrir dans github.dev.

    Menu déroulant du bouton Modifier le fichier

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.devGitHub Codespaces
CoûtLibre.Quota mensuel gratuit pour l’utilisation des comptes personnels. Pour plus d’informations sur les prix, consultez « À propos de la facturation de GitHub Codespaces ».
DisponibilitéDisponible pour tout le monde sur GitHub.com.Disponible pour tout le monde sur GitHub.com.
DémarrageL’é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 TerminalAucun.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.
ExtensionsSeul 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.

Capture d’écran montrant le bouton « Continuer à travailler sur » dans l’interface utilisateur

Utilisation du contrôle de code source

Quand vous utilisez l’éditeur 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

  1. 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.
  2. Cliquez sur le nom de la branche dans la barre d’état. Branche dans la barre d’état
  3. Dans la liste déroulante, cliquez sur la branche sur laquelle vous souhaitez basculer, ou entrez le nom d’une nouvelle branche, puis cliquez sur Créer une branche. Effectuer un choix à partir du menu 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

  1. Dans la barre d’activité, cliquez sur la vue Contrôle de code source. Vue Contrôle de code source
  2. Pour indexer vos modifications, cliquez sur + à côté du fichier que vous avez modifié, ou à côté des Modifications si vous avez modifié plusieurs fichiers et que vous souhaitez les indexer. Barre latérale de contrôle de code source avec le bouton de préproduction mis en évidence
  3. Tapez un message de validation (commit) décrivant la modification que vous avez apportée. Barre latérale du contrôle de code source avec un message de commit
  4. Pour commiter les changements indexés, cliquez sur la coche en haut de la barre latérale du contrôle de code source. Cliquez sur l’icône en forme de coche
  5. Une fois vos modifications validées, elles sont automatiquement envoyées (push) à votre branche sur GitHub.

Créer une demande de tirage

  1. Une fois que vous avez validé les changements apportés à votre copie locale du dépôt, cliquez sur l’icône Créer une demande de tirage. Barre latérale de contrôle de code source avec le bouton de préproduction mis en évidence
  2. 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. Barre latérale de contrôle de code source avec le bouton de préproduction mis en évidence
  3. 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.

  1. Accédez à la demande de tirage (pull request) que vous souhaitez ouvrir dans l’éditeur github.dev.
  2. Appuyez sur . pour ouvrir la demande de tirage (pull request) dans l’éditeur github.dev.
  3. 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 :

URLUtilisation
https://*.vscode-cdn.netL’é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.comIdentique à ce qui précède.
https://api.github.comPermet de récupérer des fichiers sources à partir de GitHub.
https://vscode-sync-insiders.trafficmanager.netOptionnel. 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’URL github.com par github.dev.