Contrôle de code source avec Git dans Visual Studio Code (2023)

Modifier

Visual Studio Code intègre la gestion du contrôle des sources (SCM) et inclutGiteprise en charge prête à l'emploi. De nombreux autres fournisseurs de contrôle de code source sont disponibles viaextensionssur la place de marché VS Code.

Travailler dans un dépôt Git

Vous débutez avec Git ?Legit-scmLe site Web est un bon endroit pour commencer, avec un site Web populairelivre, Commencervidéosetfeuilles de triche. La documentation de VS Code suppose que vous êtes déjà familiarisé avec Git.

Assurez-vous que Git est installé.VS Code utilisera l'installation Git de votre machine (au moins la version2.0.0), vous devez doncinstaller Gitavant d'obtenir ces fonctionnalités.

L'icône de contrôle de la source dans la barre d'activité à gauche indiquera toujours unaperçu du nombre de changementsque vous avez actuellement dans votre référentiel. La sélection de l'icône vous montrera les détails des modifications actuelles de votre référentiel :CHANGEMENTS,CHANGEMENTS PAR ÉTAPESetMODIFICATIONS DE FUSION.

Cliquer sur chaque élément vous montrera en détailles changements textuels dans chaque fichier. Notez que pour les modifications non échelonnées, l'éditeur de droite vous permet toujours de modifier le fichier : n'hésitez pas à l'utiliser !

Vous pouvez également trouver des indicateurs deétat de votre dépôtdans le coin inférieur gauche de VS Code : lebranche actuelle,indicateurs sales, et le nombre decommits entrants et sortantsde la branche actuelle. Tu peuxvérifiern'importe quelle branche de votre référentiel en cliquant sur cet indicateur d'état et en sélectionnant la référence Git dans la liste.

Conseil:Vous pouvez ouvrir VS Code dans un sous-répertoire d'un référentiel Git. Les services Git de VS Code fonctionneront toujours comme d'habitude, affichant toutes les modifications dans le référentiel, mais les modifications de fichiers en dehors du répertoire délimité sont ombrées avec une info-bulle indiquant qu'elles se trouvent en dehors de l'espace de travail actuel.

Commettre

Mise en scène(git ajouter) etmise en scène(git reset) peut se faire via des actions contextuelles dans les fichiers ou par glisser-déposer.

Configurez votre nom d'utilisateur et votre adresse e-mail Git.Lorsque vous vous engagez, sachez que si votre nom d'utilisateur et/ou votre adresse e-mail ne sont pas définis dans votre configuration Git, Git se rabattra sur l'utilisation des informations de votre machine locale. Vous trouverez les détails dansInformations sur le commit Git.

Vous pouvez saisir un message de validation au-dessus des modifications et appuyer surCtrl+Entrée(mac OS :⌘+Entrée) pour les engager. S'il y a des modifications par étapes, seules ces modifications seront validées. Sinon, vous recevrez une invite vous demandant de sélectionner les modifications que vous souhaitez valider et vous aurez la possibilité de modifier vos paramètres de validation.

Nous avons trouvé que c'était un excellent flux de travail. Par exemple, dans la capture d'écran précédente, seules les modifications par étapes versaperçu.pngseront inclus dans le commit. Les actions de mise en scène et de validation ultérieures peuvent inclure les modifications apportées àversioncontrol.mdet les deux autres.pngimages dans un commit séparé.

Plus spécifiqueCommettreles actions se trouvent dansVues et autres actions ...menu en haut de la vue Contrôle de code source.

Conseil:Si vous commitez votre changement dans la mauvaise branche, annulez votre commit en utilisant leGit : Annuler la dernière validationcommande dans lePalette de commandes(⇧⌘P(Windows, LinuxCtrl+Maj+P)).

Cloner un dépôt

Si vous n'avez pas encore ouvert de dossier, la vue Contrôle de la source vous donnera les options pourDossier ouvertà partir de votre machine locale ouDépôt de clones.

Télécommandes

