Tuto : Utiliser GitHub avec Visual Studio Code (VSCode)

GitHub est une plateforme en ligne qui permet d’héberger du code, de collaborer sur des projets et de gérer des versions grâce à Git. C’est un outil incontournable pour les développeurs et les équipes qui travaillent sur des projets logiciels.

Git et GitHub : Quelle différence ?

  • Git : Un logiciel open source qui permet de gérer les versions du code en local.
  • GitHub : Une plateforme en ligne qui utilise Git pour héberger vos projets et faciliter la collaboration.

 

Pourquoi utiliser GitHub ?

  • Pour travailler en équipe : Collaboration simplifiée grâce aux branches, commits et pull requests.
  • Pour sécuriser votre code : Sauvegarde en ligne et historique des modifications.
  • Pour apprendre et contribuer : Des millions de projets open source sont disponibles pour être explorés ou améliorés.
  • Pour automatiser des tâches : Déploiement, tests et intégration continue grâce à GitHub Actions.
  • Pour être visible : Les développeurs utilisent GitHub pour montrer leurs compétences grâce à leurs projets publics.

 


 

Avant de commencer, assurez-vous d’avoir :

  1. Git installé : Télécharger Git
git --version
  1. Un compte GitHub : Créez-en un sur GitHub.com.
  2. Visual Studio Code installé : Télécharger VSCode.
  3. GitHub CLI (optionnel) : Permet d’interagir avec GitHub depuis le terminal. Installez-le : GitHub CLI.

Configuration de Git

Configurer vos informations utilisateur :

Dans le terminal ou dans VSCode (Terminal > New Terminal), configurez votre nom et votre email :

git config --global user.name "VotreNom"
git config --global user.email "votre.email@example.com"

Vérifiez la configuration :

git config --list

Cloner un dépôt GitHub dans VSCode

Méthode 1 : Utiliser le terminal intégré de VSCode

  1. Ouvrez VSCode et lancez le terminal (Terminal > New Terminal).
  2. Clonez le dépôt distant avec la commande suivante :
    git clone https://github.com/votre-utilisateur/votre-repo.git
  3. Ouvrez le dossier cloné :
cd votre-repo
code .

Méthode 2 : Utiliser l’interface graphique de VSCode

  1. Ouvrez VSCode et allez dans l’onglet Source Control
  2. (ou utilisez Ctrl+Shift+G / Cmd+Shift+G sur Mac).
  3. Cliquez sur « Clone Repository ».
  4. Collez l’URL du dépôt GitHub.
  5. Choisissez le dossier où enregistrer le projet.
  6. Ouvrez le projet lorsqu’il est cloné.

Gérer les versions avec Git dans VSCode

Une fois le projet ouvert dans VSCode, suivez ces étapes :

Ajouter et committer vos modifications

  1. Modifiez vos fichiers selon vos besoins.
  2. Allez dans l’onglet Source Control (Ctrl+Shift+G / Cmd+Shift+G).
  3. Ajoutez les modifications :
    • Cliquez sur + pour ajouter tous les fichiers modifiés à Git.
    • Ou utilisez :
      git add .

       

  4. Créez un commit avec un message descriptif :
    • Dans l’interface VSCode, saisissez un message puis cliquez sur Commit.
    • Ou utilisez le terminal :
git commit -m "Message de commit clair"

Pousser vos modifications sur GitHub

  • Envoyez les modifications locales vers GitHub :
    • Dans VSCode, cliquez sur l’icône Synchronize Changes.
    • Ou utilisez la commande :
git push origin main
  • Si la branche main n’existe pas encore sur le dépôt distant, créez-la :
git push -u origin main

Récupérer les modifications distantes

Pour récupérer les dernières modifications du dépôt distant :

  • Cliquez sur « Pull » dans l’interface VSCode.
  • Ou utilisez la commande :
git pull origin main

Créer et travailler sur des branches

  1. Créer une nouvelle branche dans VSCode :
    • Allez dans l’onglet Source Control, cliquez sur Create Branch.
    • Ou utilisez la commande :
    • git checkout -b nom-de-la-branche
  2. Changer de branche :
    git checkout nom-de-la-branche
  3. Fusionner une branche dans main :
git checkout main
git merge nom-de-la-branche
  1. Pousser la branche sur GitHub :
    git push origin nom-de-la-branche

     


Intégration GitHub dans VSCode

