Les meilleures extensions VS Code pour développeurs web en 2026

Le Marketplace de VS Code compte des dizaines de milliers d’extensions. Résultat : on installe tout ce qui passe, l’éditeur ralentit, et on ne sait plus ce qui sert à quoi. Le but de cette liste est l’inverse : peu d’extensions, mais les bonnes, celles qui font gagner du temps chaque jour et évitent des bugs.

Comment installer une extension VS Code

Trois méthodes, du plus visuel au plus rapide :

1. Interface : icône Extensions dans la barre latérale (ou Ctrl + Maj + X), recherche, bouton Installer.
2. Palette de commandes : Ctrl + P, puis ext install esbenp.prettier-vscode.
3. Terminal : la commande code installe une liste entière d’un coup, idéal sur un nouveau PC.

code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --list-extensions          # lister ce qui est installé

code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --list-extensions          # lister ce qui est installé

Extensions VS Code pour la qualité du code

✨ Prettier

Le formateur de référence pour HTML, CSS, JavaScript, TypeScript, JSON et Markdown. Fini les débats sur les points-virgules et l’indentation : le code est reformaté automatiquement à chaque sauvegarde, de la même façon pour toute l’équipe.

• Identifiant : esbenp.prettier-vscode — voir sur le Marketplace
• Astuce : active "editor.formatOnSave": true et ajoute un fichier .prettierrc au projet pour partager les règles.

🔎 ESLint

Affiche directement dans l’éditeur les erreurs et mauvaises pratiques JavaScript/TypeScript détectées par ESLint : variable inutilisée, == au lieu de ===, promesse non attendue… Il corrige même une partie des problèmes à la sauvegarde.

• Identifiant : dbaeumer.vscode-eslint — voir sur le Marketplace
• Astuce : depuis ESLint 9, la configuration se fait dans eslint.config.js (format « flat config ») : l’extension la détecte automatiquement.

🚨 Error Lens

Affiche les erreurs et avertissements directement au bout de la ligne concernée, en couleur, au lieu d’un simple soulignement ondulé. Tu vois les problèmes sans survoler ni ouvrir le panneau Problèmes. C’est l’extension qu’on ne désinstalle plus.

• Identifiant : usernamehw.errorlens — voir sur le Marketplace

📐 EditorConfig

Applique le fichier .editorconfig du projet : indentation (espaces ou tabulations), fin de ligne, encodage. Indispensable quand plusieurs éditeurs (VS Code, PhpStorm, Vim) cohabitent dans une équipe.

• Identifiant : EditorConfig.EditorConfig — voir sur le Marketplace

🔤 Code Spell Checker (+ dictionnaire français)

Correcteur orthographique pensé pour le code : il comprend le camelCase et le snake_case. Ajoute le dictionnaire français (streetsidesoftware.code-spell-checker-french) pour tes textes d’interface et commentaires en français.

• Identifiant : streetsidesoftware.code-spell-checker — voir sur le Marketplace
• Astuce : ajoute "cSpell.language": "en,fr" dans tes réglages.

Extensions VS Code pour HTML et CSS

🎨 Tailwind CSS IntelliSense

Autocomplétion des classes Tailwind, aperçu du CSS généré au survol, détection des classes en conflit et tri automatique. Si tu utilises Tailwind, c’est non négociable.

• Identifiant : bradlc.vscode-tailwindcss — voir sur le Marketplace
• Astuce : associe-la au plugin Prettier officiel prettier-plugin-tailwindcss pour trier les classes à la sauvegarde.

🧩 HTML CSS Support

Complète dans ton HTML les classes et identifiants définis dans tes feuilles de style (y compris Bootstrap via un lien distant). Pratique pour éviter les fautes de frappe dans class="…".

• Identifiant : ecmel.vscode-html-css — voir sur le Marketplace

👀 Live Preview

L’extension officielle de Microsoft pour prévisualiser une page HTML dans un panneau de VS Code ou dans le navigateur, avec rechargement automatique. Elle remplace avantageusement l’ancienne extension « Live Server », qui n’est plus activement maintenue.

• Identifiant : ms-vscode.live-server — voir sur le Marketplace
• Astuce : pour un projet PHP, préfère ton serveur local (WampServer, php -S localhost:8000) : Live Preview ne sert que des fichiers statiques.

