🛠️ Introduction au Tooling
Environnement de développement, productivité, débogage, qualité du code et outillage avancé.
Le tooling représente l'ensemble des outils, extensions et utilitaires qui permettent d'améliorer et d'optimiser le processus de développement web. Un bon environnement de développement est essentiel pour garantir qualité et productivité.
Objectifs du chapitre
- Comprendre l'intérêt d'un environnement de développement outilléFaible
- Configurer VS Code et les extensions de productivitéMoyenne
- Intégrer Linters et formateurs pour la qualité du codeMoyenne
- Maîtriser le débogage et le profilage de performanceÉlevée
🎯 Concepts clés
Un bon environnement de développement moderne repose sur plusieurs piliers :
- 📈 Productivité : minimiser le temps passé sur l'édition de code.
- 🔧 Qualité du code : formater et linter de façon automatique.
- 👥 Collaboration : partager des règles et des extensions communes.
- ⚡ Automatisation : configurer des tâches de build, de test ou de déploiement automatique.
- 🐛 Debug : utiliser des outils de debug de premier choix pour gagner du temps.
📋 Parcours du chapitre
Productivité
Extensions de confort visuel et d'accélération de frappe.
React & Frontend
Outils et astuces pour développer et visualiser vos interfaces React.
Qualité de Code
Configuration de Linters et Formateurs de code.
Outillage Avancé
Gestionnaires de configurations et scripts avancés de build.
Débogage & Performance
Maîtriser les DevTools et le profiler de performance.
🏋️ Exercice
Coupler Prettier + ESLint et instrumenter le projet fil rouge.
🎯 Synthèse
Bilan du chapitre et points à retenir.
🧠 Quiz récapitulatif
Vérifiez votre compréhension du chapitre.
🛠️ Atelier — instrumenter la qualité
Ajoutez la qualité automatique au projet fil rouge : lint, formatage et un test d'API.
1. Configurer ESLint
Ajoutez une flat config (eslint.config.js) avec les règles de base et lancez eslint ..
2. Couper Prettier
Configurez Prettier et un script format ; vérifiez qu'un fichier mal formaté est corrigé.
3. Déboguer
Posez un point d'arrêt dans le serveur et lancez le débogueur pour suivre une requête pas à pas.
🏋️ Exercice
Coupler Prettier + ESLint et instrumenter le projet fil rouge. → Exercice
🎯 Synthèse
Le tooling automatise la qualité (lint, formatage, débogage). Dans le projet fil rouge (branche session-11), ce chapitre instrumente la qualité (ESLint, Prettier, tests).
Tooling
Terminez le quiz du chapitre pour le marquer comme complété.