Gérer les référentiels GitHub pour le développement JavaScript dans Visual Studio Code

Visual Studio Code fournit une intégration Git et GitHub complète pour les développeurs JavaScript. Ce guide vous montre comment gérer des dépôts GitHub directement à partir de votre environnement de développement, en rationalisant votre flux de travail de la création de code au déploiement.

Vous allez apprendre à ouvrir des référentiels existants, initialiser de nouveaux projets, créer des branches de fonctionnalités, valider des modifications et envoyer (push) vers GitHub, tout cela sans quitter VS Code. Le guide couvre plusieurs approches pour chaque tâche, notamment la barre d’activité, la palette de commandes, la barre d’état et le terminal intégré. Vous pouvez donc choisir les méthodes qui conviennent le mieux à votre style de développement.

Prerequisites

• Git installé sur votre ordinateur local
• Visual Studio Code installé
• Un compte GitHub

Ouvrez votre dépôt distant

Ouvrez votre dépôt distant sur votre ordinateur local.

Barre d’activité

1. Installer l’extension de référentiel distant
2. Sélectionnez l’indicateur distant en bas à gauche de Visual Studio Code.
3. Suivez les invites.

Barre d’état

Cette action n’est pas disponible à partir de cette fonctionnalité. Sélectionnez un autre onglet.

Palette de commandes

1. Ouvrez la palette de commandes avec la combinaison de touches Ctrl + +
2. À l’invite de palettes de commandes, entrezgitcl, sélectionnez la commande Git : Cloner, puis sélectionnez Cloner à partir de GitHub, puis appuyez sur Entrée.
3. Quand vous êtes invité à fournir l’URL du dépôt, sélectionnez Cloner depuis GitHub, puis appuyez sur Entrée.
4. Si vous êtes invité à vous connecter à GitHub, terminez le processus de connexion.
5. Entrez azure-samples/js-e2e-express-server dans le champ URL du dépôt.
6. Sélectionnez (ou créez) le répertoire local dans lequel vous souhaitez cloner le projet, puis sélectionnez Sélectionner comme destination du dépôt.
7. Quand vous recevez la notification vous demandant si vous voulez ouvrir le dépôt cloné, sélectionnez Ouvrir.

Terminal intégré

1. Ouvrez un terminal intégré à partir du terminal -> Nouveau terminal.

2. Clonez votre dépôt avec la commande git suivante :

   git clone https://github.com/<ACCOUNT>/<REPOSITORY>
   

3. Ouvrez dans Visual Studio Code :

   code <REPOSITORY>
   

Visual Studio Code utilise l’authentification Git fournie par le système d’exploitation (par exemple, le trousseau macOS ou le gestionnaire d’informations d’identification Windows) avec n’importe quelle fonctionnalité Git. La sortie est visible dans la palette > de commandes Git : afficher la sortie Git.

Se connecter à des domaines GitHub personnalisés

Par défaut, Visual Studio Code suppose que vos référentiels sont hébergés sur github.com. Si vous devez vous connecter à un référentiel sur un autre domaine (par exemple, un GitHub d’entreprise comme github.<company_name>.com), vous devez configurer votre chemin Git en conséquence.

Pour mettre à jour le chemin Git dans VS Code, ouvrez Préférences → Fichier → Paramètres et recherchez Git: Path. Ce paramètre vous permet de spécifier le chemin absolu de l’exécutable Git qui fonctionne avec votre domaine GitHub personnalisé.

Vous pouvez également ajouter ou mettre à jour le git.path paramètre directement dans votre settings.json fichier pour vous assurer que VS Code utilise le fichier binaire Git approprié pour toutes les opérations de dépôt.

Ouvrir votre référentiel local

Si vous disposez d’un référentiel existant sur votre ordinateur local et souhaitez l’ouvrir dans Visual Studio Code, ouvrez simplement le dossier. Visual Studio Code reconnaît le .git sous-dossier et affiche les informations pertinentes.

Barre d’activité

1. Sélectionnez Ctrl + K + O.
2. Sélectionnez le dossier .

Barre d’état

Cette action n’est pas disponible à partir de cette fonctionnalité. Sélectionnez un autre onglet.

Palette de commandes

1. Ouvrez la palette de commandes avec la combinaison de touches Ctrl + +
2. Filtrez avec Git, puis sélectionnez Open repository.
3. Sélectionnez le dossier à sélectionner comme racine du référentiel.

Terminal intégré

1. Ouvrez un terminal intégré à partir du terminal -> Nouveau terminal.

2. Ouvrez une nouvelle instance de Visual Studio Code pour le répertoire du référentiel :

   code ../dir1/dir2/my-repo
   

Initialiser un nouveau référentiel

Utilisez la procédure suivante pour créer un référentiel de code source local avec git.

Barre d’activité

1. Sélectionnez le contrôle de code source dans la barre d’activité ou utilisez la combinaison de touches Ctrl + +

2. Sélectionnez Initialiser le référentiel.

   

Barre d’état

Cette action n’est pas disponible à partir de cette fonctionnalité. Sélectionnez un autre onglet.

Palette de commandes