Étant donné que votre référentiel est connecté à une télécommande et que votre branche extraite a unlien en amontà une succursale de cette télécommande, VS Code vous propose des actions utiles pourpousser,tirer, etsynchronisercette succursale (cette dernière dirigera unetirercommande suivie d'unpoussercommande). Vous pouvez trouver ces actions dans leVues et autres actions ...menu, ainsi que la possibilité deajouter ou supprimer une télécommande.

VS Code est capable de récupérer périodiquement les modifications de vos télécommandes. Cela permet à VS Code de montrer combien de modifications votre référentiel local est en avance ou en retard par rapport à la télécommande. Cette fonction est désactivée par défaut et vous pouvez utiliser legit.autofetch paramètrepour l'activer.

Conseil:Tu devraismettre en place un assistant d'identificationpour éviter de vous faire demander des informations d'identification chaque fois que VS Code parle à vos télécommandes Git. Si vous ne le faites pas, vous pouvez envisager de désactiver la récupération automatique via legit.autofetch paramètrepour réduire le nombre d'invites que vous recevez.

Actions de la barre d'état Git

Il y a unSynchroniser les modificationsaction dans la barre d'état, à côté de l'indicateur de branche, lorsque la branche extraite actuelle a une branche en amont configurée.Synchroniser les modificationsextraira les modifications à distance vers votre référentiel local, puis transmettra les validations locales à la branche en amont.

S'il n'y a pas de branche en amont configurée et que le référentiel Git a des télécommandes configurées, lePublieraction est activée. Cela vous permettra de publier la branche actuelle sur une télécommande.

Indicateurs de gouttière

Si vous ouvrez un dossier qui est un référentiel Git et que vous commencez à apporter des modifications, VS Code ajoutera des annotations utiles à la gouttière et à la règle de présentation.

Un triangle rouge indique où les lignes ont été supprimées
Une barre verte indique les nouvelles lignes ajoutées
Une barre bleue indique les lignes modifiées

Conflits de fusion

Les conflits de fusion sont reconnus par VS Code. Les différences sont mises en évidence et il existe des actions en ligne pour accepter l'une ou les deux modifications. Une fois les conflits résolus, préparez le fichier en conflit afin de pouvoir valider ces modifications.

Éditeur de fusion à 3 voies

Pour vous aider à résoudre les conflits de fusion, VS Code fournit un éditeur de fusion à 3 voies dans lequel vous pouvez accepter de manière interactive les modifications entrantes et actuelles et afficher et modifier le fichier fusionné résultant. L'éditeur de fusion à 3 voies s'ouvre en sélectionnant leRésoudre dans l'éditeur de fusiondans le coin inférieur droit d'un fichier avec des conflits de fusion Git.

L'éditeur de fusion à 3 voies affiche des vues séparées pourEntrantmodifications (à gauche),Actuelchangements (à droite), et leRésultatde la fusion (en bas). Les conflits sont mis en surbrillance et peuvent être résolus à l'aide des boutons CodeLens.

Résoudre les conflits

L'éditeur de fusion à 3 voies vous permet de résoudre les conflits en acceptant l'une ou les deux modifications. Vous pouvez également modifier manuellement le résultat de la fusion.

Pour certains conflits, l'éditeur de fusion affiche uneAccepter la combinaisonbouton. Accepter la combinaison résout le conflit actuel en fusionnant intelligemment les deux modifications. Ceci est particulièrement utile pour les changements dans la même ligne qui ne touchent pas les mêmes caractères.

Utilisez leIgnorerpour n'accepter ni la modification entrante ni la modification actuelle, mais marquer le conflit comme résolu. Cela réinitialise la zone en conflit à l'état avant toute modification.

Terminer la fusion

Vous pouvez utiliser le compteur de conflits à droite de l'éditeur de résultats pour suivre le nombre de conflits non résolus restants. Cliquer sur le compteur passe au prochain conflit non résolu. Une fois tous les conflits résolus, vous pouvez terminer la fusion en sélectionnantFusion complètedans le coin inférieur droit. Cela prépare le fichier et ferme l'éditeur de fusion.

Dispositions alternatives et plus

Sélection des trois points (···) dans le coin supérieur droit de l'éditeur de fusion ouvre un menu contextuel avec des options supplémentaires. Vous pouvez passer à une disposition verticale et afficher la vue de base, qui montre l'état du fichier avant toute modification.

Les trois points à côté deEntrant,Actuel, etRésultatoffrent des options pour chaque vue, telles que l'affichage d'un diff côte à côte par rapport à la base, l'acceptation de toutes les modifications ou la réinitialisation du résultat.

Comprendre les conflits

Si vous souhaitez en savoir plus sur les détails du fonctionnement des éditeurs de fusion à 3 voies, nous pouvons vous recommander la vidéo suivante :

Affichage des différences

Notre outil Git prend en charge la visualisation des différences dans VS Code.

Conseil:Vous pouvez différencier deux fichiers en cliquant d'abord avec le bouton droit sur un fichier dans l'explorateur ouÉDITEURS OUVERTSliste et sélectionSélectionner pour comparerpuis cliquez avec le bouton droit sur le deuxième fichier à comparer et sélectionnezComparer avec 'file_name_you_chose'. Alternativement du coup de clavier⇧⌘P(Windows, LinuxCtrl+Maj+P)et sélectionnezFichier : comparer le fichier actif avecet vous serez présenté avec une liste de fichiers récents.

Volet de révision de l'éditeur Diff

Il existe un volet de révision dans l'éditeur Diff qui présente les modifications dans un format de correctif unifié. Vous pouvez naviguer entre les modifications avecAller à la différence suivante(F7) etAller à la différence précédente(⇧F7(Windows, LinuxMaj+F7)). Les lignes peuvent être parcourues avec les touches fléchées et en appuyant surEntrerreviendra dans l'éditeur Diff et la ligne sélectionnée.

Note:Cette expérience est particulièrement utile pour les utilisateurs de lecteurs d'écran.

Affichage de la chronologie

La vue Chronologie, accessible par défaut en bas de l'explorateur de fichiers, est une vue unifiée permettant de visualiser les événements de séries chronologiques (par exemple, les commits Git) pour un fichier.

La prise en charge Git intégrée de VS Code fournit l'historique de validation Git du fichier spécifié. La sélection d'un commit ouvrira une vue diff des changements introduits par ce commit. Lorsque vous faites un clic droit sur un commit, vous aurez des options pourCopier l'ID de validationetCopier le message de validation.

Visual Studio Code prend en charge davantage de workflows d'historique Git viaextensionsdisponible sur le marché du code VS.

Conseil:Cliquez sur une vignette d'extension pour lire la description et les avis sur la place de marché.

Fenêtre de sortie Git

Vous pouvez toujours jeter un coup d'œil sous le capot pour voir les commandes Git que nous utilisons. Ceci est utile si quelque chose d'étrange se produit ou si vous êtes simplement curieux. :)

