Section 11.1.4 : Installer son environnement de développement
🎯 Objectif pédagogique
Installer et configurer un environnement de développement professionnel complet : VS Code avec les extensions essentielles, Node.js, Python, et les outils de productivité. Vous serez capable de coder dans un environnement qui vous rend efficient dès le premier jour.
L'environnement, c'est 80% du confort
Marc comparait son ancien setup Bloomberg à un cockpit d'avion : 6 écrans, des raccourcis partout, une configuration optimisée. Son premier jour de code, il avait un bloc-notes et un terminal. Inacceptable. Un bon environnement de développement, c'est exactement la même idée : configurer votre cockpit de code pour être productif dès le départ.
VS Code : l'éditeur de référence
Visual Studio Code est utilisé par 73% des développeurs (Stack Overflow 2025). Gratuit, open-source, extensible, disponible sur tous les OS.
Installation
- →Téléchargez depuis code.visualstudio.com
- →Lancez l'installeur :
- →Windows : cochez "Add to PATH" et "Register as default editor"
- →macOS : déplacez dans Applications. Puis
Cmd+Shift+P→ "Shell command: Install code" - →Linux :
sudo snap install code --classic
- →Vérifiez :
code --version
# Devrait afficher : 1.96.x ou plus récent
Extensions essentielles
Ctrl+Shift+X → recherchez et installez :
| Extension | Utilité | Priorité |
|---|---|---|
| GitHub Copilot | Assistant IA de code | 🔴 Critique |
| Prettier | Formatage automatique | 🔴 Critique |
| ESLint | Détection d'erreurs JS | 🔴 Critique |
| Python (Microsoft) | Support Python complet | 🔴 Critique |
| Live Server | Serveur local + hot-reload | 🟡 Important |
| GitLens | Historique Git visuel | 🟡 Important |
| Thunder Client | Tester des APIs | 🟡 Important |
| Auto Rename Tag | Renomme les balises HTML | 🟢 Confort |
| Error Lens | Erreurs inline dans le code | 🟢 Confort |
Configuration recommandée
Ouvrez les settings : Ctrl+, → icône {} en haut à droite :
\{
"editor.fontSize": 15,
"editor.tabSize": 2,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.minimap.enabled": false,
"editor.wordWrap": "on",
"editor.bracketPairColorization.enabled": true,
"files.autoSave": "afterDelay",
"terminal.integrated.defaultProfile.windows": "Git Bash",
"emmet.includeLanguages": \{ "javascript": "javascriptreact" \}
\}
Format on Save = tranquillité
"formatOnSave": true + Prettier = votre code est formaté automatiquement à chaque sauvegarde. Plus jamais de débats sur l'indentation. Marc : "C'est comme un assistant qui range mon bureau chaque fois que je me lève."
Raccourcis VS Code essentiels
| Raccourci | Action | Fréquence |
|---|---|---|
Ctrl+P | Ouvrir un fichier rapidement | ⭐⭐⭐⭐⭐ |
Ctrl+Shift+P | Palette de commandes | ⭐⭐⭐⭐⭐ |
Ctrl+D | Sélectionner le mot suivant identique | ⭐⭐⭐⭐ |
Ctrl+/ | Commenter/décommenter | ⭐⭐⭐⭐ |
Alt+↑/↓ | Déplacer une ligne | ⭐⭐⭐⭐ |
Ctrl+Shift+K | Supprimer la ligne | ⭐⭐⭐ |
| `Ctrl+`` | Ouvrir le terminal intégré | ⭐⭐⭐⭐⭐ |
Ctrl+B | Toggle la sidebar | ⭐⭐⭐ |
F2 | Renommer un symbole partout | ⭐⭐⭐ |
Installer Node.js
Node.js est l'environnement d'exécution JavaScript côté serveur. Il inclut npm pour installer des bibliothèques.
# Windows
winget install OpenJS.NodeJS.LTS
# macOS
brew install node
# Vérification
node --version # v22.x.x (LTS)
npm --version # 10.x.x
Test rapide :
echo 'console.log("Hello Node.js !")' > test.js
node test.js
# → Hello Node.js !
Installer Python
Python est le langage de référence pour la data science et l'IA.
# Windows (COCHEZ "Add to PATH" !)
winget install Python.Python.3.12
# macOS
brew install python@3.12
# Vérification
python --version # Python 3.12.x
pip --version # pip 24.x
Le piège du PATH sur Windows
Si python affiche "command not found", Python n'est pas dans votre PATH. Réinstallez en cochant "Add Python to PATH". C'est l'erreur n°1 des débutants Windows. Marc y a perdu 45 minutes.
🏋️ Exercice pratique (20 minutes)
Checklist d'installation :
- → VS Code installé et ouvert
- → 5+ extensions installées
- → Settings configurés (formatOnSave, fontSize)
- → Terminal intégré ouvert (`Ctrl+``)
- →
node --version→ v20+ ou v22+ - →
npm --version→ 10+ - →
python --version→ 3.12+ - →
pip --version→ 24+ - →
node -e "console.log('OK')"→ OK - →
python -c "print('OK')"→ OK
Marc a passé 45 minutes sur Python à cause du PATH. "Le terminal m'a dit 'python is not recognized'. La solution : désinstaller, réinstaller avec la case cochée. Depuis, je lis TOUTES les options des installeurs."
Quelle extension VS Code est la plus impactante sur la productivité en 2025 ?
Le raccourci Ctrl+P dans VS Code permet de :