1. Ouvrez la palette de commandes avec la combinaison de touches Ctrl + +
2. Filtrez avec Git, puis sélectionnez Initialize repository.
3. Sélectionnez le dossier à sélectionner comme racine du référentiel.

Terminal intégré

1. Ouvrez un terminal intégré à partir du terminal -> Nouveau terminal.

2. Initialisez votre dossier avec git avec la commande git suivante :

   git init
   

Une fois le dépôt initialisé, créez le référentiel sur GitHub. Ajoutez ensuite ce référentiel en tant que distant à votre projet local à partir de la palette de commandes : recherchez Git: Add remote.

Créer une branche pour les modifications

Créez une branche pour capturer les modifications et isoler du principal ou du branche par défaut.

Barre d’activité

1. Sélectionnez le contrôle de code source dans la barre d’activité.
2. Sélectionnez les points de suspension (...) en regard du contrôle de code source.
3. Sélectionnez Branche ->Créer une branche.

Barre d’état

1. Sélectionnez le nom de la branche dans la barre d’état. La palette de commandes s’ouvre.

   La barre d’état se trouve en bas de Visual Studio Code.

2. Dans la palette de commandes, sélectionnez +Créer une branche.

3. Entrez le nom de votre nouvelle branche.

4. Entrez un nouveau nom de branche. Le nom de la branche est visible dans la barre d’état.

   

Palette de commandes

1. Ouvrez la palette de commandes avec la combinaison de touches Ctrl + +

2. Recherchez git branch et sélectionnez Git: Create Branch.

   

3. Entrez un nouveau nom de branche, tel que test.

4. Le nom de la branche est visible dans la barre d’état.

   

Terminal intégré

1. Ouvrez un terminal intégré à partir du terminal -> Nouveau terminal.

2. Créez une branche nommée MY-BRANCH avec la commande git suivante :

   git checkout -b MY-BRANCH
   

Valider les modifications localement

Une fois que vous apportez des modifications aux fichiers de votre branche, validez les modifications.

Barre d’activité

1. Sélectionnez le contrôle de code source dans la barre d’activité.

2. Entrez votre message de validation, puis sélectionnez Valider.

   

Barre d’état

Cette action n’est pas disponible à partir de cette fonctionnalité. Sélectionnez un autre onglet.

Palette de commandes

1. Ouvrez la palette de commandes avec la combinaison de touches Ctrl + +
2. Dans la palette de commandes, filtrez avec Git puis sélectionnez Commit.
3. Entrez votre message de validation, puis appuyez sur Entrée.

Terminal intégré

1. Ouvrez un terminal intégré à partir du terminal -> Nouveau terminal.

2. Créez une branche nommée MY-BRANCH avec la commande git suivante :

   git commit -m "YOUR COMMIT MESSAGE"
   

Envoyer (push) une branche locale vers GitHub

Barre d’activité

1. Sélectionnez l’icône de contrôle de code source dans la barre d’activité.
2. Sélectionnez Publier la branche. Si le référentiel n’existe pas sur GitHub, il crée le référentiel pour vous.

Barre d’état

1. Dans la barre d’état de Visual Studio Code, sélectionnez l’icône Envoyer à droite du nom de la branche.

   

2. Sélectionnez le nom du dépôt distant dans la zone contextuelle. Si vous n’avez qu’un seul dépôt distant, vous ne serez pas invité à sélectionner son nom.

Palette de commandes

1. Ouvrez la palette de commandes avec la combinaison de touches Ctrl + +
2. Dans la palette de commandes, filtrez avec Git puis sélectionnez Push.
3. Si vous avez plusieurs dépôts distants en amont, sélectionnez un nom de dépôt, puis appuyez sur Entrée.

Terminal intégré

1. Ouvrez un terminal intégré à partir du terminal -> Nouveau terminal.

2. Créez une branche nommée MY-BRANCH avec la commande git suivante :

   git push <remote-name> <branch-name>
   

Afficher la sortie de Git

Vous pouvez afficher la sortie des commandes Git lorsque vous utilisez l’extension de contrôle de code source. Cette sortie permet de déboguer lorsqu’une commande échoue.

1. Sélectionnez l’icône de contrôle de code source dans la barre d’activité.

2. Sélectionnez les points de suspension (...), puis sélectionnez Afficher la sortie Git.

   

Outils Visual Studio Code pour travailler avec Git et GitHub

Utiliser un dépôt dans Visual Studio Code se fait avec des outils distincts.

Icône	Information	Accès à partir de
	Commandes Git dans la palette de commandes	F1
	Extension du contrôle de code source	Barre d’activité
	Extension Demandes de tirage et problèmes GitHub	Barre d’activité
	Extension Dépôts GitHub	Vous pouvez ouvrir rapidement et facilement un dépôt GitHub en recherchant Dépôts GitHub : Ouvrir un dépôt... à partir de la palette de commandes, F1, ou en choisissant Ouvrir un dépôt GitHub... à partir de l’indicateur distant (le bouton vert dans le coin inférieur gauche de la barre d’état).

Ressources associées

• Comment déployer une application web
• Utilisation de GitHub dans Visual Studio Code
• Utilisation de Visual Studio Code avec d’autres fournisseurs de gestion de version