Pour ouvrir la fenêtre de sortie Git, exécutezVoir>Sortiret sélectionnezJournal (Git)dans la liste déroulante.

Initialiser un dépôt

Si votre espace de travail se trouve sur votre ordinateur local, vous pouvez activer le contrôle de source Git en créant un référentiel Git avec leInitialiser le référentielcommande. Lorsque VS Code ne détecte pas un référentiel Git existant, la vue Source Control vous donnera les options pourInitialiser le référentielouPublier sur GitHub.

Vous pouvez également exécuter leGit : Initialiser le référentieletPublier sur GitHubcommandes de laPalette de commandes(⇧⌘P(Windows, LinuxCtrl+Maj+P)). En coursInitialiser le référentielcréera les fichiers de métadonnées de référentiel Git nécessaires et affichera les fichiers de votre espace de travail sous forme de modifications non suivies prêtes à être mises en scène.Publier sur GitHubpubliera directement votre dossier d'espace de travail dans un référentiel GitHub, vous permettant de choisir entre des référentiels privés et publics. Découvrez notrepublication de dépôtsvidéo pour plus d'informations sur la publication sur GitHub.

VS Code en tant qu'éditeur Git

Lorsque vous lancez VS Code à partir de la ligne de commande, vous pouvez passer le--attendezargument pour faire attendre la commande de lancement jusqu'à ce que vous ayez fermé la nouvelle instance de VS Code. Cela peut être utile lorsque vous configurez VS Code comme votre éditeur externe Git afin que Git attende que vous fermiez l'instance lancée de VS Code.

Voici les étapes à suivre :

