VS Code – Configuration et extensions essentielles pour développeurs

Pourquoi VS Code domine le développement web en 2025 ?

Visual Studio Code (VS Code) a révolutionné le monde du développement depuis sa sortie en 2015. Gratuit, open-source, et développé par Microsoft, il est devenu l’éditeur de code préféré de plus de 70% des développeurs web en 2025.

Les avantages de VS Code

Gratuit et open-source : Aucun coût, code source disponible sur GitHub
Léger et rapide : Démarre en quelques secondes, même sur des machines modestes
Multi-plateforme : Fonctionne sur Windows, macOS et Linux
Extensible : Plus de 50 000 extensions disponibles pour tous les langages et frameworks
IntelliSense puissant : Autocomplétion intelligente du code
Git intégré : Gestion de version directement dans l’éditeur
Terminal intégré : Plus besoin de changer de fenêtre
Debugging avancé : Débogueur intégré pour JavaScript, Python, etc.
Remote Development : Développez sur des serveurs distants ou dans des conteneurs

VS Code vs autres éditeurs

Éditeur	Avantages	Inconvénients
VS Code	Équilibre parfait, extensible, communauté massive	Consommation RAM avec beaucoup d’extensions
WebStorm	Très puissant, toutes les fonctionnalités intégrées	Payant (149$/an), plus lourd
Sublime Text	Très rapide, léger	Moins de fonctionnalités modernes
Vim/Neovim	Ultra rapide, ultra personnalisable	Courbe d’apprentissage très raide
Atom	Open-source, personnalisable	Projet arrêté en 2022

Installation de VS Code

Windows

Téléchargez l’installateur depuis https://code.visualstudio.com/
Exécutez le fichier VSCodeUserSetup-x64.exe
Suivez l’assistant d’installation
Cochez les options recommandées :

– « Ajouter au PATH » (important pour utiliser code depuis le terminal)
– « Créer une icône sur le bureau »
– « Ajouter l’action ‘Ouvrir avec Code’ au menu contextuel »

Cliquez sur « Installer »

macOS

Téléchargez VS Code depuis le site officiel
Ouvrez le fichier .dmg téléchargé
Glissez l’icône VS Code dans le dossier Applications
Lancez VS Code depuis Applications
Pour utiliser code dans le terminal :

– Ouvrez VS Code
– Appuyez sur Cmd+Shift+P
– Tapez « shell command » et sélectionnez « Install ‘code’ command in PATH »

Linux (Ubuntu/Debian)

# Méthode 1 : Via snap (plus simple)
sudo snap install --classic code

# Méthode 2 : Via le dépôt Microsoft
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt update
sudo apt install code

Vérifier l’installation

Ouvrez un terminal et tapez :

code --version

Pour ouvrir VS Code dans le dossier courant :

code .

Découverte de l’interface

Les zones principales

L’interface de VS Code se divise en plusieurs zones :

Barre d’activité (gauche) : Accès rapide aux vues principales

– Explorateur de fichiers
– Recherche globale
– Gestion Git
– Débogueur
– Extensions

Barre latérale : Contenu de la vue sélectionnée

Éditeur : Zone centrale où vous écrivez votre code

Panneau inférieur : Terminal, problèmes, sortie, console de débogage

Barre d’état : Informations sur le fichier actuel (langage, encodage, ligne/colonne)

Palette de commandes : votre meilleur ami

La palette de commandes donne accès à toutes les fonctionnalités de VS Code :

Windows/Linux : Ctrl+Shift+P

macOS : Cmd+Shift+P

Exemples d’utilisation :

> Format Document
> Change Language Mode
> Git: Clone
> Preferences: Color Theme
> Developer: Reload Window

Configuration de base

Accéder aux paramètres

Deux façons d’accéder aux paramètres :

Interface graphique : Fichier > Préférences > Paramètres (ou Ctrl+,)

Fichier JSON : Ctrl+Shift+P puis « Preferences: Open Settings (JSON) »

Configuration recommandée pour débutants

Ouvrez settings.json et ajoutez ces paramètres :