Pour une intégration plus fluide, utilisez les extensions suivantes :

Extension officielle : GitHub Pull Requests and Issues

  1. Allez dans Extensions (Ctrl+Shift+X / Cmd+Shift+X).
  2. Recherchez « GitHub Pull Requests and Issues ».
  3. Installez l’extension pour gérer vos pull requests et issues directement dans VSCode.

Résoudre des conflits Git

Si des conflits apparaissent lors d’un git pull ou git merge :

  1. VSCode vous affiche les conflits dans les fichiers avec des sections :
    • <<<<<<< HEAD pour votre version locale.
    • ======= pour la version distante.
    • >>>>>>> pour l’autre version.
  2. Choisissez la version à conserver ou fusionnez les modifications.
  3. Ajoutez les fichiers résolus :
git add .
  1. Faites un commit pour valider la résolution des conflits :
    git commit -m "Résolution des conflits"
  2. Poussez les modifications vers GitHub :
git push

Résumé des commandes utiles

Commande Description
git clone <url> Cloner un dépôt distant
git add . Ajouter toutes les modifications
git commit -m « message » Créer un commit avec un message
git push origin main Pousser les commits locaux vers la branche main
git pull origin main Récupérer les modifications distantes
git checkout -b nouvelle-branche Créer et basculer sur une nouvelle branche
git branch Lister les branches locales
git merge nom-de-la-branche Fusionner une branche dans la branche active
git status Voir l’état actuel des fichiers
  • Travaillez toujours sur des branches pour isoler vos modifications.
  • Faites des commits fréquents avec des messages clairs.
  • Utilisez pull requests pour collaborer avec votre équipe sur GitHub.
  • Synchronisez régulièrement votre code (git pull) pour éviter les conflits.

 

Fonctionnalités principales de GitHub

  1. Hébergement de dépôts Git
    GitHub permet d’héberger des projets utilisant Git pour la gestion des versions.
  2. Suivi des versions
    Vous pouvez suivre toutes les modifications apportées à votre code, revenir en arrière en cas d’erreur, et collaborer sans écraser le travail des autres.
  3. Collaboration en équipe
    • Pull Requests : Pour proposer, examiner et valider les changements avant qu’ils ne soient fusionnés.
    • Issues : Pour signaler des bugs, suivre des tâches ou planifier des fonctionnalités.
    • Commentaires et revues de code : Les membres de l’équipe peuvent commenter et suggérer des améliorations.
  4. Sécurité et sauvegarde
    • Votre code est sauvegardé sur des serveurs sécurisés.
    • Contrôle d’accès avec des projets publics ou privés.
  5. CI/CD (Intégration Continue et Déploiement Continu)
    GitHub Actions permet d’automatiser des tâches comme les tests, le déploiement ou la compilation.
  6. Documentation et gestion de projet
    • README : Présentation du projet.
    • Wiki : Documentation complète pour les utilisateurs et les développeurs.
    • Projects : Outil de gestion de projet sous forme de tableau Kanban.
  7. Hébergement des pages web
    • GitHub Pages permet d’héberger gratuitement des sites statiques directement depuis un dépôt.

 

Lexique  GitHub 

