Chapitre 2.4 — VS Code pour React Native

Où on en est : téléphone connecté, émulateur en réserve. Dernier réglage avant de créer Drill : l’éditeur. Bonne nouvelle — votre VS Code de dev Next.js est déjà à 90 % prêt.

⏱️ TL;DR — Deux extensions utiles (Expo Tools, ES7+ snippets), votre config TS/ESLint/Prettier habituelle, et surtout : savoir déboguer — j ouvre les React Native DevTools (console, sources, breakpoints, profiler), l’element inspector du menu dev complète. Pas de plugin miracle à installer : le confort vient de la maîtrise des DevTools.

🎯 Objectifs

Configurer VS Code pour un projet Expo TS (peu de choses à faire).
Ouvrir et utiliser les React Native DevTools (console, breakpoints).
Inspecter l’arbre de composants et les styles depuis le téléphone.
Poser les conventions d’équipe du cours (lint, format).

Extensions : la liste courte

Extension	Pourquoi
Expo Tools (Expo)	IntelliSense + validation d’`app.json`/`app.config.ts`, debug configs
ES7+ React/Redux/React-Native snippets	`rnfe`, `useState` snippets — optionnel mais courant
Vos habituelles	ESLint, Prettier, Error Lens, GitLens… identiques au web

C’est tout. Méfiez-vous des extensions « React Native full IDE » : le tooling officiel (CLI + DevTools) a rendu la plupart obsolètes.

💡 Pour un dev Next.js — Le template Expo inclut déjà eslint-config-expo. Ajoutez votre config Prettier habituelle et le duo tourne comme sur vos projets web. TypeScript est également déjà en place (base expo/tsconfig.base + strict: true — on la garde stricte tout le cours).

Déboguer : les React Native DevTools

Le debugging RN a longtemps été chaotique (remote debugging, Flipper…). Depuis RN 0.76, c’est unifié et simple : les React Native DevTools, basées sur Chrome DevTools, connectées directement à Hermes.

Ouverture : app lancée, tapez j dans le terminal Metro (ou menu dev → Open DevTools). Vous obtenez :

Console : vos console.log en direct (plus lisibles que dans le terminal).
Sources : votre TS d’origine (source maps), breakpoints, step-by-step, watch — posez un breakpoint dans un onPress et inspectez les variables au moment du tap.
Composants / Profiler React : l’arbre de composants live (props, state, hooks), et le profiler de re-renders — celui que vous connaissez du web.

⚠️ Piège — Les contenus pré-2024 recommandent Flipper ou le « Remote JS Debugging » (exécution du JS dans Chrome). Les deux sont abandonnés : le remote debugging faussait l’exécution (V8 au lieu de Hermes !), Flipper a été retiré. Si un tuto vous y envoie — périmé, touche j et rien d’autre.

Complément côté téléphone : le element inspector (menu dev → Toggle element inspector) — touchez n’importe quel élément à l’écran pour voir sa hiérarchie, ses styles et son box model. C’est le « clic droit → Inspecter » du mobile.

Deux réglages de confort

1. Le raccourci de reload total. Ajoutez à votre mémoire musculaire : r (reload) dans le terminal Metro, et npx expo start -c pour les cas désespérés (cache).

2. Le typage des routes. Le template active experiments.typedRoutes : Expo Router génère les types de vos routes dans expo-env.d.ts. Si un chemin devient rouge dans VS Code après création d’un nouvel écran, c’est que Metro n’a pas régénéré — il tourne ? Les types suivent.

La convention du cours

À partir du chapitre suivant, tout le code s’écrit ainsi :

TypeScript strict — pas de any sauf annotation // TODO explicite.
Composants fonction + hooks, exports nommés pour les composants partagés.
Un fichier = un écran dans app/, composants réutilisables dans components/, logique pure dans lib/ — testable sans RN (Partie 14 vous remerciera).
Format Prettier par défaut, lint Expo.

✏️ Exercices

1. Ouvrez les DevTools (j), posez un breakpoint dans le onPress d’un bouton du template, tapez le bouton sur le téléphone, et inspectez une variable locale.

✅ Solution

Onglet Sources → retrouver le fichier (arborescence ou Ctrl+P) → cliquer dans la marge sur la ligne du onPress → taper le bouton sur le téléphone → l’exécution se fige, les variables locales et la call stack s’affichent. Reprendre avec F8. Si le fichier n’apparaît pas : vérifier que l’app est bien en cours d’exécution connectée à CE Metro.

2. Avec l’element inspector, mesurez le padding du bouton principal de l’écran d’exemple.

✅ Solution

Menu dev → Toggle element inspector → toucher le bouton : l’overlay affiche le box model (margin/padding/taille) et les styles calculés, plus la hiérarchie des composants au-dessus. Re-toggler pour désactiver.

3. Dans l’onglet Profiler (React), enregistrez une session pendant laquelle vous naviguez entre les deux onglets du template. Combien de composants re-render au changement d’onglet ?

✅ Solution

Profiler → ⏺ → naviguer → ⏹ : le flamegraph montre les commits et les composants re-rendus (l’écran entrant, la tab bar). L’important est le geste — ce profiler sera notre outil de vérité en Partie 6 (re-renders) et Partie 14 (perf).

🧠 Quiz

1. Comment ouvre-t-on les React Native DevTools ?

Réponse

Touche j dans le terminal Metro (ou menu dev → Open DevTools). Elles se connectent directement à Hermes — console, sources/breakpoints, arbre React, profiler.

2. Pourquoi le « Remote JS Debugging » historique était-il problématique ?

Réponse

Il exécutait le JS dans Chrome (V8) au lieu de Hermes sur l’appareil : timings différents, APIs différentes — on déboguait une app qui n’était pas celle qui tournait vraiment. Abandonné, tout comme Flipper.

3. Quel outil donne le box model d’un élément affiché sur le téléphone ?

Réponse

L’element inspector du menu dev (Toggle element inspector) : toucher un élément → styles, box model, hiérarchie.

4. Où vit la logique métier « pure » dans notre convention, et pourquoi ?

Réponse

Dans lib/ — des fonctions TS sans dépendance à RN. Elles se testent avec Jest sans simulateur (Partie 14) et se réutilisent (le calcul de score de Drill n’a pas besoin de savoir ce qu’est une View).

5. Quelle extension VS Code valide votre app.json ?

Réponse

Expo Tools — schéma, autocomplétion et diagnostics pour app.json/app.config.ts, plus des configurations de debug.

👉 Chapitre suivant : 2.5 — Naissance de Drill — fini les projets jetables : on crée LE projet du cours.