Configurer ses outils

  • configurer l’éditeur et le navigateur
  • reformater son code automatiquement avec Prettier
  • savoir où et comment sauvegarder son travail

L’éditeur : VS Code

Nous recommandons Visual Studio Code : gratuit, open source, et très bien intégré avec les assistants IA. C’est aussi l’éditeur installé sur les machines de l’école, et celui que vous utiliserez pendant les évaluations.

Trois raccourcis qui font gagner un temps fou :

Raccourci (Win/Linux) macOS Effet
Ctrl+Shift+P Cmd+Shift+P palette de commandes : cherche n’importe quelle action
Ctrl+`` Ctrl+`` ouvrir / fermer le terminal intégré
Alt+Shift+F Option+Shift+F reformater le fichier courant

Le navigateur : Chrome

Tous les exemples du cours ont été testés avec Chrome. Ses outils de développement (F12 ou Ctrl+Shift+I / Cmd+Option+I) seront votre principal instrument de débogage à partir du chapitre 1.2 :

  • l’onglet Console affiche vos console.log et les erreurs JavaScript ;
  • l’onglet Network montre les requêtes réseau, indispensable pour les chapitres 6.2 à 7.1 ;
  • l’onglet Sources permet de poser des points d’arrêt et d’exécuter le code pas à pas.

Prettier : le formatage automatique

Prettier réécrit votre code avec une mise en forme cohérente : indentation, guillemets, points-virgules, retours à la ligne. Cela évite les débats stériles et rend le code lisible par tous.

Après avoir installé l’extension, Alt+Shift+F reformate le fichier ouvert.

Pour que ce soit fait à chaque sauvegarde, ouvrez les réglages (Ctrl+Shift+P → Preferences: Open User Settings (JSON)) et ajoutez :

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Un code bien formaté n’est pas un code correct : Prettier ne corrige que l’apparence, jamais la logique. Mais un code mal formaté cache ses bugs beaucoup mieux.

Sauvegarder son travail

Rien n’est à rendre sur un dépôt dans ce cours, et aucune évaluation ne porte sur git. Vous travaillez dans un dossier sur votre machine, et c’est tout.

Une seule précaution vaut la peine : gardez une copie ailleurs que sur votre ordinateur. Un disque qui lâche ou un portable oublié dans le RER à deux jours de l’évaluation, ça arrive. Une clé USB ou un dossier synchronisé suffisent.

NoteSi vous connaissez déjà git

Rien ne vous en empêche, et VS Code le pilote depuis l’onglet Source Control. Vous pouvez publier votre projet sur un dépôt GitHub privé (Ctrl+Shift+P → Publish to GitHub) : vous avez déjà un compte pour Copilot.

C’est facultatif et pour vous seul : personne ne regardera ce dépôt. Dans ce cas, vérifiez qu’aucune clé d’API ne traîne dans votre code et que .env figure dans .gitignore. On en reparle au chapitre 7.1.

Si le site semble figé

Votre navigateur garde les pages en mémoire (le cache). Si une modification de ce site ou de votre propre page ne s’affiche pas, forcez le rechargement :

Système Raccourci
Windows / Linux Ctrl+F5 ou Ctrl+Shift+R
macOS Cmd+Shift+R

Pendant le développement, le plus simple est de laisser les outils de développement ouverts (F12) et de cocher Disable cache dans l’onglet Network : le cache est alors désactivé tant que le panneau reste ouvert.