VS Code est sans aucun doute l’un des éditeurs de code les plus populaires. De même, GitHub est la plateforme la plus populaire parmi les codeurs.
Les deux produits Microsoft se gélifient assez bien. Vous pouvez coder de manière transparente dans VS Code et envoyer des modifications à votre référentiel GitHub. Cela rend la vie tellement plus facile de tout faire à partir de la même interface d’application.
Comment ajouter GitHub à VS Code ? C’est assez facile en fait.
Dans ce tutoriel, je vais montrer :
- Comment intégrer votre compte GitHub dans VS Code
- Comment cloner des référentiels de GitHub dans VS Code
- Comment pousser vos modifications vers GitHub à partir de VS Code
Ça a l’air bien? Voyons comment faire.
Contents
Prérequis
Veuillez vous assurer que Git est installé sur votre ordinateur. Comment faire ça?
Une façon serait d’accéder à la vue Source Control dans VS Code. Si Git n’est pas installé, il vous demandera de le télécharger.
Une autre chose est que vous devrait avoir le nom d’utilisateur et l’e-mail Git configurés.
Ajouter GitHub au code VS
VS Code est intégré à l’intégration GitHub. Vous ne devriez pas avoir besoin d’installer d’extension pour cloner les dépôts et pousser vos modifications.
Accédez à l’onglet du code source dans la barre latérale gauche. Vous devriez voir un ‘Dépôt de clones‘ ou ‘Publier sur GitHub‘ (si vous avez déjà ouvert un dossier). Clique sur le Dépôt de clones et donnez-lui un lien de dépôt GitHub ou cliquez sur ‘Cloner depuis GitHub‘.
Il vous montrera ensuite un message vous demandant de vous connecter à GitHub.
Vous cliquez sur le bouton Autoriser et il ouvrira un onglet de navigateur avec une page de connexion GitHub.
Si vous essayez de cloner un dépôt, vous devriez voir un message comme celui-ci et cliquez sur Ouvrir.
Cela devrait prendre quelques secondes et vous devriez être connecté à votre compte GitHub.
Comment savez-vous que vous êtes connecté à GitHub avec VS Code ?
Eh bien, il commencera à afficher vos référentiels GitHub (si vous en avez) dans le viewlet supérieur (si vous avez appuyé sur cloner le référentiel plus tôt).
Vous pouvez également cliquer sur l’icône Profil dans le coin inférieur gauche pour voir si elle indique que vous êtes connecté à votre compte GitHub.
Cloner un dépôt GitHub dans GitHub
Si vous avez déjà ouvert un projet dans GitHub et souhaitez cloner un autre référentiel GitHub, il existe plusieurs façons de le faire.
Tu peux utilisez les commandes Git pour cloner le dépôt sur votre disque puis ouvrez ce dossier repo dans VS Code.
Alternativement, si vous ne souhaitez pas utiliser la ligne de commande, vous pouvez vous en tenir à VS Code.
C’est simple. Ouvrez une nouvelle fenêtre dans VS Code.
Cela vous donnera un éditeur frais et propre. Si l’écran d’accueil est en cours d’exécutionvous pouvez cliquer sur le lien rapide “Clone Git Repository” à partir de là.
Sinon, accédez à l’onglet Source Control dans la barre latérale gauche et cliquez sur le bouton Clone Repository.
Cela ouvrira une vue sur le dessus. Tu peux copiez simplement l’URL du dépôt GitHub. Il peut automatiquement obtenir le lien de clonage à partir de celui-ci.
Il vous demandera où placer le référentiel cloné.
Il vous demandera si vous souhaitez ouvrir le référentiel cloné dans VS Code. Allez-y si vous voulez y travailler immédiatement.
Pas seulement pour un référentiel cloné, VS Code vous demande si vous faites confiance à l’auteur pour tout dossier que vous y ajoutez.
Eh bien, vous avez cloné un référentiel GitHub dans VS Code. Voyons comment modifier et pousser vos modifications sur GitHub.
Pousser les modifications vers GitHub à partir de VS Code
Supposons maintenant que vous ayez apporté des modifications au code et que vous souhaitiez envoyer le commit à votre référentiel.
Dès que vous enregistrez vos modifications dans un fichier, VS Code commence à indiquer les fichiers modifiés avec un M. Pour les nouveaux fichiers, le symbole est U (non suivi).
Accédez à Source Control sur le côté gauche, saisissez un message de validation, puis cliquez sur le bouton carotte à côté de Commit et choisissez Commit & Push.
Si vous n’avez pas configuré votre nom d’utilisateur et votre adresse e-mail Git, vous verrez cette erreur.
Vous pouvez définir le nom d’utilisateur et l’e-mail au niveau global ou au niveau du référentiel. Votre choix, vraiment.
📋
Pour un commit et un push réussis, vous ne verrez aucune erreur. Les symboles M ou U à côté des fichiers modifiés ou nouveaux disparaissent.
Vous pouvez vérifier que votre push a réussi en accédant au référentiel sur GitHub.
Vous pouvez choisir de valider vos modifications localement sans les pousser. Vous pouvez également faire toutes les choses que vous aviez l’habitude de faire avec les commandes git ici. Il existe des options pour créer des demandes d’extraction, actualiser et ainsi de suite.
Passez au niveau supérieur avec l’extension officielle GitHub
Il existe une extension officielle dédiée qui vous permet également gérer les demandes d’extraction vers vos dépôts provenant d’autres personnes et les fusionner. Vous pouvez également voir les problèmes ouverts sur votre référentiel ici. C’est une bien meilleure façon d’intégrer GitHub à VS Code.
Ouvrez VS Code et accédez à l’onglet Extensions dans la barre latérale gauche. Ici rechercher les demandes d’extraction et les problèmes GitHub. C’est un plugin officiel de GitHub lui-même. Vous pouvez voir la coche vérifiée.
Cliquez sur le bouton Installer et installez l’extension sur votre éditeur.
Avec cette extension, vous pouvez gérer votre référentiel si d’autres y collaborent.
Il est bon d’avoir une intégration complète de Git et GitHub dans VS Code. Les personnes qui n’aiment pas la ligne de commande apprécient sûrement cette intégration.
J’espère que ce tutoriel vous a aidé à ajouter GitHub à VS Code de manière transparente. Faites-moi savoir si vous rencontrez toujours des problèmes.