Comment connecter GitHub à VS Code [Step by Step]


  • Français


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

    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.

    Vérifier si Git est installé via VS Code

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

    Clonage du référentiel GitHub dans VS Code

    Il vous montrera ensuite un message vous demandant de vous connecter à GitHub.

    VS Code demandant de se connecter à GitHub
    Cliquez sur le bouton Autoriser

    Vous cliquez sur le bouton Autoriser et il ouvrira un onglet de navigateur avec une page de connexion GitHub.

    Connecter GitHub à VS Code
    Connectez-vous avec votre GitHub

    Si vous essayez de cloner un dépôt, vous devriez voir un message comme celui-ci et cliquez sur Ouvrir.

    Ouverture du référentiel GitHub dans VS Code
    Cliquez sur ouvrir lorsque vous voyez cette boîte de dialogue

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

    Dépôts GitHub accessibles depuis VS Code

    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.

    Vérifier si VS Code est connecté au 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.

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

    Cloner un nouveau référentiel GitHub dans VS Code
    Cloner n’importe quel référentiel GitHub dans VS Code

    Il vous demandera où placer le référentiel cloné.

    Sélectionnez un emplacement pour le référentiel GitHub cloné dans VS Code
    Sélectionnez un emplacement pour le référentiel GitHub cloné dans VS Code

    Il vous demandera si vous souhaitez ouvrir le référentiel cloné dans VS Code. Allez-y si vous voulez y travailler immédiatement.

    Ouvrez le référentiel GitHub que vous venez de cloner dans VS Code
    Ouvrez le référentiel GitHub que vous venez de cloner dans VS Code

    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.

    Faire confiance à la promotion de l'auteur dans VS Code
    Faites confiance à l’auteur

    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.

    Poussez vos modifications vers GitHub depuis VS Code
    Poussez vos modifications vers GitHub depuis VS Code

    Si vous n’avez pas configuré votre nom d’utilisateur et votre adresse e-mail Git, vous verrez cette erreur.

    Erreur dans VS Code si le nom d'utilisateur et l'e-mail Git ne sont pas définis
    Erreur dans VS Code si le nom d’utilisateur et l’e-mail Git ne sont pas définis

    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.

    VS Code donne toutes sortes d'actions Git à effectuer
    VS Code donne toutes sortes d’actions Git à effectuer

    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.

    Installation de l'extension GitHub dans VS Code

    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.

    Source

    Houssen Moshinaly

    Pour contacter personnellement le taulier :

    Laisser un commentaire

    Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    Copy code