Premiers Pas avec VS Code

Vous souhaitez écrire du code, mais le Bloc-notes ou TextEdit vous semblent limités. Vous avez besoin d’un outil qui vous aide à coder plus rapidement - avec la coloration syntaxique, l’autocomplétion et des outils intégrés. VS Code est comme un cahier intelligent pour le code - il comprend ce que vous écrivez et vous aide tout au long du processus. Visual Studio Code est gratuit, fonctionne sur tous les systèmes d’exploitation et est utilisé par des millions de développeurs.

Concepts Clés

Éditeur - La zone principale où vous écrivez du code
Explorateur - La barre latérale qui affiche vos fichiers et dossiers
Extensions - Des modules complémentaires qui ajoutent de nouvelles fonctionnalités à VS Code
Terminal Intégré - Une ligne de commande intégrée dans VS Code

Ce Dont Vous Aurez Besoin

Un ordinateur Windows, macOS ou Linux
Une connexion Internet
Environ 500 Mo d’espace disque
20 à 25 minutes

Étape 1 : Télécharger et Installer VS Code

Allez sur code.visualstudio.com
Cliquez sur le bouton Download (il détecte automatiquement votre système d’exploitation)
Exécutez le programme d’installation :
- Windows : Double-cliquez sur le fichier .exe et cliquez sur Next à chaque invite. Sur l’écran Select Additional Tasks, cochez aussi Add “Open with Code” action to Windows Explorer directory context menu afin de pouvoir ouvrir plus tard des dossiers de projet depuis l’Explorateur de fichiers
- Mac : Ouvrez le fichier .dmg, faites glisser VS Code vers Applications
- Linux : Suivez les instructions pour votre gestionnaire de paquets
Lancez VS Code

Vous verrez un onglet de bienvenue avec des options pour commencer.

Étape 2 : Découvrir l’Interface

VS Code comporte cinq zones principales :

Barre d’Activités (bord gauche) - Icônes pour l’Explorateur, la Recherche, Git, les Extensions, etc.
Barre Latérale - Affiche le contenu de l’activité sélectionnée (fichiers, résultats de recherche)
Éditeur (centre) - L’endroit où vous écrivez du code
Panneau (en bas) - Terminal, Problèmes, Sortie
Barre d’État (bord inférieur) - Informations sur votre fichier et votre projet

Cliquez sur l’icône Explorer (en haut de la Barre d’Activités) pour voir le navigateur de fichiers.

Étape 3 : Ouvrir un Dossier et Explorer

Cliquez sur File → Open Folder
Allez dans votre dossier Documents et créez un nouveau dossier vide pour vous entraîner, par exemple vscode_practice (utilisez le bouton New Folder de la fenêtre)
Sélectionnez ce nouveau dossier, puis cliquez sur Open (ou Select Folder)
Si on vous demande « Do you trust the authors? », cliquez sur Yes, I trust the authors

La barre latérale Explorateur affiche maintenant les fichiers de votre dossier :

Cliquez sur un dossier pour le développer
Cliquez sur n’importe quel fichier pour l’ouvrir dans l’éditeur
Cliquez sur l’icône Search dans la Barre d’Activités (loupe) pour rechercher dans tous les fichiers

Étape 4 : Créer un Fichier Markdown

Dans l’Explorateur, placez le pointeur de la souris sur le nom du dossier en haut, puis cliquez sur l’icône New File (page avec +) qui apparaît
Nommez-le README.md
Ajoutez ce contenu :

# My Project

This is a **demo project** for learning VS Code.

## Features
- Easy to edit
- Markdown formatting
- Live preview

## Next Steps
1. Add more content
2. Try other file types
3. Explore extensions

Cliquez sur File → Save pour enregistrer

Markdown est un format de texte simple qui utilise des symboles comme # pour les titres, ** pour le gras et - pour les listes. Il est largement utilisé pour la documentation et pour communiquer avec les LLM comme ChatGPT et Claude.

Étape 5 : Installer l’Extension Markdown Preview

Cliquez sur l’icône Extensions dans la Barre d’Activités (l’icône avec des carrés)
Tapez Markdown Preview Enhanced dans la zone de recherche
Trouvez Markdown Preview Enhanced dans les résultats
Cliquez sur Install