{
    // Apparence
    "workbench.colorTheme": "One Dark Pro",
    "workbench.iconTheme": "material-icon-theme",
    "editor.fontSize": 14,
    "editor.fontFamily": "'Fira Code', 'Cascadia Code', Consolas, monospace",
    "editor.fontLigatures": true,

    // Éditeur
    "editor.wordWrap": "on",
    "editor.lineNumbers": "on",
    "editor.minimap.enabled": true,
    "editor.cursorBlinking": "smooth",
    "editor.cursorSmoothCaretAnimation": "on",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,

    // Autocomplétion
    "editor.suggestSelection": "first",
    "editor.tabSize": 2,
    "editor.detectIndentation": true,

    // Fichiers
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,

    // Terminal
    "terminal.integrated.fontSize": 13,
    "terminal.integrated.fontFamily": "MesloLGS NF",

    // Explorer
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,

    // Breadcrumbs (fil d'ariane)
    "breadcrumbs.enabled": true,

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

    // IntelliSense
    "javascript.updateImportsOnFileMove.enabled": "always",
    "typescript.updateImportsOnFileMove.enabled": "always",

    // Prettier (si installé)
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

Polices avec ligatures (optionnel mais recommandé)

Les polices avec ligatures rendent le code plus lisible en combinant certains caractères :

Fira Code : Très populaire, gratuite

Cascadia Code : De Microsoft, excellente

JetBrains Mono : Moderne et élégante

Téléchargez Fira Code depuis https://github.com/tonsky/FiraCode

Les extensions essentielles pour 2025

Comment installer une extension ?

Cliquez sur l’icône Extensions dans la barre d’activité (ou Ctrl+Shift+X)

Recherchez l’extension par nom

Cliquez sur « Install »

Redémarrez VS Code si demandé

Extensions indispensables pour tous

1. Prettier – Code formatter

ID : esbenp.prettier-vscode

Formate automatiquement votre code pour une mise en forme cohérente. Supporte JavaScript, TypeScript, HTML, CSS, JSON, Markdown, et bien plus.

// Avant Prettier
const user={name:"Alice",age:25,city:"Paris"}

// Après Prettier
const user = {
  name: "Alice",
  age: 25,
  city: "Paris"
};

Configuration : Créez un fichier .prettierrc à la racine de votre projet :

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

2. ESLint

ID : dbaeumer.vscode-eslint

Analyse votre code JavaScript/TypeScript en temps réel pour détecter les erreurs et appliquer les bonnes pratiques.

Avantages :

Détecte les bugs potentiels avant l’exécution

Force la cohérence du style de code

Souligne les problèmes directement dans l’éditeur

3. Live Server

ID : ritwickdey.LiveServer

Lance un serveur de développement local avec rechargement automatique. Parfait pour le HTML/CSS/JavaScript pur.

Utilisation :

Ouvrez votre fichier index.html

Clic droit > « Open with Live Server »

Votre navigateur s’ouvre automatiquement

Toute modification est instantanément visible

4. GitLens

ID : eamodio.gitlens

Suralimente les capacités Git de VS Code. Vous voyez qui a modifié chaque ligne de code, quand, et pourquoi.

Fonctionnalités :

Annotations de ligne : auteur et date de la dernière modification

Historique des fichiers

Comparaison de branches

Visualisation graphique de l’historique Git

5. Auto Rename Tag

ID : formulahendry.auto-rename-tag

Renomme automatiquement la balise fermante quand vous modifiez la balise ouvrante (et vice-versa).

Contenu


Contenu

6. Path Intellisense

ID : christian-kohler.path-intellisense

Autocomplétion des chemins de fichiers lorsque vous importez des modules ou des ressources.

7. Better Comments

ID : aaron-bond.better-comments

Colore vos commentaires selon leur type pour une meilleure lisibilité.

// TODO: Ajouter la validation du formulaire
// ! ATTENTION: Ne pas supprimer cette fonction
// ? Est-ce que cette logique est optimale ?
//  Point important à retenir

Extensions pour le développement frontend

8. ES7+ React/Redux/React-Native snippets

ID : dsznajder.es7-react-js-snippets

Snippets pour React ultra-productifs.

Exemples :

rafce : Crée un composant React fonctionnel avec export

useState : Génère un hook useState

useEffect : Génère un hook useEffect

9. Tailwind CSS IntelliSense

ID : bradlc.vscode-tailwindcss

Indispensable si vous utilisez Tailwind CSS :

Autocomplétion des classes Tailwind

Aperçu des couleurs et espacements au survol

Validation des noms de classe

10. CSS Peek

ID : pranaygp.vscode-css-peek

Naviguez directement vers la définition CSS d’une classe depuis votre HTML.

Extensions pour le développement backend

11. Thunder Client

ID : rangav.vscode-thunder-client

Alternative légère à Postman, directement dans VS Code. Testez vos APIs REST sans quitter l’éditeur.

12. MongoDB for VS Code

ID : mongodb.mongodb-vscode

Connectez-vous à vos bases MongoDB, exécutez des requêtes, et explorez vos données.

13. Docker

ID : ms-azuretools.vscode-docker

Gérez vos conteneurs Docker directement depuis VS Code.

Extensions pour améliorer la productivité

14. GitHub Copilot

ID : GitHub.copilot

Assistant IA qui suggère du code en temps réel. Payant (10$/mois) mais gratuit pour les étudiants.

Exemple d’utilisation :

// Écrivez un commentaire décrivant ce que vous voulez
// Fonction pour valider un email

// Copilot suggère automatiquement :
function validerEmail(email) {
  const regex = /^[^s@]+@[^s@]+.[^s@]+$/;
  return regex.test(email);
}

15. Error Lens

ID : usernamehw.errorlens

Affiche les erreurs et warnings directement en ligne, au lieu de seulement les souligner.

16. Import Cost

ID : wix.vscode-import-cost

Affiche la taille des packages importés pour optimiser les performances.

import React from 'react'; // 2.5 KB
import lodash from 'lodash'; // 72.4 KB (⚠️ lourd !)

17. Code Spell Checker

ID : streetsidesoftware.code-spell-checker

Correcteur orthographique pour éviter les fautes dans les commentaires et les noms de variables.

Extensions pour les thèmes et icônes

18. One Dark Pro

ID : zhuangtongfa.Material-theme

Thème sombre élégant, très populaire.

19. Material Icon Theme

ID : PKief.material-icon-theme

Icônes colorées pour les fichiers et dossiers, facilitant la navigation.

Raccourcis clavier essentiels

Action	Windows/Linux	macOS
Palette de commandes	`Ctrl+Shift+P`	`Cmd+Shift+P`
Recherche de fichier	`Ctrl+P`	`Cmd+P`
Paramètres	`Ctrl+,`	`Cmd+,`
Terminal intégré	`Ctrl+`	Cmd+«
Sauvegarder tout	`Ctrl+K S`	`Cmd+K S`
Fermer l’onglet actuel	`Ctrl+W`	`Cmd+W`
Rouvrir l’onglet fermé	`Ctrl+Shift+T`	`Cmd+Shift+T`
Aller à la ligne	`Ctrl+G`	`Cmd+G`

Édition multi-curseurs

Action	Windows/Linux	macOS
Ajouter curseur en dessous	`Ctrl+Alt+Down`	`Cmd+Option+Down`
Sélectionner toutes les occurrences	`Ctrl+Shift+L`	`Cmd+Shift+L`
Sélectionner l’occurrence suivante	`Ctrl+D`	`Cmd+D`
Déplacer la ligne vers le haut	`Alt+Up`	`Option+Up`
Dupliquer la ligne	`Shift+Alt+Down`	`Shift+Option+Down`
Supprimer la ligne	`Ctrl+Shift+K`	`Cmd+Shift+K`

Recherche et remplacement

Action	Windows/Linux	macOS
Rechercher	`Ctrl+F`	`Cmd+F`
Remplacer	`Ctrl+H`	`Cmd+H`
Rechercher dans tous les fichiers	`Ctrl+Shift+F`	`Cmd+Shift+F`
Remplacer dans tous les fichiers	`Ctrl+Shift+H`	`Cmd+Shift+H`

Astuces de productivité avancées

1. Emmet : HTML et CSS ultra-rapide

Emmet est intégré à VS Code. Il transforme des abréviations en code complet :


ul>li5



  
  

  

  

  




div.container>header+main+footer

2. Snippets personnalisés

Créez vos propres snippets pour le code que vous tapez souvent :

Ctrl+Shift+P > « Preferences: Configure User Snippets »

Choisissez le langage (ex: JavaScript)

Ajoutez votre snippet :

{
  "Console log": {
    "prefix": "clg",
    "body": [
      "console.log('$1', $1);"
    ],
    "description": "Console log rapide"
  }
}

Maintenant, tapez clg puis Tab pour obtenir console.log();

3. Multi-root workspaces

Ouvrez plusieurs dossiers de projets dans le même espace de travail :

Fichier > Ajouter un dossier à l'espace de travail

Idéal pour travailler sur frontend et backend simultanément

4. Zen Mode

Mode de concentration sans distraction :

Raccourci : Ctrl+K Z (ou Cmd+K Z)

Cache tout sauf l’éditeur

Appuyez sur Esc deux fois pour sortir

Debugging avec VS Code

Configurer le débogueur pour Node.js

Créez un fichier .vscode/launch.json :

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Lancer le programme",
      "skipFiles": ["internals>/"],
      "program": "${workspaceFolder}/index.js"
    }
  ]
}

