VS Code: editor voor Flutter, React Native en Ionic

Wat is VS Code?

VS Code — een broncode-editor die door Microsoft in 2015 is uitgebracht. In tegenstelling tot Visual Studio is VS Code geen volledige IDE — het is een lichte editor die via extensies tot IDE-niveau kan worden uitgebreid. Voor mobiele ontwikkeling ondersteunt VS Code Flutter (via de Dart Code-extensie), React Native (React Native Tools-extensie) en Ionic (via ingebouwde TypeScript-ondersteuning).

Volgens de Stack Overflow Developer Survey 2025 gebruikt 74% van alle ontwikkelaars VS Code, wat het de populairste editor ter wereld maakt. Voor mobiele ontwikkeling kiest 68% van de Flutter-ontwikkelaars, 55% van de React Native-ontwikkelaars en 71% van de Ionic-ontwikkelaars ervoor. Belangrijkste redenen: snelheid, uitbreidbaarheid, ingebouwde Git en terminal.

VS Code-architectuur is gebouwd op Language Server Protocol (LSP) voor automatisch aanvullen en diagnostiek, Debug Adapter Protocol (DAP) voor debuggen en extensies in VSIX-formaat. De editor draait op Electron (Chromium + Node.js), waardoor JavaScript/TypeScript kan worden gebruikt voor het maken van extensies. VS Code is beschikbaar op Windows, macOS en Linux.

VS Code instellen voor mobiele ontwikkeling

De basis VS Code-installatie voor mobiele ontwikkeling omvat het installeren van een extensiepakket voor het specifieke framework. Voor Flutter is de Flutter-extensie voldoende (Dart wordt automatisch geïnstalleerd). Voor React Native — React Native Tools. Voor Ionic/React Native met TypeScript — ingebouwde ondersteuning werkt direct, maar het wordt aanbevolen om ESLint en Prettier te installeren.

// .vscode/settings.json — instellingen voor mobiel project
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Extensies voor mobiele ontwikkeling: Flutter (Dart Code, 50M+ installaties), React Native Tools (Microsoft, 10M+), Expo (voor React Native Expo), Thunder Client (API-testen), GitLens (Git-visualisatie), Error Lens (inline-fouten), Material Icon Theme (bestandspictogrammen). Het wordt ook aanbevolen om Code Runner te installeren voor het snel uitvoeren van scripts.

Workspace-configuratie (.code-workspace) maakt het mogelijk om gerelateerde projecten in één VS Code-venster te groeperen. Voor monorepository's (bijv. React Native + Backend) opent de workspace alle mappen met hun instellingen, extensies en launch-configuraties. VS Code detecteert automatisch projecten in de workspace en toont ze in Explorer.

Flutter in VS Code

Flutter-extensie voor VS Code biedt een volledige set ontwikkeltools: project maken (Ctrl+Shift+P → Flutter: New Project), hot reload (Hot Reload, Hot Restart), UI-inspector (Flutter Inspector), emulator/apparaat (Flutter: Select Device), DevTools (widgetboom, timeline, netwerk, geheugen).

// lib/main.dart — Flutter-app met navigatie
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('Hello from VS Code!'),
                    child: Text('Tap here'),
                ),
            ),
        );
    }
}

Dart DevTools in VS Code wordt geopend als tabblad in de editor of als apart venster. DevTools bevat Flutter Inspector (widgetboom met layout-overlay), Performance (FPS, frame build/rast), CPU Profiler (flutter/scheduler/gesture), Memory (heap snapshot, GC, allocaties), Network (HTTP-verzoeken) en Logging (dart:developer log, stderr).

React Native in VS Code

React Native Tools — de officiële Microsoft-extensie voor het debuggen van React Native-applicaties. Ondersteunt uitvoeren op Android-emulator, iOS-simulator en fysieke apparaten, JavaScript-debuggen met breakpoints, elementinspectie via Flipper en integratie met Expo voor snelle ontwikkeling.

React Native instellen: de extensie voegt de opdrachten React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug toe. Voor Hermes-debuggen wordt React Native Hermes Debugger gebruikt. VS Code ondersteunt Flipper Integration — de Reactotron-plugin voor het monitoren van netwerk, Redux/NgRx-status, async storage, console.log.

// App.tsx — React Native-component met navigatie
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 — een verplichte combinatie voor TypeScript in VS Code. ESLint controleert de semantiek van de code (no-unused-vars, @typescript-eslint/ban-ts-comment), Prettier formatteert inspringingen, aanhalingstekens, komma's. Configuratie wordt opgeslagen in .eslintrc.js en .prettierrc. VS Code voert automatisch ESLint uit bij opslaan en markeert fouten inline.

Ionic in VS Code

Ionic — framework voor hybride mobiele applicaties in Angular, React of Vue. VS Code biedt ingebouwde TypeScript-ondersteuning, Angular Language Service (voor .html-sjablonen) en automatisch aanvullen voor Ionic-componenten via de Ionic Snippets-extensie. Voor bouwen en publiceren wordt Capacitor (opvolger van Cordova) gebruikt.

Ionic CLI-integratie in VS Code: ingebouwde terminal voert ionic serve uit voor ontwikkeling in de browser, ionic build voor productie en ionic cap sync voor synchronisatie met native platforms. De Ionic Extension voegt een paneel met opdrachten toe: Generate Page, Generate Component, Run on Android/iOS.

Capacitor Plugins — brug tussen webcode en native API. Belangrijkste plugins: Camera, Geolocation, Push Notifications, File System, Storage. Elke plugin heeft een uniforme JS API en native implementaties voor Android (Java/Kotlin) en iOS (Swift). VS Code biedt automatisch aanvullen voor Capacitor API via TypeScript-definities.

Launch.json en debuggen

launch.json — debuggerconfiguratie van VS Code in de map .vscode/. Voor mobiele projecten definieert launch.json het starttype: Flutter (dart), React Native (reactnative), Ionic (chrome of edge voor debuggen in de browser). Elke configuratie bevat parameters: program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — configuraties voor Flutter en 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}"
        }
    ]
}

Multi-target debuggen in VS Code — parallel uitvoeren van meerdere configuraties (compounds). Bijvoorbeeld Flutter DevTools + Flutter App met automatisch openen van Inspector. Voor React Native wordt Attach to Packager gebruikt — eerst wordt Metro bundler gestart, vervolgens wordt de debugger gekoppeld aan de al lopende applicatie.

Remote development via Dev Containers: VS Code maakt verbinding met een Docker-container of WSL2 met vooraf geïnstalleerde SDK (Flutter, Android, Node.js). De Dev Containers-extensie (voorheen Remote — Containers) start het project in een geïsoleerde omgeving met een volledige set tools, inclusief emulator en debugger.