Étape 6 : Prévisualiser Votre Fichier Markdown

Ouvrez README.md s’il n’est pas déjà ouvert
Faites un clic droit dans l’éditeur et sélectionnez Markdown Preview Enhanced: Open Preview to the Side

Un panneau de prévisualisation s’ouvre affichant votre Markdown formaté - éditez à gauche, voyez les changements à droite en temps réel !

Étape 7 : Utiliser le Terminal Intégré

Cliquez sur Terminal → New Terminal
Essayez ces commandes :

Lister les fichiers :

ls

(Dans l’Invite de commandes de Windows, utilisez dir)

Afficher le répertoire de travail actuel :

pwd

(Dans l’Invite de commandes de Windows, utilisez cd)

Créer un nouveau dossier :

mkdir notes

Vérifiez l’Explorateur - le dossier notes apparaît ! Le terminal s’exécute dans votre dossier de projet, donc les commandes affectent directement votre projet.

Étape 8 : Utiliser les Agents IA dans VS Code (Optionnel)

VS Code inclut GitHub Copilot Chat, un assistant IA qui peut expliquer, écrire et déboguer du code.

Ouvrez le fichier README.md (ou tout autre fichier de votre projet)
Cliquez sur Chat → Open Chat dans la barre de titre (ou appuyez sur Ctrl+Alt+I sur Windows/Linux, Ctrl+Cmd+I sur Mac)
Si on vous le demande, connectez-vous avec votre compte GitHub (un forfait gratuit est disponible)
Dans le panneau de discussion qui s’ouvre, tapez : « Explique ce fichier »
Appuyez sur Entrée

GitHub Copilot analysera votre fichier et expliquera ce qu’il fait. Vous pouvez lui demander d’écrire du nouveau code, de corriger des bugs ou de répondre à des questions comme « Comment ajouter plus de fonctionnalités ? »

Astuce : Pour l’édition en ligne, sélectionnez du code dans n’importe quel fichier et appuyez sur Ctrl+I (Windows/Linux) ou Cmd+I (Mac) pour demander à Copilot de modifier, corriger ou expliquer uniquement cette section.

Comment Rouvrir Votre Projet

Ouvrez VS Code depuis le menu Démarrer (Windows), Spotlight (Mac) ou Applications (Linux)
Cliquez sur File → Open Recent → sélectionnez votre dossier
Ou cliquez sur File → Open Folder et naviguez vers celui-ci

Dépannage

La prévisualisation ne s’affiche pas : Assurez-vous que l’extension Markdown Preview Enhanced est installée et que vous avez un fichier .md ouvert
Le terminal affiche le mauvais répertoire : Cliquez sur l’icône de corbeille dans le panneau du terminal, puis cliquez sur Terminal → New Terminal
Le menu Chat n’est pas visible : Les fonctionnalités d’IA sont peut-être désactivées. Ouvrez les paramètres (appuyez sur Ctrl+, sur Windows/Linux ou Cmd+, sur Mac), recherchez disable AI features et décochez cette option. Ensuite, survolez l’icône Copilot dans la Barre d’État (en bas) et sélectionnez Use AI Features
Les extensions ne fonctionnent pas : Cliquez sur View → Command Palette, tapez « reload window » et sélectionnez Developer: Reload Window

Le Workflow Complet

Ouvrez un dossier dans VS Code
Créez/éditez des fichiers
Utilisez des extensions pour prévisualiser
Utilisez le terminal pour les commandes
Utilisez l’IA pour comprendre et améliorer le code
Enregistrez et répétez

Prochaines Étapes

Essayez d’autres types de fichiers : Créez des fichiers .html, .css, .js ou .py et découvrez la coloration syntaxique de VS Code
Explorez les fonctionnalités IA : Demandez à l’IA d’écrire du code, de corriger des bugs ou de suggérer des améliorations pour vos projets
Installez plus d’extensions : Essayez « Prettier » pour le formatage automatique ou « GitLens » pour les fonctionnalités Git
Apprenez les raccourcis : Cliquez sur Help → Keyboard Shortcuts Reference pour accélérer votre workflow

Créé par Steven Ge le 7 décembre 2025.