Module 3.1 – Outils du développeur

Objectif

Découvrir l'environnement de développement. Comprendre ce qu'est un IDE, installer et configurer VS Code, découvrir les extensions utiles, et apprendre les bases du terminal.

Théorie

Qu'est-ce qu'un IDE ?

IDE signifie "Integrated Development Environment" (Environnement de Développement Intégré).

Un IDE est un logiciel qui regroupe tous les outils nécessaires pour programmer :

• Éditeur de code : Pour écrire le code
• Débogueur : Pour trouver et corriger les erreurs
• Compilateur/Interpréteur : Pour exécuter le code
• Gestionnaire de fichiers : Pour organiser les projets
• Terminal intégré : Pour exécuter des commandes

Avantages d'un IDE :

• Coloration syntaxique (le code est coloré pour mieux le lire)
• Auto-complétion (suggestions pendant la frappe)
• Détection d'erreurs en temps réel
• Navigation facile dans le code
• Intégration avec Git (gestion de versions)

IDE populaires :

• VS Code : Gratuit, léger, très populaire
• IntelliJ IDEA : Pour Java, payant (version gratuite disponible)
• Visual Studio : Pour .NET/C#, de Microsoft
• PyCharm : Pour Python
• Xcode : Pour macOS/iOS

VS Code

Visual Studio Code est un éditeur de code gratuit et open source développé par Microsoft.

Installation

Windows :

1. Aller sur https://code.visualstudio.com
2. Télécharger l'installateur
3. Exécuter l'installateur
4. Suivre les instructions

macOS :

1. Aller sur https://code.visualstudio.com
2. Télécharger le fichier .zip
3. Extraire et déplacer VS Code dans Applications
4. Ou utiliser Homebrew : brew install --cask visual-studio-code

Linux :

1. Télécharger depuis le site officiel
2. Installer via le gestionnaire de paquets

Interface de VS Code

Barre latérale gauche :

• Explorateur de fichiers
• Recherche
• Contrôle de code source (Git)
• Extensions
• Débogueur

Zone centrale :

• Éditeur de code (onglets)
• Zone de prévisualisation

Barre inférieure :

• Indicateur de langage
• Nombre de lignes/colonnes
• Indicateurs de problèmes

Barre supérieure :

• Menu (Fichier, Édition, etc.)
• Boutons de navigation

Premiers pas

Ouvrir un dossier :

1. Fichier → Ouvrir un dossier
2. Sélectionner votre dossier de projet
3. Le contenu apparaît dans la barre latérale

Créer un fichier :

1. Clic droit dans l'explorateur
2. Nouveau fichier
3. Donner un nom avec extension (.html, .js, .css)

Ouvrir un terminal :

• Ctrl + ù (Windows/Linux) ou Cmd + ù (macOS)
• Ou Terminal → Nouveau terminal

Extensions

Les extensions ajoutent des fonctionnalités à VS Code.

Extensions essentielles

1. Prettier - Code formatter

• Formate automatiquement le code
• Rend le code plus lisible et cohérent

2. ESLint

• Détecte les erreurs JavaScript
• Suggère des améliorations

3. Live Server

• Lance un serveur local
• Recharge automatiquement la page lors des modifications
• Parfait pour le développement web

4. GitLens

• Améliore l'intégration Git
• Affiche l'historique du code

5. Auto Rename Tag

• Renomme automatiquement les balises HTML jumelles

6. Bracket Pair Colorizer

• Colore les parenthèses/crochets par paires
• Facilite la lecture du code

Installer une extension

1. Cliquer sur l'icône Extensions dans la barre latérale (ou Ctrl+Shift+X)
2. Chercher le nom de l'extension
3. Cliquer sur "Installer"
4. Redémarrer VS Code si nécessaire

Terminal (bases)

Le terminal (ou ligne de commande) permet d'exécuter des commandes texte.

Pourquoi utiliser le terminal ?

• Plus rapide pour certaines tâches
• Automatisation possible
• Accès à des outils en ligne de commande
• Essentiel pour Git, npm, etc.

Commandes de base

Naviguer dans les dossiers :