Extensions VS Code pour JavaScript et TypeScript

🧹 Pretty TypeScript Errors

Transforme les messages d’erreur TypeScript illisibles (trois lignes de types imbriqués) en un bloc formaté, coloré et lisible. Un vrai gain de temps sur les projets React ou Node.js en TypeScript.

• Identifiant : yoavbls.pretty-ts-errors — voir sur le Marketplace

📦 Import Cost

Affiche à côté de chaque import le poids de la bibliothèque importée. Idéal pour repérer qu’un import de lodash entier ajoute 70 Ko à ton bundle alors qu’une seule fonction suffisait.

• Identifiant : wix.vscode-import-cost — voir sur le Marketplace

🥷 Console Ninja

Affiche le résultat de tes console.log et les erreurs d’exécution directement dans l’éditeur, à côté de la ligne concernée, pour les projets Node.js, Vite, Next.js… La version gratuite couvre l’essentiel.

• Identifiant : WallabyJs.console-ninja — voir sur le Marketplace

Extensions VS Code pour PHP

🐘 PHP Intelephense

La meilleure extension PHP : autocomplétion intelligente, navigation vers les définitions, détection d’erreurs, renommage de symboles. La version gratuite est déjà excellente ; la licence premium ajoute le renommage et quelques refactorisations.

• Identifiant : bmewburn.vscode-intelephense-client — voir sur le Marketplace
• Astuce : désactive l’extension PHP intégrée de VS Code (PHP Language Features) pour éviter les suggestions en double.

🐞 PHP Debug (Xdebug)

Le débogueur officiel de l’équipe Xdebug : points d’arrêt, inspection des variables, pile d’appels. Bien plus efficace qu’une avalanche de var_dump(). WampServer inclut déjà Xdebug, il suffit de l’activer dans php.ini.

• Identifiant : xdebug.php-debug — voir sur le Marketplace

[xdebug]
zend_extension=xdebug
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_port=9003

[xdebug]
zend_extension=xdebug
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_port=9003

🔺 Laravel

L’extension officielle de Laravel : autocomplétion des routes, vues, configurations, traductions et modèles Eloquent, avec liens cliquables. Si tu travailles avec Laravel, installe-la en priorité.

• Identifiant : laravel.vscode-laravel — voir sur le Marketplace

Extensions VS Code pour Git et le travail en équipe

🌿 GitLens

Affiche qui a modifié chaque ligne et quand (blame en ligne), l’historique d’un fichier, la comparaison entre branches… Les fonctions de base sont gratuites et suffisent largement.

• Identifiant : eamodio.gitlens — voir sur le Marketplace

🕸️ Git Graph

Un graphe clair et interactif de l’historique Git : branches, fusions, tags. On peut faire un checkout, un cherry-pick ou créer une branche par clic droit. Parfait pour comprendre un historique compliqué.

• Identifiant : mhutchie.git-graph — voir sur le Marketplace

🤝 Live Share

Partage ta session VS Code en temps réel avec un collègue : il voit ton code, le modifie, accède à ton terminal et à ton serveur local. Génial pour le pair programming ou pour aider un débutant à distance.

• Identifiant : MS-vsliveshare.vsliveshare — voir sur le Marketplace

Extensions VS Code pour les API et les bases de données

⚡ REST Client

Teste tes API sans quitter l’éditeur : tu écris tes requêtes dans un simple fichier .http, versionné avec ton projet, et tu cliques sur « Send Request ». Plus léger que Postman, et tes requêtes vivent avec le code.

• Identifiant : humao.rest-client — voir sur le Marketplace

@base = http://localhost/system-dashboard/api

### Session
GET {{base}}/session

### Connexion
POST {{base}}/session/connexion
Content-Type: application/json

{ "identifiant": "demo", "mot_de_passe": "secret123" }

@base = http://localhost/system-dashboard/api

### Session
GET {{base}}/session

### Connexion
POST {{base}}/session/connexion
Content-Type: application/json

{ "identifiant": "demo", "mot_de_passe": "secret123" }

🌩️ Thunder Client

L’alternative graphique à REST Client : une interface façon Postman intégrée à VS Code, avec collections et variables d’environnement. Certaines fonctions avancées sont désormais réservées à la version payante.

