VS Code : éditeur pour Flutter, React Native et Ionic

Qu'est-ce que VS Code ?

VS Code est un éditeur de code source publié par Microsoft en 2015. Contrairement à Visual Studio, VS Code n'est pas un IDE complet — c'est un éditeur léger extensible au niveau d'un IDE via des extensions. Pour le développement mobile, VS Code prend en charge Flutter (via l'extension Dart Code), React Native (extension React Native Tools) et Ionic (via la prise en charge intégrée de TypeScript).

Selon l'enquête Stack Overflow Developer Survey 2025, VS Code est utilisé par 74% de tous les développeurs, ce qui en fait l'éditeur le plus populaire au monde. Pour le développement mobile, il est choisi par 68% des développeurs Flutter, 55% des développeurs React Native et 71% des développeurs Ionic. Les principales raisons sont : la rapidité, l'extensibilité, le Git intégré et le terminal.

L'architecture de VS Code repose sur le protocole de serveur de langage (LSP) pour l'autocomplétion et le diagnostic, le protocole d'adaptateur de débogage (DAP) pour le débogage et les extensions au format VSIX. L'éditeur fonctionne sur Electron (Chromium + Node.js), permettant d'utiliser JavaScript/TypeScript pour créer des extensions. VS Code est disponible sur Windows, macOS et Linux.

Configuration de VS Code pour le développement mobile

La configuration de base de VS Code pour le développement mobile comprend l'installation d'un pack d'extensions pour le framework spécifique. Pour Flutter, l'extension Flutter suffit (Dart s'installe automatiquement). Pour React Native — React Native Tools. Pour Ionic/React Native avec TypeScript — la prise en charge intégrée fonctionne immédiatement, mais il est recommandé d'installer ESLint et Prettier.

// .vscode/settings.json — paramètres pour un projet mobile
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Extensions pour le développement mobile : Flutter (Dart Code, plus de 50M d'installations), React Native Tools (Microsoft, plus de 10M), Expo (pour React Native Expo), Thunder Client (test d'API), GitLens (visualisation Git), Error Lens (erreurs en ligne), Material Icon Theme (icônes de fichiers). Code Runner est également recommandé pour l'exécution rapide de scripts.

Configuration de l'espace de travail (.code-workspace) permet de regrouper des projets connexes dans une seule fenêtre VS Code. Pour les monorepos (par exemple, React Native + Backend), l'espace de travail ouvre tous les dossiers avec leurs paramètres, extensions et configurations de lancement. VS Code détecte automatiquement les projets dans l'espace de travail et les affiche dans l'Explorateur.

Flutter dans VS Code

L'extension Flutter pour VS Code fournit un ensemble complet d'outils de développement : création de projet (Ctrl+Shift+P → Flutter: New Project), rechargement à chaud (Hot Reload, Hot Restart), inspecteur d'UI (Flutter Inspector), émulateur/appareil (Flutter: Select Device), DevTools (arbre de widgets, chronologie, réseau, mémoire).

// lib/main.dart — application Flutter avec navigation
import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: 'VS Code Example',
        home: HomePage(),
        theme: ThemeData.useMaterial3(),
    ));
}

class HomePage extends StatelessWidget {
    HomePage({super.key});

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('Flutter + VS Code')),
            body: Center(
                child: ElevatedButton(
                    onPressed: () => debugPrint('Bonjour de VS Code !'),
                    child: Text('Appuyez ici'),
                ),
            ),
        );
    }
}

Dart DevTools dans VS Code s'exécute sous forme d'onglet dans l'éditeur ou de fenêtre séparée. DevTools inclut Flutter Inspector (arbre de widgets avec superposition de mise en page), Performance (FPS, build/rast d'images), CPU Profiler (flutter/scheduler/gesture), Mémoire (instantané de tas, GC, allocations), Réseau (requêtes HTTP) et Journalisation (dart:developer log, stderr).

React Native dans VS Code

React Native Tools est l'extension officielle de Microsoft pour déboguer les applications React Native. Elle prend en charge le lancement sur l'émulateur Android, le simulateur iOS et les appareils physiques, le débogage JavaScript avec points d'arrêt, l'inspection d'éléments via Flipper et l'intégration avec Expo pour un développement rapide.

Configuration de React Native : l'extension ajoute des commandes React Native : Start Packager, Run Android, Run iOS, Attach to Packager, Debug. Le débogage Hermes utilise React Native Hermes Debugger. VS Code prend en charge l'intégration Flipper — le plugin Reactotron pour surveiller le réseau, l'état Redux/NgRx, async storage, console.log.

// App.tsx — composant React Native avec navigation
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
    Home: undefined;
    Details: { itemId: number };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

ESLint + Prettier est une combinaison obligatoire pour TypeScript dans VS Code. ESLint vérifie la sémantique du code (no-unused-vars, @typescript-eslint/ban-ts-comment), Prettier formate l'indentation, les guillemets, les virgules. La configuration est enregistrée dans .eslintrc.js et .prettierrc. VS Code exécute automatiquement ESLint à l'enregistrement et met les erreurs en évidence en ligne.

Ionic dans VS Code

Ionic est un framework pour applications mobiles hybrides utilisant Angular, React ou Vue. VS Code fournit une prise en charge intégrée de TypeScript, Angular Language Service (pour les modèles .html) et l'autocomplétion pour les composants Ionic via l'extension Ionic Snippets. Capacitor (successeur de Cordova) est utilisé pour la construction et la publication.

Intégration Ionic CLI dans VS Code : le terminal intégré exécute ionic serve pour le développement dans le navigateur, ionic build pour la production et ionic cap sync pour la synchronisation avec les plateformes natives. L'extension Ionic Extension ajoute un panneau avec des commandes : Generate Page, Generate Component, Run on Android/iOS.

Plugins Capacitor — un pont entre le code web et les API natives. Plugins principaux : Camera, Geolocation, Push Notifications, File System, Storage. Chaque plugin dispose d'une API JS unifiée et d'implémentations natives pour Android (Java/Kotlin) et iOS (Swift). VS Code propose l'autocomplétion pour l'API Capacitor via des définitions TypeScript.

Launch.json et débogage

launch.json — la configuration du débogueur VS Code dans le dossier .vscode/. Pour les projets mobiles, launch.json définit le type de lancement : Flutter (dart), React Native (reactnative), Ionic (chrome ou edge pour le débogage dans le navigateur). Chaque configuration inclut des paramètres : program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — configurations pour Flutter et React Native
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flutter (Android)",
            "type": "dart",
            "request": "launch",
            "program": "lib/main.dart",
            "deviceId": "emulator-5554",
            "args": ["--dart-define=ENV=staging"]
        },
        {
            "name": "React Native (Android)",
            "type": "reactnative",
            "request": "launch",
            "platform": "android",
            "target": "device",
            "sourceMaps": true
        },
        {
            "name": "Ionic (Browser)",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8100",
            "webRoot": "\${workspaceFolder}"
        }
    ]
}

Débogage multicible dans VS Code — lancement parallèle de plusieurs configurations (compounds). Par exemple, Flutter DevTools + Flutter App avec ouverture automatique de l'Inspecteur. Pour React Native, on utilise Attach to Packager — d'abord le bundler Metro est lancé, puis le débogueur se connecte à l'application déjà en cours d'exécution.

Développement à distance via Dev Containers : VS Code se connecte à un conteneur Docker ou WSL2 avec SDK préinstallé (Flutter, Android, Node.js). L'extension Dev Containers (anciennement Remote — Containers) lance le projet dans un environnement isolé avec un ensemble complet d'outils, y compris l'émulateur et le débogueur.