Extensions VS Code : enrichir sans alourdir

Travailler avec Visual Studio Code, c’est comme disposer d’un établi modulable. L’essentiel est là dès le départ, mais tout le reste dépend de vos besoins. Vous pouvez ajouter des outils, en retirer, ajuster l’apparence, automatiser des actions. Ce sont les extensions qui permettent cela.

Mais attention : ajouter une extension, ce n’est pas comme installer un fond d’écran. Cela change l’environnement, le comportement, les habitudes. Un outil mal choisi peut gêner autant qu’il aide.

Dans cet article, pas de liste magique ni de comparatif exhaustif. Juste un objectif : comprendre à quoi servent les extensions, comment les choisir, les utiliser, et les maîtriser. Pour que VS Code vous accompagne, sans vous ralentir.

Un écosystème vivant, mais à apprivoiser

VS Code ne se contente pas de proposer quelques options de personnalisation. Il s’appuie sur un véritable écosystème d’extensions, accessible depuis l’éditeur lui-même ou en ligne, via marketplace.visualstudio.com. Ce Marketplace fonctionne comme une bibliothèque collaborative : chacun peut y proposer un outil, l’améliorer, le documenter.

La très grande majorité des extensions sont gratuites. Quelques-unes, développées par des éditeurs ou intégrées à des solutions professionnelles, peuvent proposer une version payante, souvent facultative ou complémentaire.

Chaque extension dispose d’une fiche descriptive, avec :

• une présentation des fonctions principales,
• une documentation intégrée ou un lien vers un guide complet,
• une évaluation par les utilisateurs, un nombre d’installations, et parfois des captures d’écran,
• un historique de mises à jour, pour vérifier si l’outil est encore maintenu.

Mais ce qui rend l’écosystème si riche peut aussi le rendre confus. Des dizaines d’extensions font parfois la même chose. Certaines sont très anciennes, d’autres à peine sorties. Il n’y a pas de filtre qualité automatique, ni de validation centralisée.

Il n’existe pas un seul forum officiel, mais plusieurs espaces d’échange complémentaires :

• Stack Overflow, où les extensions les plus populaires ont souvent des fils dédiés,
• les issues sur GitHub, pour les extensions maintenues en open source,
• les commentaires dans le Marketplace, utiles pour repérer des problèmes récurrents,
• et parfois des articles ou tutoriels indépendants, qui mettent en lumière des outils efficaces mais peu connus.

Certaines extensions bénéficient d’une vraie visibilité, relayées dans des blogs ou des sélections YouTube. D’autres restent discrètes mais très solides, adaptées à des usages de niche. Il n’y a pas de règle fixe : on avance extension par extension, usage par usage.

C’est pourquoi il est essentiel d’apprendre à lire une fiche, à recouper les informations, à tester sans précipitation ni engagement. Une extension bien notée ne sera pas forcément adaptée à votre manière de travailler. Inversement, une pépite méconnue peut devenir un outil clé de votre quotidien.

Comme souvent dans l’univers du logiciel libre, la communauté joue un rôle décisif : les retours sur Stack Overflow, les discussions dans les issues GitHub ou les avis détaillés sur les fiches d’extension peuvent valoir bien plus qu’un simple nombre d’étoiles.

Comprendre les réglages avec settings.json

Dans VS Code, la plupart des extensions — et même certaines fonctions natives — s’appuient sur un principe simple : leurs réglages sont modifiables par l’utilisateur, et tous peuvent être rassemblés dans un même fichier, nommé settings.json.

Ce fichier agit comme un tableau de bord de votre projet. Chaque règle y est définie sous la forme d’une propriété, précédée d’un nom clair. Par exemple, les options liées à Prettier commenceront par prettier., celles de l’éditeur par editor., celles de SFTP par sftp.… Tout est regroupé dans un seul fichier, mais l’ordre ou la hiérarchie est visuelle et logique, pas technique.

Si vous ouvrez un projet sans réglage particulier, VS Code utilisera les réglages globaux définis dans votre profil utilisateur. Mais dès que vous ajoutez un fichier .vscode/settings.json dans un dossier, c’est ce fichier qui prendra la main pour ce projet, en surchargeant uniquement les règles nécessaires.

Ce mécanisme permet une personnalisation très fine, sans conflit ni perte de lisibilité. Mieux encore : le fichier settings.json peut être versionné, partagé, exporté, ou adapté selon le contexte. En un mot, votre éditeur devient aussi souple que votre code.

