VS Code : 15 extensions indispensables pour développeurs web en 2025

Visual Studio Code est l'éditeur de code le plus populaire au monde. Mais sa vraie puissance vient de son écosystème d'extensions. Voici les 15 extensions indispensables que tout développeur web devrait installer en 2025.

Comment installer une extension dans VS Code ?

1. Ouvrez VS Code
2. Cliquez sur l'icône Extensions (carré avec 4 blocs) dans la barre latérale gauche, ou appuyez sur Ctrl+Shift+X (Windows/Linux) ou Cmd+Shift+X (Mac)
3. Recherchez le nom de l'extension
4. Cliquez sur Install

1. Prettier - Code formatter 🎨

Auteur : Prettier

Installations : 35M+

À quoi ça sert ?

Prettier formate automatiquement votre code (JavaScript, TypeScript, HTML, CSS, JSON, Markdown...) selon des règles strictes. Fini les débats d'équipe sur les espaces vs tabs !

Configuration recommandée

Dans settings.json :

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "prettier.semi": true,
  "prettier.printWidth": 100
}

Pourquoi c'est indispensable ?

• Formatage automatique au save (Ctrl+S)
• Code propre et cohérent dans toute l'équipe
• Supporte tous les langages web

2. ESLint ⚠️

Auteur : Microsoft

Installations : 28M+

À quoi ça sert ?

ESLint détecte les erreurs de code JavaScript/TypeScript en temps réel. Il souligne les bugs potentiels avant même que vous exécutiez votre code.

Configuration de base

Installez ESLint dans votre projet :

npm init @eslint/config

Pourquoi c'est indispensable ?

• Détecte les erreurs avant l'exécution
• Impose les bonnes pratiques de code
• Intégré dans la plupart des projets pro

3. Live Server 🌐

Auteur : Ritwick Dey

Installations : 30M+

À quoi ça sert ?

Lance un serveur local avec rechargement automatique (live reload). Chaque modification de votre HTML/CSS/JS est instantanément visible dans le navigateur.

Comment l'utiliser ?

1. Clic droit sur votre fichier index.html
2. Sélectionnez "Open with Live Server"
3. Votre navigateur s'ouvre automatiquement sur http://localhost:5500

Pourquoi c'est indispensable ?

• Gain de temps énorme (plus besoin de rafraîchir manuellement)
• Fonctionne sur mobile via l'IP locale
• Parfait pour du HTML/CSS/JS vanilla

4. GitLens 🔍

Auteur : GitKraken

Installations : 25M+

À quoi ça sert ?

Suralimente Git dans VS Code. Vous voyez qui a écrit chaque ligne de code, quand, et pourquoi (blame). Historique de fichier, comparaison de commits, graphe de branches...

Fonctionnalités clés

• Inline blame : voir l'auteur de chaque ligne
• File history : historique complet d'un fichier
• Repository view : vue graphique de toutes les branches
• Compare commits : différences entre deux commits

Pourquoi c'est indispensable ?

• Comprendre qui a modifié quoi et pourquoi
• Debugger en remontant l'historique
• Essentiel en équipe

5. Auto Rename Tag ✏️

Auteur : Jun Han

Installations : 15M+

À quoi ça sert ?

Quand vous renommez une balise HTML ouvrante, la balise fermante se renomme automatiquement (et vice-versa).

Exemple

<div>Hello</div>

Si vous changez <div> en <section>, la balise fermante devient automatiquement </section>.

Pourquoi c'est indispensable ?

• Évite les erreurs de balises non fermées
• Gain de temps énorme en HTML/JSX
• Fonctionne avec React, Vue, Angular

6. Path Intellisense 📁

Auteur : Christian Kohler

Installations : 12M+

À quoi ça sert ?

Autocomplétion intelligente des chemins de fichiers quand vous tapez des imports ou des URLs.

Exemple

import { Header } from './comp... // VS Code suggère ./components/Header.tsx

Pourquoi c'est indispensable ?

• Plus d'erreurs de chemins relatifs
• Autocomplétion pour CSS, images, imports JS
• Fonctionne dans tous les langages

7. Bracket Pair Colorizer 2 (intégré nativement depuis VS Code 1.67) 🌈

Auteur : CoenraadS (maintenant natif)

À quoi ça sert ?

Colorie les paires de parenthèses/crochets/accolades avec des couleurs différentes pour mieux s'y retrouver dans le code imbriqué.

