Versioner le code d'un projet aujourd'hui, c'est presque comme boire de l'eau : on ne peut pas faire sans.
Visual Studio Code ne fait pas exception. De nombreux moyens et extensions ont été mis en place pour faciliter et rendre plus agréable l’expérience de versioning. Dans cet article, je vais présenter quelques astuces de versioning lorsqu’on développe sur VS Code.
Si tu n’es pas un utilisateur de cet éditeur mais que tu as soif de rendre ton expérience plus agréable et ergonomique sur l’éditeur de ton choix, cet article est également fait pour toi car il pourrait t’inspirer des moyens de gagner en productivité sur ton éditeur préféré.
Sans plus attendre, chers amis Craftsmen et Craftswomen, allons au vif du sujet et prenons un peu plus possession de nos environnements de développement !
Installer git
Avant de tirer profit de git sur VS Code, il faut commencer par l’installer. Rendez-vous sur le site officiel de git : https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
Si tu es actuellement sous Linux ou alors tu utilises VS Code dans un environnement WSL2,il est possible que cette étape ne soit pas nécessaire.
Ensuite, bien penser à faire les quelques configurations git suivantes essentielles dans tous les cas :
$ git config --global user.name “Mon nom” $ git config --global user.email “mon mail”
Le Commit sur VS Code
Le Commit est probablement l'opération la plus courante lorsqu'on versione du code. C'est donc naturellement que je vais par vous montrer les astuces de commit.
Maintenant que git est installé, nous allons créer un projet qui nous servira de fil rouge pour le reste des explications.
$ mkdir super_project
Ensuite, on initialise Git dans ce projet
$ cd super_project/ $ git init
Maintenant, ouvrons ce projet dans VS Code. Pour cela, commence par ouvrir VS Code, rends-toi dans File > Open Folder et recherche super_project dans ton explorateur.
Si tu utilises VS Code en conjonction avec WSL2, tu peux également ouvrir ton terminal WSL2, te rendre dans le répertoire super_project et taper code .
Dans les deux cas, VS Code ouvrira ton répertoire et tu auras un rendu similaire à celui ci-dessous dans ta barre de gauche :
Dans la figure ci-dessus, tu peux remarquer la présence d’une icône en forme de graphe (surligné en jaune) : c’est le système de contrôle de versions intégré à VS Code, et tu verras son utilité dans un instant.
Maintenant que le projet est ouvert, crée un fichier nommé super1.txt au sein de ce projet. Tu constateras alors que l’icône précédemment mentionnée est maintenant affublée d’un “1” bien rond ! Ce symbole signifie que tu viens de créer ou modifier un fichier et que tu devrais effectuer un commit pour ces changements.
Comme tu dois t’en douter, le nombre inscrit représente le nombre de fichiers nécessitant un commit. Ici, comme nous n’en avons modifié qu’un, c’est “1” qui est écrit sur l’icône. Si nous en avions modifié 3, l’icône serait affublée d’un “3”.
Bien ! Il est temps de cliquer sur cette icône pour voir de quoi il en retourne !
Comme le montre la figure ci-dessus, tu as devant toi la liste des changements nécessitant un commit, l’équivalent d’un git status. Tu peux également accéder à cette vue à l’aide du raccourci Ctrl + Shift + G.
Pour que le fichier super1.txt fasse partie du prochain commit, il suffit de cliquer sur bouton + juste à côté de ce dernier, sous l’onglet Changes. Le fichier passe alors dans la zone de staging (équivalent du résultat de git add super1.txt).
Voilà ! Toutes les conditions sont réunies pour effectuer un commit. Pour cela, écrire le message de commit dans la zone de texte dédiée et taper ensuite Ctrl + Entrée.
Cela revient exactement à effectuer commit avec message en ligne de commande
$ git commit -m “Add super1.txt”
Mission accomplie ! Commit réussi ! Si tu veux voir les commits que tu as effectués, tu peux toujours ouvrir un terminal dans VS Code à l’aide du raccourci Ctrl + ù et faire un bon vieux git log.
Note : Ctrl + ù est le raccourci pour clavier français. Si tu n’utilises pas un clavier français ou travaille sur MacOS, ce sera vraisemblablement différent pour toi. Tu peux utiliser la palette de commandes pour accéder au terminal en tapant F1 puis View: Toggle Terminal.
Non seulement tu pourras accéder au terminal de cette façon, mais tu pourras aussi voir quel est le raccourci pour y accéder dans ton cas comme le montre la figure ci-dessus. Pour moi par exemple, c’est bien Ctrl + ù
Fais attention à ce que tu commit
En dehors de permettre d’effectuer des commits par une interface graphique, le système de contrôle de versions de VS Code te permet de prévisualiser les changements que tu as effectués.
Reprenons par exemple notre fichier super1.txt. A l’intérieur, écrivons le texte “Superman” et enregistrons-le. Le nom du fichier devrait alors prendre une couleur orangée dans l’interface et notre chère icône de contrôle de versions devrait indiquer qu’un changement a été effectué.
Maintenant, rendons-nous dans l’interface de contrôle de versions de tout à l’heure en cliquant dessus ou par un simple Ctrl + Shift + G, et cliquons sur super1.txt
L’éditeur ouvre alors un onglet dans lequel on peut apercevoir les différences entre la dernière version commitée de super1.txt et la modification que nous avons effectuée.
C’est une bonne pratique de faire cette visualisation avant d’utiliser un fichier pour un commit afin de s’assurer qu’il contient bien les modifications prévues. La relecture réduit ainsi le risque d’insérer des erreurs dans des commits.
Allez, maintenant que c’est dit, on peut add et commit cette modification puis continuer notre voyage initiatique du versioning 😉
Git Graph
Visualiser l’historique de commit peut se faire de plusieurs manières, la plus connue étant git log. Sur VS Code, il existe un moyen très esthétique et extrêmement pratique de visualiser le graphe git représentant l’historique de commits : l’extension Git Graph.
Rendez-vous dans la boutique d’extensions à l’aide du raccourci Ctrl + Shift + X pour installer cette extension.
Une fois l’extension installée, accède à la palette de commandes de VS Code à l’aide du raccourci Ctrl + Shift + P (ou en appuyant sur F1), recherche “git graph”, sélectionne Git Graph: View Git Graph (git log) et donne un grand coup au bouton Entrée sur ton clavier !
Tu obtiens alors ton historique de commit
En cliquant sur un message de commit particulier, on peut en voir le détail ainsi que la liste des fichiers concernés par la modification
Cliquer sur un de ces fichiers permet d’ailleurs de visualiser les modifications opérées sur ce dernier, exactement comme décrit dans la partie précédente.
Git Graph et les branches
Le graphe git est également particulièrement utile lorsqu’on souhaite avoir un aperçu des commits de toutes les branches. Pour illustrer mes propos, nous allons créer une branche nommée mes-propos à l’aide du terminal VS Code.
Ensuite, créons un fichier super2.txt puis faisons un add et un commit avec pour message “Add super2.txt”.
A l’aide du graphe git, on voit bien les commits de la branche mes-propos et ceux de la branche master.
Les merge sont également bien mis en évidence. Par exemple, rendons-nous dans le terminal VS Code et effectuons un merge de mes-propos dans master.
Aussitôt, nous apercevons une modification dans le graphe.
Et en cas de no-fast-forward merge (par exemple après qu’une pull request ait été validée sur GitHub), la lisibilité est également au rendez-vous.
Bonus : affichage des branches dans le prompt WSL2
VS Code s’utilise très bien en conjonction avec WSL2. Toutefois, par défaut, le prompt de WSL2 n’affiche pas la branche git actuellement en cours d’utilisation. Dans cette partie, je vais donc vous montrer une astuce pour y palier.
Tout d’abord, depuis le terminal WSL2, ouvrons le fichier ~/.bashrc
Tu peux l’ouvrir grâce à vim ou nano, ou alors utiliser directement VS Code si tu as effectué les configurations nécessaires à l’aide de la commande $ code ~/.bashrc
Ensuite, à la fin du fichier bashrc, copie-colle le code suivant :
# git branch name
parse_git_branch() {
git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}
PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]\[\033[33m\]$(parse_git_branch)\[\033[00m\]\$ '
Nous pouvons maintenant enregistrer le fichier. Le fichier bashrc est automatiquement exécuté chaque fois qu’on ouvre un nouveau terminal Linux, notamment WSL2 dans notre cas. Pour que les modifications soient prises en compte, on peut donc soit fermer et rouvrir le terminal WSL2, soit exécuter nous-même le fichier bashrc à l’aide de la commande $ source ~/.bashrc
Et tadam ! Maintenant, le terminal nous présente la branche en cours 😉
Cette démarche de configuration de prompt est proposée sur hinty.io, plus précisément à cette adresse https://hinty.io/ivictbor/show-git-branch-in-bash-on-linux-windows-wsl-2-cygwin-prompt/ (rendons à César ce qui appartient à César) et c’est elle qui m’a permis d’obtenir un affichage de la branche en cours sur WSL2 et par extension dans le terminal VS Code lorsqu’il utilise WSL2.
Take Away
Le versioning, et Git en particulier, font plus que jamais partie intégrante de notre quotidien de développeur. A cet effet, c’est très intéressant de pouvoir coder et versioner de la façon la plus fluide possible. Résultat : un maximum d’efficacité et un code bien historisé. Utilisateur de VS Code ou non, j’espère que tu as pu trouver ton compte ou de l’inspiration sur comment mettre à profit le système de contrôle de versions de ton éditeur. Nous sommes des crafters après tout. Et comme tout artisan, nous avons besoin d’outils qui nous permettent de répondre aux problématiques de notre quotidien de façon fluide. Sur ce, à très bientôt pour un nouvel article 😉