Pour mieux comprendre cette logique, vous pouvez relire l’article précédent consacré à la prise en main générale de l’éditeur :
VS Code, prise en main : comprendre l’outil avant de l’utiliser

Les incontournables, ou les premiers outils qui rendent service

Certaines extensions deviennent vite naturelles à l’usage. Pas parce qu’on vous les recommande partout, mais parce qu’une fois essayées, elles simplifient des gestes du quotidien. Voici quelques exemples concrets de ce que chacune peut réellement vous apporter — et comment les configurer avec justesse.

Live Server– Ritwick Dey

Lance un serveur local pour tester une page HTML ou JS, avec rechargement automatique dès que vous sauvegardez un fichier.
Mise en situation : vous codez un fichier index.html et vous souhaitez voir en direct ce que vous modifiez sans recharger manuellement. Live Server le fait pour vous.
Paramètres utiles (settings.json) :

{
  "liveServer.settings.port": 5500,
  "liveServer.settings.wait": 250,
  "liveServer.settings.ignoreFiles": [
    ".vscode/**",
    "**/*.scss"
  ]
}

Ces réglages permettent de choisir le port utilisé, d’ajouter un délai de rafraîchissement, ou d’exclure certains fichiers du suivi automatique.

SFTP – liximomo

Synchronise automatiquement (ou manuellement) vos fichiers avec un serveur distant.
Mise en situation : vous travaillez localement sur un projet PHP, mais devez mettre à jour un site hébergé sur un serveur distant.
Paramètres essentiels (sftp.json) :

{
	"name": "Project B",
	"host": "91.85.66.77",
	"protocol": "sftp",
	"port": 22,
	"username": "admin_user_ftp",
	"password": "JikO0.%lMMl0-HJuyak89qP_!778",
	"remotePath": "/subdomains/rootapp/",
	"useTempFile": false,
	"uploadOnSave": true,
	"syncMode": "update",
	"watcher": {
		"files": "**/*",
		"autoUpload": true,
		"autoDelete": false
	}
}

Vous pouvez ainsi automatiser l’envoi de chaque fichier dès qu’il est modifié localement, tout en évitant les suppressions accidentelles.

Prettier – Code formatter

Formate automatiquement le code selon des règles précises. Idéal pour garder une base propre, surtout en équipe.
Installation : après l’installation, un clic droit permet “Format Document with Prettier”.
Paramètres recommandés dans settings.json :

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5"
}

Vous choisissez vos règles une fois, et Prettier les applique à chaque sauvegarde. Pratique en solo comme en équipe.

Code Spell Checker

Vérifie l’orthographe des commentaires, textes visibles, noms de fonctions… sans alourdir l’interface.
Installation : immédiate. Affiche un soulignement ondulé pour chaque mot douteux.
Personnalisation : vous pouvez ajouter des mots spécifiques à un dictionnaire personnel par projet (.vscode/settings.json) ou globalement.

{
  "cSpell.language": "fr,en",
  "cSpell.enableFiletypes": [
    "html",
    "markdown",
    "javascript"
  ],
  "cSpell.userWords": [
    "pem",
    "json"
  ]
}

Vous pouvez ainsi l’activer uniquement pour certains langages, ajouter des mots personnalisés, ou mixer plusieurs langues.

Emmet

Développé à l’origine sous le nom Zen Coding par Sergey Chikuyonok, Emmet est aujourd’hui directement intégré dans VS Code. Il ne s’agit pas d’une extension à ajouter, mais d’une fonctionnalité native, maintenue par l’équipe de Microsoft, et activée par défaut.

Emmet permet d’écrire du HTML ou du CSS à la volée, à partir d’abréviations structurées. Tapez par exemple ul>li*3, validez par Tab, et vous obtenez une liste HTML complète. Ce raccourci devient vite un réflexe pour poser rapidement la structure d’une page, notamment en phase de prototypage ou de maquettage rapide.

Son comportement est entièrement configurable via le fichier settings.json. Il est même possible d’adapter Emmet à d’autres langages ou contextes (Vue, JSX, Markdown…) et de modifier les règles de génération du code.

{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html"
  },
  "emmet.syntaxProfiles": {
    "html": {
      "quoteStyle": "double"
    }
  }
}

La documentation complète est accessible sur emmet.io, et une page dédiée à son usage dans VS Code est disponible ici : https://code.visualstudio.com/docs/editor/emmet

Project Manager – Alessandro Fragnani

