Lorsqu’on travaille en équipe sur un projet de développement, la cohérence des environnements est un facteur clé pour maintenir la qualité et l’efficacité. Visual Studio Code offre une fonctionnalité élégante permettant de recommander automatiquement des extensions à l’ouverture d’un projet : le fichier extensions.json. Dans cet article, je vous explique comment synchroniser efficacement les extensions de votre projet et optimiser ainsi la collaboration entre développeurs.
Pourquoi recommander des extensions dans un projet ?
Quand plusieurs développeurs collaborent sur une même base de code, l’utilisation d’outils différents peut générer plusieurs problèmes :
- Incohérences dans le formatage du code
- Résultats variables selon les linters utilisés
- Comportements différents des tests selon l’environnement
- Temps d’installation conséquent pour les nouveaux collaborateurs
La solution ? Un système qui propose automatiquement les bonnes extensions dès qu’un collègue ouvre le projet. C’est simple, efficace et optimise considérablement le workflow de l’équipe.
Mise en place en 4 étapes simples
1. Créez le dossier .vscode
Commencez par créer un dossier .vscode à la racine de votre projet :
mkdir -p .vscode
2. Créez le fichier magique extensions.json
À l’intérieur de ce dossier, créez un fichier extensions.json avec cette structure :
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"ms-vscode.vscode-typescript-next"
]
}
Chaque élément du tableau représente l’ID unique d’une extension (format : éditeur.nom-extension).
3. Trouvez les identifiants de vos extensions préférées
Comment savoir quels identifiants mettre ? Plusieurs techniques :
Méthode 1 : Via l’interface de VS Code
- Ouvrez la vue Extensions (Ctrl+Shift+X)
- Repérez l’extension désirée
- Cliquez sur l’icône ⚙️ et choisissez « Copier l’ID d’extension »
Méthode 2 : En ligne de commande (pour les ninjas du terminal !)
code --list-extensions
4. Testez le résultat
Lorsqu’un collègue ouvrira votre projet pour la première fois, VS Code affichera automatiquement cette notification magique :
« Ce workspace a des extensions recommandées. [Installer] [Afficher les recommandations] [Ne plus afficher] »
Options avancées pour les pros
Extension Pack custom
Vous pouvez créer votre propre pack d’extensions ! C’est super pratique pour regrouper toutes les extensions liées à un framework ou langage spécifique :
- Dans VS Code, utilisez la commande
Extension: Create Extension Pack - Sélectionnez les extensions à inclure
- Publiez votre pack sur le marketplace (ou partagez-le en interne)
Configurer des extensions à éviter
Vous pouvez aussi indiquer les extensions qui causent des conflits :
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"
],
"unwantedRecommendations": [
"hookyqr.beautify",
"dbaeumer.jshint"
]
}
Configuration automatique des extensions
Pour aller encore plus loin, ajoutez un fichier settings.json dans le dossier .vscode pour préconfigurer les extensions :
{
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"eslint.validate": ["javascript", "typescript"],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
Astuces pour une meilleure adoption
- Restez raisonnable : Recommandez uniquement les extensions vraiment nécessaires
- Commentez votre choix : Ajoutez des commentaires pour expliquer pourquoi chaque extension est importante
- Tenez à jour : N’oubliez pas de mettre à jour la liste quand les besoins évoluent
- Intégrez à votre CI/CD : Vérifiez la cohérence de vos extensions dans votre pipeline d’intégration continue
Cas d’utilisation qui vont vous faire briller
Pour un projet Angular
{
"recommendations": [
"angular.ng-template",
"johnpapa.angular-essentials",
"cyrilletuzi.angular-schematics",
"Mikael.Angular-BeastCode",
"infinity1207.angular2-switcher"
]
}
Pour un projet Symfony
{
"recommendations": [
"nadim-vscode.symfony-code-snippets",
"felixfbecker.php-debug",
"bmewburn.vscode-intelephense-client",
"junstyle.php-cs-fixer",
"recca0120.vscode-phpunit"
]
}
Conclusion : Gagnez en productivité !
L’utilisation du fichier .vscode/extensions.json est une de ces petites techniques qui font une énorme différence dans la productivité d’une équipe. En standardisant votre environnement de développement, vous :
- Réduisez le temps d’onboarding des nouveaux développeurs
- Éliminez les bugs liés aux différences d’environnement
- Améliorez la cohérence du code
- Renforcez la collaboration
Alors, qu’attendez-vous pour mettre en place cette bonne pratique dans vos projets ? Vos collègues vous remercieront, et votre futur vous aussi !
Et vous, quelles sont les extensions VS Code que vous recommandez systématiquement dans vos projets ? Partagez-les en commentaire !