• Identifiant : rangav.vscode-thunder-client — voir sur le Marketplace

🗄️ SQLTools

Connecte VS Code à MySQL, MariaDB, PostgreSQL ou SQLite (avec le pilote adapté, par exemple mtxr.sqltools-driver-mysql) : exploration des tables, exécution des requêtes, formatage du SQL. Parfait pour tester une jointure SQL ou un EXPLAIN sans ouvrir phpMyAdmin.

• Identifiant : mtxr.sqltools — voir sur le Marketplace

🔑 DotENV

Coloration syntaxique des fichiers .env. Simple, mais ça évite de rater une variable commentée ou une faute de frappe dans une clé.

• Identifiant : mikestead.dotenv — voir sur le Marketplace

Extensions VS Code pour la productivité

📁 Path Intellisense

Autocomplète les chemins de fichiers dans les import, require, src et href. Fini les ../../../ approximatifs et les images introuvables.

• Identifiant : christian-kohler.path-intellisense — voir sur le Marketplace

🌳 Todo Tree

Rassemble tous les TODO, FIXME et HACK du projet dans une arborescence. Tu ne laisses plus traîner une tâche oubliée avant une mise en production.

• Identifiant : Gruntfuggly.todo-tree — voir sur le Marketplace

💬 Better Comments

Colore tes commentaires selon leur préfixe : // ! alerte en rouge, // ? question en bleu, // TODO en orange. Les commentaires importants sautent aux yeux.

• Identifiant : aaron-bond.better-comments — voir sur le Marketplace

🗂️ Project Manager

Enregistre tes projets favoris et passe de l’un à l’autre en deux touches, sans parcourir l’explorateur de fichiers. Indispensable quand on jongle entre plusieurs sites clients.

• Identifiant : alefragnani.project-manager — voir sur le Marketplace

🎯 Material Icon Theme

Une icône claire pour chaque type de fichier et de dossier. Ça paraît cosmétique, mais on repère un fichier dix fois plus vite dans une grosse arborescence.

• Identifiant : PKief.material-icon-theme — voir sur le Marketplace

🇫🇷 Pack de langue français

Traduit toute l’interface de VS Code en français. Pratique pour les débutants ; les développeurs confirmés préfèrent souvent garder l’anglais pour retrouver plus facilement l’aide en ligne.

• Identifiant : MS-CEINTL.vscode-language-pack-fr — voir sur le Marketplace

Extensions VS Code pour l’IA, Docker et le développement à distance

🤖 GitHub Copilot

L’assistant de code de GitHub : complétion de lignes et de fonctions entières, chat dans l’éditeur, mode agent capable de modifier plusieurs fichiers. Une offre gratuite limitée existe pour tester.

• Identifiant : GitHub.copilot — voir sur le Marketplace
• Astuce : relis toujours le code généré : l’IA accélère, elle ne remplace pas la compréhension. Sur ce sujet, lis notre article Faut-il encore apprendre à coder en 2026 ?.

🧠 Claude Code

L’extension d’Anthropic intègre l’agent Claude Code dans VS Code : il lit ton projet, propose des modifications sous forme de diff à valider, lance des commandes et peut mener des tâches en plusieurs étapes (refactorisation, tests, documentation). Nécessite un compte Claude.

• Identifiant : anthropic.claude-code — voir sur le Marketplace

🐳 Container Tools (Docker)

Gère tes images, conteneurs et fichiers docker-compose.yml depuis VS Code : démarrage, logs, terminal dans un conteneur, autocomplétion des Dockerfile. Idéal avec notre guide Docker pour WordPress en local.

• Identifiant : ms-azuretools.vscode-containers — voir sur le Marketplace

🛰️ WSL et Remote – SSH

Travaille dans un environnement Linux (WSL) ou sur un serveur distant (avec ms-vscode-remote.remote-ssh) comme si les fichiers étaient sur ton PC : terminal, extensions et débogage s’exécutent côté Linux.

• Identifiant : ms-vscode-remote.remote-wsl — voir sur le Marketplace

Mon settings.json pour le développement web