Assurez-vous que vous pouvez courircode --aideà partir de la ligne de commande et vous obtenez de l'aide.
- si vous ne voyez pas d'aide, veuillez suivre ces étapes :
  - macOS : sélectionnerCommande Shell : Installer la commande 'Code' dans le cheminduPalette de commandes.
  - Windows : assurez-vous d'avoir sélectionnéAjouter au CHEMINlors de la mise en place.
  - Linux : Assurez-vous d'avoir installé Code via notre nouveau.debou.rpmpaquets.
Depuis la ligne de commande, exécutezgit config --global core.editor "code --wait"

Maintenant tu peux courirgit config --global -eet utilisez VS Code comme éditeur pour configurer Git.

VS Code comme Git difftool et mergetool

Vous pouvez utiliser les fonctionnalités de comparaison et de fusion de VS Code même lorsque vous utilisez Git à partir de la ligne de commande. Ajoutez les éléments suivants à vos configurations Git pour utiliser VS Code comme outil de comparaison et de fusion :

[diff] outil= default-difftool[difftool "par défaut-difftool"] commande= code --wait --diff $LOCAL $DISTANT[fusionner] outil= codes[mergetool "code"] commande= code --wait --merge $REMOTE $LOCAL $BASE $MERGED

Celui-ci utilise le--diffoption qui peut être transmise à VS Code pour comparer deux fichiers côte à côte. L'outil de fusion sera utilisé la prochaine fois que Git découvrira un conflit de fusion.

Pour résumer, voici quelques exemples d'utilisation de VS Code comme éditeur :

git rebase HEAD~3 -ifaire un rebase interactif à l'aide de VS Code
git commetutiliser VS Code pour le message de validation
git ajouter -psuivie parepour l'ajout interactif
git difftool ^ utiliser VS Code comme éditeur de différences pour les modifications

Travailler avec les demandes d'extraction et les problèmes GitHub

Visual Studio Code peut également intégrer les demandes d'extraction et les problèmes de GitHub. Créez vos PR dans VS Code, révisez-les avec des commentaires et approuvez-les sans changer de contexte. En savoir plus surGitHub PR et problèmes dans VS Code.

Fournisseurs SCM

Conseil:Cliquez sur une vignette d'extension pour lire la description et les avis sur la place de marché.

VS Code prend en charge la gestion simultanée de plusieurs fournisseurs de contrôle de code source. Par exemple, vous pouvez ouvrir plusieurs référentiels Git parallèlement à votre espace de travail local Azure DevOps Server et travailler de manière transparente sur vos projets. Pour allumer leFournisseurs de contrôle de code sourcevue, sélectionnez le menu de débordement dans laContrôle des sourcesvoir (⌃⇧G(Windows, LinuxCtrl+Maj+G)), survolezVues, et assurez-vous queRéférentiels de contrôle de code sourceest marqué d'une coche. LeFournisseurs de contrôle de code sourceaffiche les fournisseurs et référentiels détectés, et vous pouvez étendre l'affichage de vos modifications en sélectionnant un fournisseur spécifique.

Extensions du fournisseur SCM

Si vous souhaitez installer un autre fournisseur SCM, vous pouvez rechercher sur lefournisseurs SCMcatégorie d'extension dans leRallongesvoir (⇧⌘X(Windows, LinuxCtrl+Maj+X)). Commencez à taper '@ca' et vous verrez des suggestions pour les catégories d'extension comme les débogueurs et les linters. Sélectionner@category:"fournisseurs scm"pour voir les fournisseurs SCM disponibles.

Prochaines étapes

Vidéo d'introduction - Contrôle de version Git- Une vidéo d'introduction donnant un aperçu de la prise en charge de VS Code Git.
Édition de base- En savoir plus sur le puissant éditeur de code VS.
Navigation des codes- Parcourez rapidement votre code source.
Débogage- C'est là que VS Code brille vraiment
Tâches- Exécuter des tâches avec Gulp, Grunt et Jake. Affichage des erreurs et des avertissements
API de contrôle de code source- Si vous souhaitez intégrer un autre fournisseur de contrôle de source dans VS Code, consultez notre API de contrôle de source.

06/07/2023