Éditeur web github.dev

À propos de web-based editor

Le web-based editor introduit une expérience d’édition légère qui s’exécute entièrement dans votre navigateur. Avec le web-based editor, vous pouvez parcourir les fichiers et les référentiels de code source à partir de GitHub, ainsi qu’apporter et valider des modifications du code. Vous pouvez ouvrir n’importe quel dépôt, duplication ou demande de tirage dans l’éditeur.

Le web-based editor est disponible gratuitement pour tous sur GitHub.com.

Le web-based editor offre de nombreux avantages de Visual Studio Code, comme la recherche, la coloration syntaxique et une vue 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.

Le web-based editor 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.

Vous devez être connecté pour utiliser l’éditeur web.

Ouverture de web-based editor

Vous pouvez ouvrir n’importe quel référentiel GitHub dans le web-based editor de l’une des manières suivantes :

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

  

Codespaces et web-based editor

web-based editor et GitHub Codespaces vous permettent tous deux de modifier votre code directement à partir de votre référentiel. Toutefois, ils offrent des avantages légèrement différents, selon votre cas d’usage.

	web-based editor	GitHub Codespaces
Coût	Libre.	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émarrage	Le web-based editor s’ouvre instantanément en appuyant 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 démarrer votre workflow dans le web-based editor et continuer à travailler sur un codespace. Si vous tentez d’accéder à l’affichage Exécuter et déboguer ou au Terminal, vous serez averti qu’ils ne sont pas disponibles dans le web-based editor.

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 le web-based editor, toutes les actions sont gérées via l’affichage Contrôle de code source, qui se trouve dans la Barre d’activité sur le côté 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 web utilise l’extension Dépôts GitHub pour alimenter des fonctionnalités, vous pouvez changer de branche sans avoir à dissimuler 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.
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. 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.
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.
3. Tapez un message de validation (commit) décrivant la modification que vous avez apportée.
4. Pour commiter les changements indexés, cliquez sur la coche en haut de la barre latérale du contrôle de code source.
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.
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.
3. Cliquez sur Créer.

Utilisation d’une demande de tirage existante

Vous pouvez utiliser le web-based editor pour utiliser une demande de tirage existante.

1. Accédez à la demande de tirage que vous souhaitez ouvrir dans le web-based editor.
2. Appuyez sur . pour ouvrir la demande de tirage dans le web-based editor.
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

Le web-based editor prend en charge les extensions VS Code qui ont été 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 le web-based editor 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.

Dépannage

En cas de problèmes lors de l’ouverture du web-based editor, 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 le web-based editor.

Limitations connues

• Le web-based editor est actuellement pris en charge dans Chrome (et divers 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 le web-based editor, en fonction de la disposition de votre clavier local. Dans ce cas, vous pouvez ouvrir le référentiel GitHub de votre choix dans web-based editor en modifiant l’URL de github.com en github.dev.