Les extensions ne donnent leur pleine mesure qu’avec quelques réglages. Ouvre la palette (Ctrl + Maj + P) → Preferences: Open User Settings (JSON) et inspire-toi de cette configuration :

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.linkedEditing": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.stickyScroll.enabled": true,
  "editor.minimap.enabled": false,
  "editor.fontFamily": "'JetBrains Mono', Consolas, monospace",
  "editor.fontLigatures": true,
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  },
  "php.validate.enable": false,
  "cSpell.language": "en,fr",
  "workbench.iconTheme": "material-icon-theme",
  "git.autofetch": true
}

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.linkedEditing": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.stickyScroll.enabled": true,
  "editor.minimap.enabled": false,
  "editor.fontFamily": "'JetBrains Mono', Consolas, monospace",
  "editor.fontLigatures": true,
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  },
  "php.validate.enable": false,
  "cSpell.language": "en,fr",
  "workbench.iconTheme": "material-icon-theme",
  "git.autofetch": true
}

Partager les extensions recommandées avec ton équipe

Crée un fichier .vscode/extensions.json à la racine du projet : quand un collègue ouvre le dossier, VS Code lui propose d’installer ces extensions automatiquement.

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "usernamehw.errorlens",
    "bmewburn.vscode-intelephense-client",
    "xdebug.php-debug",
    "EditorConfig.EditorConfig"
  ]
}

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "usernamehw.errorlens",
    "bmewburn.vscode-intelephense-client",
    "xdebug.php-debug",
    "EditorConfig.EditorConfig"
  ]
}

Utiliser les profils VS Code pour ne pas tout mélanger

Depuis quelques versions, VS Code propose des profils : chaque profil a ses propres extensions, réglages et raccourcis. Crée par exemple un profil « Web PHP », un profil « React » et un profil « Rédaction Markdown ». Tu actives seulement les extensions utiles au projet ouvert, et l’éditeur reste rapide. Menu : Fichier → Préférences → Profils. Les profils s’exportent et s’importent, pratique pour équiper un nouveau PC en une minute.

Ton VS Code est lent ? Les bons réflexes

• Lance Developer: Show Running Extensions depuis la palette : VS Code affiche le temps de démarrage de chaque extension.
• Désactive une extension par espace de travail (clic droit → Désactiver (espace de travail)) plutôt que globalement.
• Exclus les gros dossiers de l’indexation : "files.watcherExclude": { "**/node_modules/**": true, "**/vendor/**": true }.
• Utilise Help: Start Extension Bisect : VS Code désactive la moitié des extensions jusqu’à trouver la coupable.

Les extensions VS Code à ne plus installer en 2026

Mon pack de démarrage en une commande

Sur un nouveau PC, colle cette commande dans PowerShell pour installer l’essentiel d’un coup :

@(
  'esbenp.prettier-vscode', 'dbaeumer.vscode-eslint', 'usernamehw.errorlens',
  'EditorConfig.EditorConfig', 'bmewburn.vscode-intelephense-client',
  'xdebug.php-debug', 'eamodio.gitlens', 'humao.rest-client',
  'mtxr.sqltools', 'christian-kohler.path-intellisense', 'PKief.material-icon-theme'
) | ForEach-Object { code --install-extension $_ }

@(
  'esbenp.prettier-vscode', 'dbaeumer.vscode-eslint', 'usernamehw.errorlens',
  'EditorConfig.EditorConfig', 'bmewburn.vscode-intelephense-client',
  'xdebug.php-debug', 'eamodio.gitlens', 'humao.rest-client',
  'mtxr.sqltools', 'christian-kohler.path-intellisense', 'PKief.material-icon-theme'
) | ForEach-Object { code --install-extension $_ }

FAQ : extensions VS Code

Conclusion

Les meilleures extensions VS Code sont celles qu’on oublie parce qu’elles travaillent pour nous : Prettier formate, ESLint et Error Lens signalent, GitLens explique l’historique, Intelephense comprend ton PHP, REST Client teste tes API. Commence par le pack de démarrage, ajoute les extensions de ton langage, et fais le tri une fois par an.

Ton éditeur est prêt ? Passe à la pratique avec un projet complet, comme notre moniteur système Windows en PHP ou MediaCloud, ton Netflix maison. Et pour choisir ta stack, jette un œil à mon top 5 des stacks de développement en 2026. La liste complète des extensions se trouve sur le Visual Studio Marketplace.