La barre de statut en bas de VS Code est souvent sous-estimée. C’est pourtant un outil puissant.
Ce guide vous aide à comprendre son rôle et à la personnaliser avec les bonnes extensions.
Qu’est-ce que la Status Bar de VS Code ?
La Status Bar est la barre située tout en bas de l’interface de Visual Studio Code. Son but principal est d’afficher des informations sur votre projet (workspace) et de proposer des actions rapides.
Elle n’est pas juste là pour décorer. C’est un espace fonctionnel qui vous donne des infos en temps réel sans que vous ayez à ouvrir un menu. Si vous développez une extension pour VS Code, vous pouvez y ajouter vos propres indicateurs.
Définition et organisation
La Status Bar est divisée en deux groupes principaux pour organiser les informations de manière logique :
- Le groupe « Primary » (à gauche) : Il affiche les informations globales qui concernent tout votre projet. C’est ici que vous trouverez le statut de la synchronisation, le nombre de problèmes et d’avertissements, ou des indicateurs de statut généraux.
- Le groupe « Secondary » (à droite) : Il contient les informations contextuelles, qui changent en fonction du fichier que vous éditez. Vous y verrez le langage de programmation, le type d’encodage du fichier, ou encore le formatage du code.
Cette organisation permet de savoir d’un coup d’œil où chercher l’information dont vous avez besoin. Ce qui est global est à gauche, ce qui est spécifique au fichier est à droite.
Bonnes pratiques pour les développeurs d’extensions
Si vous créez une extension pour Visual Studio Code, il y a des règles simples à suivre pour que votre ajout à la Status Bar soit utile et non dérangeant.
À faire :
- Utilisez des textes courts et clairs.
- N’utilisez des icônes que si c’est nécessaire et si leur sens est évident.
- Placez les éléments globaux (Primary) à gauche.
- Placez les éléments contextuels (Secondary) à droite.
À ne pas faire :
- N’ajoutez pas de couleurs personnalisées.
- N’ajoutez pas plus d’une icône (sauf si c’est indispensable).
- N’ajoutez pas plus d’un élément à la barre (sauf si votre extension le justifie).
Les différents types d’indicateurs de statut
La Status Bar peut afficher différents types d’informations pour s’adapter à plusieurs situations.
Le type le plus courant est un simple texte ou une icône. L’extension GitHub Pull Requests and Issues, par exemple, ajoute un petit indicateur pour montrer le statut de vos pull requests directement dans la barre.
Mais il existe des cas plus spécifiques :
- Indicateur de progression (Progress Status Bar item) : Très utile pour montrer une tâche de fond qui prend du temps, comme un build ou un déploiement. Il utilise une icône de chargement (`loading icon`) qui peut avoir une animation de rotation (`spin animation`) pour montrer que quelque chose est en cours.
- Indicateurs d’erreur et d’avertissement : Ces indicateurs sont conçus pour être très visibles. Ils utilisent une couleur de fond spécifique (`warning` ou `error background color`) pour attirer l’attention. C’est à utiliser en dernier recours, quand l’utilisateur doit vraiment voir l’information.
3 exemples d’extensions pour personnaliser votre Status Bar
Maintenant que vous savez comment la Status Bar fonctionne, voyons comment la rendre encore plus utile avec des extensions. Voici trois exemples concrets.
1. `vscode-stats-bar` : gardez un œil sur les performances de votre système
Cette extension est parfaite si vous voulez savoir ce qu’il se passe sur votre machine sans quitter votre éditeur de code. Elle affiche des statistiques système directement dans la Status Bar.
- Nom de l’extension : `vscode-stats-bar`
- Auteur : `njzydark`
- Fonction : Affiche la charge du CPU, l’utilisation de la mémoire, la vitesse du réseau et plus encore.
Le principal avantage de cette extension, c’est qu’elle est entièrement personnalisable. Vous pouvez choisir exactement ce que vous voulez afficher, dans quel ordre, et même changer l’intervalle de rafraîchissement. Elle permet aussi de copier votre adresse IP dans le presse-papiers d’un simple clic.
Pour personnaliser l’affichage, vous utilisez des variables dans les paramètres de l’extension. Par exemple :
- Icônes : Vous pouvez ajouter n’importe quelle icône de VS Code avec la variable `$(icon-name)`. La liste complète est disponible sur le site des icônes VS Code (codicons).
- CPU Load : `${percent}`
- Uptime : `${days}`, `${hours}`, `${minutes}`
- Network Speed : `${up}` (upload), `${down}` (download)
- Memory Usage : `${used}`, `${total}`, `${percent}`
Cette extension s’appuie sur la bibliothèque systeminformation pour récupérer les données, ce qui garantit leur fiabilité.
2. `VSCode Status Extension` : partagez votre statut via une API
Cette extension a un but très différent. Elle ne vous donne pas d’informations, mais permet d’en envoyer à l’extérieur.
- Nom de l’extension : `VSCode Status Extension`
- Auteur : `PowerPCFan`
- Prix : Gratuit
- Fonction : Envoie le statut de votre session Visual Studio Code (le projet sur lequel vous travaillez, le fichier ouvert, etc.) à une API externe.
À quoi ça sert ? Par exemple, vous pouvez l’utiliser pour afficher en temps réel sur votre site personnel ou un profil en ligne que vous êtes en train de coder. L’extension communique avec une API spécifique, `vscode-status-api`. Si vous êtes curieux de savoir comment ça marche, le code de l’API est open source et disponible sur le dépôt GitHub de vscode-status-api.
3. Autres extensions populaires pour la Status Bar
De nombreuses extensions que vous utilisez probablement déjà se servent de la Status Bar pour vous donner des informations utiles.
- GitLens : C’est l’une des plus connues. GitLens ajoute des informations Git très détaillées dans la Status Bar, comme le nom de la branche actuelle, le nombre de commits en attente et des raccourcis vers les actions Git courantes.
- Prettier – Code formatter : Cette extension ajoute un petit indicateur (souvent une coche ✔️) à droite de la barre. Il vous confirme que le formatage du fichier est correct selon vos règles Prettier. Si vous cliquez dessus, vous pouvez voir les logs de formatage.
- Docker : Si vous travaillez avec des conteneurs, l’extension Docker pour VS Code affiche le nombre de conteneurs en cours d’exécution et vous donne un accès rapide pour les gérer, les visualiser ou les arrêter.
Comment créer votre propre extension pour la Status Bar ?
Si vous ne trouvez pas d’extension qui répond à votre besoin, vous pouvez créer la vôtre. Visual Studio Code fournit une API complète et bien documentée pour interagir avec la Status Bar.
Le processus consiste principalement à déclarer une « contribution » dans le fichier `package.json` de votre vscode extension. Ensuite, dans votre code, vous utilisez l’API de `vscode` pour créer et gérer des objets `StatusBarItem`. C’est avec ces objets que vous pouvez définir le texte, l’icône, la couleur et le comportement de votre indicateur.
Pour commencer, voici deux ressources officielles qui vous guideront pas à pas :
- Consulter la documentation officielle de l’API StatusBarItem : La référence complète pour comprendre toutes les options disponibles.
- Explorer le projet d’exemple de Microsoft : Un projet simple qui montre concrètement comment ajouter un item à la Status Bar.
La Status Bar de VS Code est bien plus qu’une simple ligne d’info. C’est un espace que vous pouvez modeler selon vos besoins. N’hésitez pas à tester les extensions ou même à créer la vôtre pour améliorer votre productivité.