cd nom_du_dossier        // Entrer dans un dossier
cd ..                    // Remonter d'un niveau
cd                       // Aller au dossier home
pwd                      // Afficher le dossier actuel (Linux/macOS)
cd                       // Afficher le dossier actuel (Windows)

Lister les fichiers :

ls                       // Lister (Linux/macOS)
dir                      // Lister (Windows)
ls -l                    // Liste détaillée (Linux/macOS)

Créer/Supprimer :

mkdir nom_dossier        // Créer un dossier
rmdir nom_dossier        // Supprimer un dossier vide
rm fichier               // Supprimer un fichier (Linux/macOS)
del fichier              // Supprimer un fichier (Windows)

Créer un fichier :

touch fichier.txt        // Créer un fichier vide (Linux/macOS)
type nul > fichier.txt   // Créer un fichier vide (Windows)

Terminal dans VS Code

VS Code intègre un terminal :

• Terminal → Nouveau terminal
• Ou raccourci : Ctrl + ù (Windows/Linux) / Cmd + ù (macOS)
• Le terminal s'ouvre dans le dossier du projet actuel

Exercice

1. Installer VS Code

   • Téléchargez et installez VS Code si ce n'est pas déjà fait
   • Ouvrez VS Code

2. Créer votre premier projet

   • Créez un dossier "mon-premier-projet"
   • Ouvrez-le dans VS Code
   • Créez un fichier "test.txt"
   • Écrivez "Bonjour VS Code" dedans

3. Installer des extensions

   • Installez "Prettier"
   • Installez "Live Server"
   • Explorez les autres extensions disponibles

4. Utiliser le terminal

   • Ouvrez le terminal dans VS Code
   • Naviguez dans vos dossiers avec cd
   • Listez les fichiers avec ls ou dir
   • Créez un nouveau dossier avec mkdir

5. Explorer VS Code

   • Testez les raccourcis clavier :
     • Ctrl/Cmd + P : Ouvrir rapidement un fichier
     • Ctrl/Cmd + B : Afficher/masquer la barre latérale
     • Ctrl/Cmd + / : Commenter/décommenter

Quiz

1. Que signifie IDE ?

   • Internet Development Environment
   • Integrated Development Environment
   • Internal Development Editor

2. Quel est l'avantage principal d'un IDE ?

   • Il est gratuit
   • Il regroupe tous les outils nécessaires pour programmer
   • Il est plus rapide qu'un éditeur de texte

3. Comment ouvrir un terminal dans VS Code ?

   • Fichier → Terminal
   • Ctrl/Cmd + ù
   • Double-clic sur l'écran

4. Que fait la commande cd .. ?

   • Crée un dossier
   • Remonte d'un niveau dans l'arborescence
   • Liste les fichiers

5. À quoi sert l'extension Live Server ?

   • Formater le code
   • Lancer un serveur local et recharger automatiquement
   • Détecter les erreurs

Mini défi

Mission : Configurer votre environnement de développement

1. Installation complète

   • Installez VS Code si ce n'est pas fait
   • Installez au moins 5 extensions utiles :
     • Prettier
     • Live Server
     • ESLint (si vous faites du JavaScript)
     • GitLens
     • Auto Rename Tag

2. Créer une structure de projet

   • Créez un dossier "formation-debutant"
   • À l'intérieur, créez :
     • index.html
     • style.css
     • script.js
     • Un dossier images
   • Ouvrez ce dossier dans VS Code

3. Maîtriser le terminal

   • Ouvrez le terminal dans VS Code
   • Naviguez dans votre structure de dossiers
   • Créez un fichier via le terminal
   • Listez les fichiers pour vérifier

4. Personnaliser VS Code

   • Explorez les paramètres (Fichier → Préférences → Paramètres)
   • Changez le thème si vous voulez
   • Configurez la taille de police
   • Activez le formatage automatique à la sauvegarde

5. Test pratique

   • Créez un fichier HTML simple dans VS Code
   • Utilisez Live Server pour l'ouvrir dans le navigateur
   • Modifiez le fichier et observez le rechargement automatique

Objectif : Avoir un environnement de développement fonctionnel et configuré pour commencer à coder.

---

Validation : Vous pouvez passer au module suivant quand VS Code est installé, configuré avec des extensions utiles, et que vous maîtrisez les bases du terminal.