Cette extension facilite le passage d’un projet à l’autre sans avoir à rouvrir manuellement vos dossiers récents. Elle permet de créer une liste de projets favoris, de les classer, de les retrouver facilement, et d’y accéder depuis la palette de commande. Très pratique si vous jonglez entre plusieurs environnements ou dossiers régulièrement utilisés.

Mise en situation : vous travaillez sur trois projets situés dans des dossiers différents : un site client, un script personnel, et un back-office. Project Manager vous permet de tous les retrouver d’un clic, sans devoir naviguer dans l’arborescence de votre disque à chaque fois.
Paramètres recommandés (settings.json) :

{
  "projectManager.git.baseFolders": ["~/Sites", "~/Documents/projets-web"],
  "projectManager.excludeFolders": ["**/node_modules", "**/.git", "**/dist"],
  "projectManager.sortList": "Name",
  "projectManager.cacheProjectsBetweenSessions": true,
  "projectManager.openInNewWindowWhenClickingInStatusBar": false
}

• git.baseFolders permet de définir plusieurs répertoires à surveiller pour détecter automatiquement des projets versionnés.
• excludeFolders filtre les sous-dossiers à ignorer, pour ne pas alourdir la recherche.
• sortList trie vos projets par nom, date ou fréquence d’utilisation.
• cacheProjectsBetweenSessions garde en mémoire la dernière liste, même sans réouverture manuelle.
• openInNewWindowWhenClickingInStatusBar évite d’ouvrir une nouvelle fenêtre à chaque changement de projet, si vous préférez garder une seule instance.

Cela vous permet de construire une vraie « page d’accueil personnelle » dans VS Code, où chaque projet est accessible sans friction.

Thèmes et habillages : voir clair, coder mieux

Beaucoup d’utilisateurs commencent par installer un “thème complet”. Ces packages regroupent un habillage général (foncé, clair, contrasté…), un jeu d’icônes, une organisation visuelle des panneaux, voire des suggestions de polices. On en trouve des centaines dans le Marketplace, avec des captures d’écran, des notes, des aperçus instantanés. En un clic, on transforme l’ambiance de l’éditeur sans rien avoir à configurer.

Mais ce n’est là que la partie émergée de l’iceberg. Ce qui rend VS Code vraiment unique, c’est la possibilité de tout personnaliser indépendamment. Vous pouvez ajuster la syntaxe du code sans changer l’apparence des menus, modifier uniquement la couleur des commentaires, changer la forme du curseur, désactiver certaines animations, revoir l’interlignage, ou appliquer une charte visuelle par langage. Et tout cela depuis un seul fichier, settings.json.

Ce qui est personnalisable

• L’éditeur de code : couleurs de la syntaxe, police, taille, interligne, ligatures, style de curseur, comportement de surbrillance.
• L’interface de VS Code : barres latérales, onglets, terminal intégré, fond actif/inactif, panneau de recherche, notifications…
• Les icônes de fichiers : styles visuels de l’arborescence, jeux d’icônes personnalisés pour mieux identifier les fichiers par type ou langage.

Certaines extensions proposent des “packs” complets (thème + icônes + police recommandée), d’autres se concentrent sur un seul aspect. Il n’y a pas de modèle imposé : vous pouvez composer votre propre ambiance ou adopter une configuration prête à l’emploi.

Quelques paramètres essentiels (settings.json)

{
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "editor.fontFamily": "Fira Code, Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.cursorStyle": "line",
  "editor.lineHeight": 22,
  "editor.tokenColorCustomizations": {
    "comments": "#6A9955",
    "functions": "#DCDCAA"
  }
}

Ces propriétés sont regroupées dans des sections cohérentes :

• workbench gère l’interface globale, le thème, les icônes.
• editor concerne la zone de code (visuel et comportement).
• window, terminal, explorer, etc., peuvent aussi être personnalisés.

Ressources utiles

Pour explorer toutes les options disponibles, deux références sont à garder sous la main :

• Documentation officielle VS Code sur les thèmes
  https://code.visualstudio.com/docs/configure/themes
• Fichier colorCustomizations complet (Gist GitHub)
  https://gist.github.com/dcts/5b2af4c8b6918e7d35c4121f11d49fb1

Vous y trouverez les propriétés exactes pour ajuster chaque partie de l’éditeur : couleurs d’arrière-plan, types de tokens, barres latérales, notifications, etc.