Terme Définition Commande Terminal
Repository (Repo) Dossier ou projet contenant tous les fichiers, dossiers et l’historique des versions du code. git init pour initialiser un dépôt local.
git clone <url> pour cloner un dépôt distant.
Commit Instantané des modifications faites sur les fichiers. git add . pour ajouter les modifications.
git commit -m « Message du commit » pour les sauvegarder.
Branch (Branche) Version isolée du projet pour travailler sans affecter la version principale. git branch pour lister les branches.
git checkout -b <nom_de_branche> pour créer une nouvelle branche.
Main (ou Master) Branche principale par défaut d’un projet GitHub. git checkout main pour revenir à la branche principale.
Merge Fusionner les modifications d’une branche dans une autre. git merge <nom_de_branche> pour fusionner une branche dans la branche actuelle.
Pull Request (PR) Demande pour intégrer vos modifications dans une autre branche via GitHub. Sur GitHub : Créer une Pull Request via l’interface.
Push Envoyer les commits locaux vers le dépôt distant. git push origin <nom_de_branche> pour pousser la branche actuelle vers GitHub.
Pull Récupérer les modifications du dépôt distant et les fusionner localement. git pull origin <nom_de_branche> pour récupérer et intégrer les changements.
Fetch Récupérer les modifications sans les fusionner. git fetch pour récupérer les nouvelles données du dépôt distant.
Status Voir l’état des fichiers dans votre dépôt local. git status pour vérifier les fichiers modifiés, ajoutés ou en attente de commit.
Log Historique des commits d’un projet. git log pour afficher la liste des commits.
Stash Mettre les modifications temporaires de côté sans les committer. git stash pour sauvegarder les modifications en attente.
git stash pop pour les restaurer.
Conflict (Conflit) Se produit lorsque deux branches modifient la même partie d’un fichier. Résolution manuelle, puis git add . et git commit.
Fork Copier un projet sur votre propre compte GitHub pour y travailler. Sur GitHub : Cliquez sur le bouton Fork du projet.
Clone Copier un dépôt distant sur votre machine locale. git clone <url_du_dépôt>
Pull Request Review Processus d’examen des changements proposés dans une Pull Request. Sur GitHub : Ajouter des commentaires et valider ou rejeter la PR.
Revert Annuler un commit spécifique tout en conservant l’historique. git revert <id_du_commit> pour annuler un commit en créant un nouveau commit.
Reset Annuler des modifications locales pour revenir à un état précédent. git reset –hard <id_du_commit> pour réinitialiser complètement.
Diff Voir les différences entre deux versions d’un fichier. git diff pour voir les différences non committées.
git diff <branche1> <branche2> pour comparer.
Tag Marqueur pour identifier une version spécifique d’un projet. git tag <nom_du_tag> pour créer un tag.
git push origin <nom_du_tag> pour pousser un tag.
Checkout Basculer entre différentes branches ou commits. git checkout <nom_de_branche> pour passer sur une branche existante.
Remote Dépôt distant lié au projet local. git remote -v pour afficher les dépôts distants.
git remote add <nom> <url> pour en ajouter un.
Rebase Réappliquer une série de commits sur une autre branche. git rebase <branche_cible> pour rebaser la branche actuelle.
Blame Identifier qui a modifié chaque ligne d’un fichier. git blame <nom_du_fichier> pour afficher les auteurs des modifications.
Clean Supprimer les fichiers non suivis par Git dans le projet. git clean -f pour supprimer les fichiers non suivis.
Squash Combiner plusieurs commits en un seul. git rebase -i HEAD~<nombre_de_commits>pour « squasher » les commits.
Ignore Fichier qui indique à Git quels fichiers ignorer. Créer un fichier .gitignore et ajouter les chemins des fichiers à ignorer.

Commandes utiles pour GitHub

Configurer Git en local

  • Configurer le nom d’utilisateur :
  • git config --global user.name "VotreNom"
  • Configurer l’email :
  • git config --global user.email "votre@email.com"

Créer un nouveau dépôt local

git init git add . git commit -m "Initial commit" git remote add origin <url_du_repo> git push -u origin main

 

Mettre à jour votre dépôt local avec la version distante

git pull origin main

 

Mettre à jour la version distante avec la version locale

git add . git commit -m "Mise à jour" git push origin main

Supprimer un fichier suivi par Git

 

Voir les fichiers ignorés par Git

git ls-files --ignored --exclude-standard

 


Raccourci des commandes fréquentes

Action Commande
Ajouter et committer en une commande git commit -am « Message du commit »
Annuler le dernier commit git reset –soft HEAD~1
Mettre à jour un commit précédent git commit –amend
Synchroniser toutes les branches git fetch –all
Voir l’historique de manière graphique git log –graph –oneline –all

Astuce Bonus

Pour voir rapidement toutes les commandes configurées :

git config --list

 

Bases : Construire un projet Laravel

La création d’un projet Laravel efficace nécessite une approche bien structurée pour organiser les données et gérer les fonctionnalités. Voici un...

Tuto : Laravel Ecommerce

Laravel 11 et Voyager forment un duo puissant pour développer rapidement des applications e-commerce robustes et personnalisables. Pourquoi : -...

Bases : Construire un projet Laravel

La création d’un projet Laravel efficace nécessite une approche bien structurée pour organiser les données et gérer les fonctionnalités. Voici un...

Tuto : Laravel Ecommerce

Laravel 11 et Voyager forment un duo puissant pour développer rapidement des applications e-commerce robustes et personnalisables. Pourquoi : -...