Guide VSCode pour Débutants

🎯 Qu'est-ce que VSCode ?

Visual Studio Code (VSCode) est un éditeur de code gratuit et puissant créé par Microsoft. C'est l'outil que vous utiliserez pour créer vos sites web et applications.

Pourquoi VSCode ? Il est léger, rapide, personnalisable et dispose de milliers d'extensions pour faciliter votre travail de développeur.

⬇️ Installation

1 Télécharger VSCode

Rendez-vous sur https://code.visualstudio.com

Cliquez sur le gros bouton "Download" (il détecte automatiquement votre système : Windows, Mac ou Linux)

2 Installer le logiciel

Double-cliquez sur le fichier téléchargé et suivez l'installation

Sur Windows, cochez bien l'option "Ajouter au PATH" pendant l'installation !

3 Premier lancement

Une fois installé, lancez VSCode. Vous pouvez choisir le thème (clair ou sombre) selon votre préférence.

📂 Ouvrir un Dossier (Projet)

IMPORTANT : En développement web, on travaille TOUJOURS dans un dossier (= un projet). Ne jamais ouvrir juste un fichier isolé !

Méthode 1 : Via le menu

1 Cliquez sur File (Fichier) dans le menu du haut

2 Sélectionnez Open Folder (Ouvrir le dossier)

3 Naviguez jusqu'au dossier de votre projet et cliquez sur Sélectionner le dossier

Méthode 2 : Par glisser-déposer

1 Ouvrez votre explorateur de fichiers (Windows ou Mac)

2 Faites glisser le dossier de votre projet directement sur la fenêtre VSCode

Méthode 3 : Raccourci clavier

Utilisez le raccourci Ctrl + K puis Ctrl + O
(Sur Mac : Cmd + K puis Cmd + O)

Une fois le dossier ouvert, vous verrez tous vos fichiers dans la barre latérale de gauche (l'Explorateur).

📄 Ouvrir et Créer des Fichiers

Ouvrir un fichier existant

1 Dans la barre latérale de gauche (Explorateur), cliquez sur le nom du fichier

2 Le fichier s'ouvre dans l'éditeur central

Double-cliquez sur un fichier pour l'ouvrir de façon permanente. Un simple clic l'ouvre en mode "aperçu" (nom en italique).

Créer un nouveau fichier

1 Dans l'explorateur : Survolez le nom de votre dossier, des icônes apparaissent

2 Cliquez sur l'icône 📄 Nouveau fichier

3 Tapez le nom de votre fichier avec son extension (exemple : index.html, style.css)

4 Appuyez sur Entrée

Créer un nouveau dossier

1 Dans l'explorateur, cliquez sur l'icône 📁 Nouveau dossier

2 Tapez le nom du dossier (exemple : css, images, js)

3 Appuyez sur Entrée

Attention aux noms ! Évitez les espaces, accents et caractères spéciaux dans les noms de fichiers et dossiers. Préférez : mon-fichier.html plutôt que mon fichier.html

🖥️ Comprendre l'Interface

1️⃣ Barre d'activité

À l'extrême gauche, permet d'accéder aux différentes vues :

📁 Explorateur de fichiers
🔍 Recherche
🌿 Git (contrôle de version)
🐛 Débogueur
🧩 Extensions

2️⃣ Barre latérale

Affiche le contenu selon ce qui est sélectionné dans la barre d'activité (fichiers, recherche, etc.)

3️⃣ Éditeur

La zone centrale où vous écrivez votre code. Vous pouvez ouvrir plusieurs fichiers en onglets.

4️⃣ Terminal

En bas, permet d'exécuter des commandes sans quitter VSCode.

Ouvrir avec : Ctrl + `

⌨️ Raccourcis Clavier Essentiels

Gestion des fichiers

Ctrl + N : Nouveau fichier
Ctrl + S : Enregistrer
Ctrl + Shift + S : Enregistrer sous...
Ctrl + W : Fermer le fichier actuel
Ctrl + P : Recherche rapide de fichier

Édition de code

Ctrl + Z : Annuler
Ctrl + Y : Rétablir
Ctrl + C : Copier
Ctrl + V : Coller
Ctrl + X : Couper
Ctrl + / : Commenter/décommenter
Alt + ↑/↓ : Déplacer une ligne
Shift + Alt + ↑/↓ : Dupliquer une ligne

Navigation

Ctrl + B : Afficher/Masquer la barre latérale
Ctrl + ` : Afficher/Masquer le terminal
Ctrl + Tab : Naviguer entre les fichiers ouverts

Sur Mac, remplacez Ctrl par Cmd

🧩 Extensions Recommandées

Les extensions ajoutent des fonctionnalités à VSCode. Pour les installer :

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

2 Recherchez le nom de l'extension

3 Cliquez sur Install

Live Server

Lance un serveur local pour visualiser votre site web en direct avec rechargement automatique.

Clic droit sur un fichier HTML → "Open with Live Server"

Auto Rename Tag

Renomme automatiquement les balises HTML fermantes quand vous modifiez l'ouvrante.

Prettier

Formate automatiquement votre code pour qu'il soit propre et lisible.

French Language Pack

Met VSCode en français (si vous préférez).

HTML CSS Support

Améliore l'autocomplétion pour HTML et CSS.

Path Intellisense

Autocomplétion des chemins de fichiers.

🔧 Problèmes Courants et Solutions

❌ "Je ne vois pas mes fichiers dans VSCode"

Solution : Vous n'avez probablement pas ouvert le bon dossier. Allez dans File → Open Folder et sélectionnez le dossier racine de votre projet.

❌ "Mon fichier HTML ne s'affiche pas dans le navigateur"

Solution :

Installez l'extension "Live Server"
Faites clic droit sur votre fichier HTML → "Open with Live Server"
Ou ouvrez directement le fichier depuis l'explorateur de fichiers

❌ "VSCode est en anglais, je voudrais du français"

Solution : Installez l'extension "French Language Pack" et redémarrez VSCode.

❌ "Je ne trouve plus la barre latérale avec mes fichiers"

Solution : Appuyez sur Ctrl + B pour afficher/masquer la barre latérale.

❌ "Mon code est tout désordonné"

Solution :

Sélectionnez tout votre code (Ctrl + A)
Appuyez sur Shift + Alt + F pour formater
Ou installez l'extension "Prettier" pour un formatage automatique

✏️ Exercice Pratique

Créez votre premier projet web :

1 Créez un nouveau dossier sur votre bureau appelé mon-premier-site

2 Ouvrez ce dossier dans VSCode (File → Open Folder)

3 Créez un fichier index.html

4 Dans ce fichier, tapez ! puis appuyez sur Tab (VSCode va créer un template HTML automatiquement)

5 Enregistrez le fichier (Ctrl + S)

6 Créez un dossier css et à l'intérieur, un fichier style.css

7 Créez un dossier images pour vos futures images

Félicitations ! Vous avez créé la structure de base d'un projet web professionnel 🎉

💪 Conseils pour Progresser

Pratiquez les raccourcis clavier : Au début ça semble difficile, mais ça vous fera gagner énormément de temps !
Organisez vos projets : Un dossier par projet, avec des sous-dossiers clairs (css, js, images)
Sauvegardez régulièrement : Prenez l'habitude d'appuyer sur Ctrl + S souvent
Explorez les extensions : Elles peuvent vraiment améliorer votre productivité
Personnalisez votre VSCode : Thème, taille de police, icônes... faites-en VOTRE outil !

VSCode peut sembler intimidant au début, mais après quelques jours de pratique, vous ne pourrez plus vous en passer ! 😊