Personnaliser son interface, ce n’est pas un caprice visuel. C’est une manière d’adapter l’outil à sa façon de lire, de se concentrer, de travailler. Un bon contraste, une structure claire, des repères visuels précis — tout cela participe à votre efficacité.

Choisir, activer, désactiver : un usage raisonné des extensions

Le Marketplace de VS Code regorge d’extensions puissantes, séduisantes, ou simplement pratiques. Mais vouloir tout tester ou tout garder n’est pas toujours une bonne idée. Chaque extension ajoute une couche de code, consomme des ressources, et parfois interfère avec d’autres outils. Il vaut mieux choisir peu, mais bien.

Extensions installées, recommandations locales : bien faire la part des choses

Quand vous installez une extension depuis le Marketplace, elle est ajoutée globalement à votre éditeur. Elle est alors disponible dans tous vos projets, sauf si vous la désactivez manuellement.

Mais un projet peut aussi suggérer des extensions, grâce au fichier .vscode/extensions.json. Ces suggestions ne déclenchent pas d’installation automatique, mais aident à orienter le développeur, notamment quand il découvre ou rejoint un projet déjà en cours.

{
  "recommendations": [
    "ritwickdey.LiveServer",
    "esbenp.prettier-vscode"
  ],
  "unwantedRecommendations": [
    "dbaeumer.vscode-eslint"
  ]
}

• recommendations vous propose certaines extensions, si elles ne sont pas encore installées.
• unwantedRecommendations bloque les suggestions d’extensions jugées non pertinentes pour ce projet.

Ces recommandations ne désactivent pas les extensions déjà installées globalement. Elles ne font que guider les utilisateurs.

Projet A, Projet B : même éditeur, besoins différents

Prenons deux cas concrets :

• Projet A : un petit site statique. Vous utilisez Live Server pour le prévisualiser.
• Projet B : une API Node.js avec gestion stricte du code. Vous utilisez ESLint, Prettier et le débogueur intégré.

Avec des extensions différentes, des réglages différents, des usages différents… pourquoi imposer une configuration unique ? VS Code vous permet d’adapter chaque environnement à son contexte, sans écraser les autres.

// Projet A – .vscode/extensions.json
{
  "recommendations": [
    "ritwickdey.LiveServer",
    "naumovs.color-highlight"
  ]
}

// Projet B – .vscode/extensions.json
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "ms-vscode.node-debug2"
  ],
  "unwantedRecommendations": [
    "ritwickdey.LiveServer"
  ]
}

Si vous récupérez un projet contenant déjà des recommandations, l’éditeur vous le signale à l’ouverture : vous êtes immédiatement guidé vers les bons outils. Un gain de temps, une cohérence, sans friction.

Prendre le temps de lire et de comparer

Chaque fiche d’extension contient des indices précieux : nombre de téléchargements, fréquence des mises à jour, compatibilité avec d’autres outils, captures d’écran, exemples de configuration… Certaines indiquent même les versions de VS Code compatibles ou les dépendances tierces.

Ne vous fiez pas uniquement à la note globale. Regardez si un dépôt GitHub est lié, parcourez les issues, les retours d’utilisateurs, et testez par vous-même.

C’est pourquoi il est important d’apprendre à lire une fiche, à croiser les informations, à ne pas installer sans réfléchir, et à tester sans se sentir engagé. Comme pour un logiciel libre, la communauté joue un rôle essentiel : les retours d’expérience sur les forums, sur GitHub ou sur Stack Overflow valent parfois bien plus qu’un simple avis étoilé.

Conclusion : maîtriser ses outils, sans se noyer

Choisir ses extensions, les adapter à ses projets, les activer ou les désactiver selon les contextes… ce n’est pas une gymnastique technique, c’est une manière de prendre la main sur son environnement. VS Code ne vous enferme pas dans un modèle figé : il vous propose un éditeur qui s’adapte à vous, à condition d’en comprendre les logiques.

Prenez le temps de tester, d’observer, de documenter vos préférences. Installez peu, mais utile. Et surtout, pensez vos outils comme vous pensez votre code : évolutifs, réversibles, lisibles.

L’article “VS Code, prise en main : comprendre l’outil avant de l’utiliser” revient justement sur les bases de cette philosophie. Celui-ci prolonge le geste, en explorant comment les extensions participent à cette liberté de développement.

Et demain ? Peut-être un article sur la création de vos propres snippets, ou sur la manière d’empaqueter vos réglages comme une extension maison. Car avec VS Code, tout reste ouvert.