Configuration native (plus besoin de l'extension)

{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active"
}

Pourquoi c'est indispensable ?

• Repérage visuel rapide des blocs de code
• Évite les erreurs de parenthèses mal fermées
• Maintenant intégré nativement = plus rapide

8. JavaScript (ES6) code snippets 🚀

Auteur : charalampos karypidis

Installations : 10M+

À quoi ça sert ?

Raccourcis pour générer du code JavaScript/TypeScript rapidement.

Exemples de snippets

• imp → import moduleName from 'module'
• anfn → const functionName = () => {}
• clg → console.log()
• foreach → array.forEach(item => {})
• prom → new Promise((resolve, reject) => {})

Pourquoi c'est indispensable ?

• Gain de temps massif sur le code répétitif
• Réduit les erreurs de syntaxe
• Boilerplate instantané

9. Thunder Client ⚡

Auteur : Ranga Vadhineni

Installations : 8M+

À quoi ça sert ?

Client REST API intégré à VS Code. Alternative à Postman, mais directement dans votre éditeur.

Fonctionnalités

• Tester vos APIs GET, POST, PUT, DELETE
• Enregistrer des collections de requêtes
• Variables d'environnement
• Export/import de collections
• GraphQL support

Pourquoi c'est indispensable ?

• Plus besoin de quitter VS Code pour tester vos APIs
• Plus léger et rapide que Postman
• Gratuit et open-source

10. Error Lens 🔴

Auteur : Alexander

Installations : 5M+

À quoi ça sert ?

Affiche les erreurs et warnings directement dans votre code (inline), pas seulement dans la console. L'erreur apparaît en rouge à la fin de la ligne concernée.

Exemple visuel

const x = 10; // Variable 'x' is never used ⚠️

Pourquoi c'est indispensable ?

• Détection instantanée des problèmes
• Plus besoin de survoler le code pour voir l'erreur
• Feedback visuel immédiat

11. Tailwind CSS IntelliSense 🎨

Auteur : Tailwind Labs

Installations : 7M+

À quoi ça sert ?

Si vous utilisez Tailwind CSS, cette extension est OBLIGATOIRE. Autocomplétion des classes Tailwind, preview des couleurs, linting...

Fonctionnalités

• Autocomplétion intelligente des classes
• Preview des couleurs au survol
• Suggestions contextuelles
• Détection des classes invalides

Pourquoi c'est indispensable (si Tailwind) ?

• Impossible de se souvenir de toutes les classes Tailwind
• Gain de temps de 10x sur le styling
• Prévient les typos

12. GitHub Copilot 🤖

Auteur : GitHub

Payant : 10$/mois (gratuit pour étudiants et open-source)

À quoi ça sert ?

IA d'assistance au code qui suggère des lignes entières ou des fonctions complètes pendant que vous tapez. Basé sur GPT-4.

Ce qu'il peut faire

• Compléter automatiquement vos fonctions
• Générer du code à partir de commentaires
• Suggérer des tests unitaires
• Traduire du code d'un langage à un autre

Exemple

// Fonction qui calcule la moyenne d'un tableau
function calculateAverage(numbers) {
  // Copilot suggère automatiquement :
  return numbers.reduce((a, b) => a + b, 0) / numbers.length;
}

Pourquoi c'est (presque) indispensable ?

• Gain de productivité de 30-50%
• Réduit le code boilerplate
• Apprendre de nouvelles syntaxes en voyant les suggestions

13. Todo Tree 📝

Auteur : Gruntfuggly

Installations : 4M+

À quoi ça sert ?

Affiche tous vos commentaires TODO, FIXME, HACK dans une arborescence dédiée. Vous voyez instantanément ce qu'il reste à faire dans votre projet.

Exemple

// TODO: Ajouter la validation du formulaire
// FIXME: Bug sur le bouton submit
// HACK: Solution temporaire, à refactoriser

Tous ces commentaires apparaissent dans la sidebar Todo Tree.

Pourquoi c'est indispensable ?

• Ne jamais oublier un TODO
• Vue d'ensemble des tâches restantes
• Surlignage coloré des tags

14. Debugger for Chrome (remplacé par le debugger intégré) 🐛

Note : Depuis VS Code 1.60, le debugger JavaScript est intégré nativement. Plus besoin d'extension !

À quoi ça sert ?

Debugger votre code JavaScript/TypeScript directement depuis VS Code, avec breakpoints, watch variables, call stack...

Comment l'utiliser ?

1. Créez un fichier .vscode/launch.json
2. Configurez le debugger :

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "chrome",
         "request": "launch",
         "name": "Launch Chrome",
         "url": "http://localhost:3000",
         "webRoot": "${workspaceFolder}"
       }
     ]
   }

3. Placez des breakpoints (clic sur la marge gauche)
4. Lancez le debug (F5)

Pourquoi c'est indispensable ?

• Debugger sans console.log partout
• Inspecter les variables en temps réel
• Navigation dans la call stack

15. Material Icon Theme 🎨

Auteur : Philipp Kief

Installations : 15M+

À quoi ça sert ?

Remplace les icônes des fichiers dans l'explorateur par des icônes colorées et reconnaissables. Repérez instantanément un fichier .tsx, .css, .json...

Pourquoi c'est indispensable ?

• Navigation visuelle plus rapide
• Reconnaissance instantanée du type de fichier
• VS Code devient plus agréable à utiliser

Mentions honorables

D'autres extensions utiles selon votre stack :

Pour React

• ES7+ React/Redux/React-Native snippets : snippets React
• React Developer Tools : intégration des DevTools React

Pour Vue.js

• Volar : support Vue 3 (remplace Vetur)

Pour Angular

• Angular Language Service : autocomplétion et navigation
• Angular Snippets : snippets Angular

Pour Docker

• Docker : gestion des conteneurs depuis VS Code

Pour Markdown

• Markdown All in One : preview, shortcuts, TOC auto

Configuration finale optimale

Voici mon settings.json recommandé :

{
  // Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "prettier.semi": true,

  // Général
  "editor.tabSize": 2,
  "editor.fontSize": 14,
  "editor.lineHeight": 22,
  "editor.fontFamily": "Fira Code, Consolas, monospace",
  "editor.fontLigatures": true,

  // Bracket colorization (natif)
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",

  // Minimap
  "editor.minimap.enabled": true,

  // Auto save
  "files.autoSave": "onFocusChange",

  // Terminal
  "terminal.integrated.fontSize": 13,

  // Git
  "git.autofetch": true,
  "git.confirmSync": false,

  // ESLint
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}

Conclusion

Ces 15 extensions transforment VS Code en IDE ultra-puissant pour le développement web. Vous gagnerez des heures chaque semaine grâce à l'autocomplétion, au formatage automatique, au linting et au debugging avancé.

Mon top 3 absolu :

1. Prettier - formatage automatique (obligatoire)
2. ESLint - détection d'erreurs (obligatoire)
3. GitLens - maîtrise de Git (game changer)

Commencez par installer ces 3-là, puis ajoutez progressivement les autres selon vos besoins. Bon code ! 🚀