Ajoutez des points d’arrêt (breakpoints) en cliquant à gauche du numéro de ligne

Appuyez sur F5 pour lancer le débogage

Utilisez les contrôles pour avancer pas à pas

Synchronisation des paramètres

VS Code peut synchroniser vos paramètres, extensions et raccourcis entre plusieurs machines via votre compte GitHub ou Microsoft.

Cliquez sur l’icône de compte en bas à gauche

Sélectionnez « Activer la synchronisation des paramètres »

Connectez-vous avec GitHub ou Microsoft

Choisissez ce que vous voulez synchroniser

Sur un autre ordinateur, connectez-vous avec le même compte, et tous vos paramètres seront restaurés automatiquement.

Résolution de problèmes courants

VS Code est lent

Désactivez les extensions inutilisées

Désactivez la minimap : "editor.minimap.enabled": false

Excluez les gros dossiers de la recherche (ex: nodemodules) :

{
  "files.exclude": {
    "/node_modules": true,
    "/.git": true
  }
}

L’autocomplétion ne fonctionne pas

Vérifiez que le bon langage est sélectionné (en bas à droite)

Installez les extensions appropriées (ESLint pour JS, Pylance pour Python, etc.)

Redémarrez VS Code : Ctrl+Shift+P > « Developer: Reload Window »

Git ne fonctionne pas

Vérifiez que Git est installé : git --version dans le terminal

Redémarrez VS Code

Vérifiez le chemin Git dans les paramètres : "git.path": "/usr/bin/git"

Conclusion : Votre environnement de développement optimal

VS Code est bien plus qu’un simple éditeur de texte. C’est un environnement de développement complet, personnalisable à l’infini, et qui s’adapte à votre workflow.

Résumé des étapes pour un setup optimal :

Installez VS Code

Configurez les paramètres de base (format on save, auto save, etc.)

Installez les extensions essentielles : Prettier, ESLint, GitLens, Live Server

Ajoutez les extensions spécifiques à votre stack (React, Vue, Tailwind, etc.)

Apprenez les raccourcis clavier les plus utilisés

Créez vos propres snippets pour les tâches répétitives

Activez la synchronisation des paramètres

Exercice pratique :** Créez un nouveau projet, installez les extensions recommandées dans cet article, et créez une page HTML avec CSS en utilisant Emmet et Live Server. Vous verrez immédiatement la différence de productivité.

Bienvenue dans votre nouvel environnement de développement professionnel !