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 :

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

Palette de commandes : votre meilleur ami

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

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 :

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 :

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

Les extensions essentielles pour 2025

Comment installer une extension ?

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 :

3. Live Server

ID : ritwickdey.LiveServer

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

Utilisation :

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 :

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 :

9. Tailwind CSS IntelliSense

ID : bradlc.vscode-tailwindcss

Indispensable si vous utilisez Tailwind CSS :

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

Navigation et édition

Édition multi-curseurs

Recherche et remplacement

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 :

{
  "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 :

4. Zen Mode

Mode de concentration sans distraction :

Debugging avec VS Code

Configurer le débogueur pour Node.js

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

Synchronisation des paramètres

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

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

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

L’autocomplétion ne fonctionne pas

Git ne fonctionne pas

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 :

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 !