Visual Studio Code
Setup Complet

Apprenez à installer, configurer et optimiser VSCode pour le développement web. L'éditeur de code le plus populaire au monde, gratuit et puissant.

70%
Part de marché
Gratuit
Open Source
50k+
Extensions

Pourquoi Utiliser Visual Studio Code ?

VSCode s'est imposé comme l'éditeur de référence pour les développeurs web grâce à ses fonctionnalités avancées et sa simplicité d'utilisation.

Les Avantages de VSCode

Gratuit et Open Source

Développé par Microsoft, entièrement gratuit avec code source ouvert

IntelliSense Intelligent

Autocomplétion, suggestions et détection d'erreurs en temps réel

Extensions Puissantes

Plus de 50 000 extensions pour personnaliser votre environnement

Terminal Intégré

Pas besoin de quitter l'éditeur pour exécuter des commandes

Git Intégré

Gestion de version directement dans l'interface

Dans Quels Buts l'Utiliser ?

Développement Web Frontend

HTML, CSS, JavaScript, React, Vue.js, Angular

Développement Backend

PHP, Node.js, Python, C#, Java

DevOps et Configuration

Docker, YAML, JSON, scripts d'automatisation

Écriture et Documentation

Markdown, LaTeX, documentation technique

Installation Détaillée sur Windows

Suivez ce guide pas à pas pour installer Visual Studio Code sur votre système Windows.

1 Télécharger VSCode

Instructions :

  1. 1. Rendez-vous sur code.visualstudio.com
  2. 2. Cliquez sur "Download for Windows"
  3. 3. Le fichier VSCodeUserSetup-x64-*.exe se télécharge automatiquement
Visual Studio Code
Free. Built on open source. Runs everywhere.
Download for Windows
Stable Build

2 Lancer l'Installation

Processus d'installation :

  1. 1. Double-cliquez sur le fichier téléchargé
  2. 2. Acceptez les termes de la licence
  3. 3. Choisissez le dossier d'installation (par défaut recommandé)
  4. 4. Important : Cochez ces options :
    • ☑️ Ajouter à PATH
    • ☑️ Créer une icône sur le bureau
    • ☑️ Ajouter au menu contextuel
Options d'installation importantes :

3 Premier Lancement

Configuration initiale :

  1. 1. VSCode s'ouvre automatiquement après l'installation
  2. 2. Page de bienvenue avec raccourcis utiles
  3. 3. Choisissez votre thème (Dark+ recommandé)
  4. 4. Connectez votre compte GitHub (optionnel)
Interface VSCode
👋
Welcome to VSCode
Start coding...

Extensions Essentielles pour HTML/CSS

Installez ces extensions incontournables pour optimiser votre apprentissage et votre productivité en développement web.

Live Server

Ritwick Dey

Serveur local avec rechargement automatique. Indispensable pour voir vos modifications en temps réel.

ID: ritwickdey.liveserver
⭐ 25M+ téléchargements

Auto Rename Tag

Jun Han

Renomme automatiquement les balises HTML jumelées. Modifiez une balise ouvrante, la fermante suit !

ID: formulahendry.auto-rename-tag
⭐ 10M+ téléchargements

HTML CSS Support

ecmel

Autocomplétion CSS dans les fichiers HTML. Suggestions intelligentes pour classes et IDs.

ID: ecmel.vscode-html-css
⭐ 8M+ téléchargements

Prettier

Prettier

Formate automatiquement votre code. HTML, CSS, JS impeccables à chaque sauvegarde.

ID: esbenp.prettier-vscode
⭐ 30M+ téléchargements

CSS Peek

Pranay Prakash

Naviguez vers les définitions CSS directement depuis le HTML. Ctrl+Click sur une classe !

ID: pranaygp.vscode-css-peek
⭐ 3M+ téléchargements

Material Icon Theme

Philipp Kief

Icônes Material Design pour vos fichiers. Interface plus belle et navigation facilitée.

ID: pkief.material-icon-theme
⭐ 15M+ téléchargements

Comment Installer ces Extensions ?

Méthode 1 : Interface graphique

  1. 1. Cliquez sur l'icône Extensions dans la barre latérale gauche
  2. 2. Recherchez le nom de l'extension
  3. 3. Cliquez sur "Install"
  4. 4. Rechargez VSCode si nécessaire

Méthode 2 : Ligne de commande

code --install-extension ritwickdey.liveserver code --install-extension formulahendry.auto-rename-tag code --install-extension ecmel.vscode-html-css code --install-extension esbenp.prettier-vscode

Créer Votre Premier Projet

Apprenons à structurer un projet web professionnel avec une organisation claire des fichiers.

Structure de Projet Recommandée

Arborescence des fichiers :

📁 mon-premier-site/
📁 css/
└── style.css
📁 js/
└── script.js
📁 img/
└── (vos images)
📄 index.html

Étapes de création :

  1. 1. Créez un dossier dans votre One drive : web
  2. 1. Créez un dossier dans web : mon-premier-site
  3. 2. Ouvrez ce dossier avec VSCode :
    Fichier → Ouvrir le dossier
  4. 3. Créez les sous-dossiers : css, js, img
  5. 4. Créez le fichier index.html à la racine et copier le code ci-dessous

index.html - Code de base

<!-- Structure HTML5 minimaliste -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <!-- Métadonnées essentielles -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon site minimaliste</title>
</head>

<body>
    <h1>Bonjour c'est tot</h1>
</body>
</html>

Tester Votre Site avec Live Server

Étapes pour voir votre site :

  1. 1. Ouvrez le fichier index.html dans VSCode
  2. 2. Clic droit sur le fichier → "Open with Live Server"
  3. 3. Votre navigateur s'ouvre automatiquement
  4. 4. Modifiez votre code et voyez les changements en temps réel !
Live Server
🔴 Server started at http://127.0.0.1:5500
📁 Serving: /mon-premier-site
🔄 Auto-reload enabled

VSCode dans le Développement Moderne

Visual Studio Code s'est imposé comme l'éditeur de référence, utilisé par plus de 70% des développeurs dans le monde.

Communauté Active

Plus de 40 millions d'utilisateurs actifs et une communauté qui contribue constamment à son amélioration.

Performance

Léger, rapide et stable. Capable de gérer de gros projets sans ralentir votre workflow de développement.

Écosystème Riche

Intégration parfaite avec Git, Docker, frameworks modernes et services cloud comme Azure et AWS.

Votre Environnement est Prêt !

Félicitations ! Vous avez maintenant un environnement de développement professionnel configuré. Il est temps de commencer à coder !

Commencer HTML Styliser avec CSS