VS Code: Editor für Flutter, React Native und Ionic

Was ist VS Code?

VS Code ist ein Quellcode-Editor, der 2015 von Microsoft veröffentlicht wurde. Im Gegensatz zu Visual Studio ist VS Code keine vollwertige IDE — es ist ein leichter Editor, der durch Erweiterungen auf IDE-Niveau erweitert werden kann. Für die mobile Entwicklung unterstützt VS Code Flutter (über die Dart Code-Erweiterung), React Native (React Native Tools-Erweiterung) und Ionic (über integrierte TypeScript-Unterstützung).

Laut der Stack Overflow Developer Survey 2025 wird VS Code von 74% aller Entwickler verwendet, was ihn zum beliebtesten Editor der Welt macht. Für die mobile Entwicklung wird er von 68% der Flutter-Entwickler, 55% der React Native-Entwickler und 71% der Ionic-Entwickler gewählt. Die Hauptgründe sind: Geschwindigkeit, Erweiterbarkeit, integriertes Git und Terminal.

VS Code-Architektur basiert auf dem Language Server Protocol (LSP) für Autovervollständigung und Diagnose, dem Debug Adapter Protocol (DAP) für Debugging und Erweiterungen im VSIX-Format. Der Editor läuft auf Electron (Chromium + Node.js), was die Verwendung von JavaScript/TypeScript zur Erstellung von Erweiterungen ermöglicht. VS Code ist unter Windows, macOS und Linux verfügbar.

VS Code für die mobile Entwicklung einrichten

Die grundlegende VS Code-Einrichtung für die mobile Entwicklung umfasst die Installation eines Erweiterungspakets für das jeweilige Framework. Für Flutter reicht die Flutter-Erweiterung aus (Dart wird automatisch installiert). Für React Native — React Native Tools. Für Ionic/React Native mit TypeScript — die integrierte Unterstützung funktioniert sofort, aber es wird empfohlen, ESLint und Prettier zu installieren.

// .vscode/settings.json — Einstellungen für ein mobiles Projekt
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Erweiterungen für die mobile Entwicklung: Flutter (Dart Code, über 50M Installationen), React Native Tools (Microsoft, über 10M), Expo (für React Native Expo), Thunder Client (API-Tests), GitLens (Git-Visualisierung), Error Lens (Inline-Fehler), Material Icon Theme (Dateisymbole). Code Runner wird ebenfalls für die schnelle Skriptausführung empfohlen.

Arbeitsbereichskonfiguration (.code-workspace) ermöglicht die Gruppierung verwandter Projekte in einem einzigen VS Code-Fenster. Für Monorepos (z. B. React Native + Backend) öffnet der Arbeitsbereich alle Ordner mit ihren Einstellungen, Erweiterungen und Startkonfigurationen. VS Code erkennt automatisch Projekte im Arbeitsbereich und zeigt sie im Explorer an.

Flutter in VS Code

Die Flutter-Erweiterung für VS Code bietet einen vollständigen Satz von Entwicklungswerkzeugen: Projekterstellung (Ctrl+Shift+P → Flutter: New Project), Hot Reload (Hot Reload, Hot Restart), UI-Inspektor (Flutter Inspector), Emulator/Gerät (Flutter: Select Device), DevTools (Widget-Baum, Zeitleiste, Netzwerk, Speicher).

// lib/main.dart — Flutter-Anwendung mit 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('Hallo von VS Code!'),
                    child: Text('Hier tippen'),
                ),
            ),
        );
    }
}

Dart DevTools in VS Code wird als Tab im Editor oder als separates Fenster ausgeführt. DevTools umfasst Flutter Inspector (Widget-Baum mit Layout-Overlay), Leistung (FPS, Frame-Build/Rast), CPU Profiler (flutter/scheduler/gesture), Speicher (Heap-Snapshot, GC, Allokationen), Netzwerk (HTTP-Anfragen) und Protokollierung (dart:developer log, stderr).

React Native in VS Code

React Native Tools ist die offizielle Microsoft-Erweiterung zum Debuggen von React Native-Anwendungen. Sie unterstützt das Starten auf Android-Emulator, iOS-Simulator und physischen Geräten, JavaScript-Debugging mit Breakpoints, Elementinspektion über Flipper und Integration mit Expo für schnelle Entwicklung.

React Native Einrichtung: die Erweiterung fügt Befehle hinzu: React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug. Das Hermes-Debugging verwendet den React Native Hermes Debugger. VS Code unterstützt die Flipper-Integration — das Reactotron-Plugin zur Überwachung von Netzwerk, Redux/NgRx-Status, async storage, console.log.

// App.tsx — React Native-Komponente mit 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 ist eine obligatorische Kombination für TypeScript in VS Code. ESLint überprüft die Codesemantik (no-unused-vars, @typescript-eslint/ban-ts-comment), Prettier formatiert Einrückungen, Anführungszeichen, Kommas. Die Konfiguration wird in .eslintrc.js und .prettierrc gespeichert. VS Code führt ESLint automatisch beim Speichern aus und hebt Fehler inline hervor.

Ionic in VS Code

Ionic ist ein Framework für hybride mobile Anwendungen mit Angular, React oder Vue. VS Code bietet integrierte TypeScript-Unterstützung, Angular Language Service (für .html-Vorlagen) und Autovervollständigung für Ionic-Komponenten über die Ionic Snippets-Erweiterung. Capacitor (Nachfolger von Cordova) wird zum Bauen und Veröffentlichen verwendet.

Ionic CLI-Integration in VS Code: das integrierte Terminal führt ionic serve für die Browserentwicklung, ionic build für die Produktion und ionic cap sync für die Synchronisierung mit nativen Plattformen aus. Die Ionic Extension-Erweiterung fügt ein Bedienfeld mit Befehlen hinzu: Generate Page, Generate Component, Run on Android/iOS.

Capacitor-Plugins — eine Brücke zwischen Webcode und nativen APIs. Wichtige Plugins: Camera, Geolocation, Push Notifications, File System, Storage. Jedes Plugin hat eine einheitliche JS-API und native Implementierungen für Android (Java/Kotlin) und iOS (Swift). VS Code bietet Autovervollständigung für die Capacitor-API über TypeScript-Definitionen.

Launch.json und Debugging

launch.json — die VS Code-Debugger-Konfiguration im Ordner .vscode/. Für mobile Projekte definiert launch.json den Starttyp: Flutter (dart), React Native (reactnative), Ionic (chrome oder edge für Browser-Debugging). Jede Konfiguration enthält Parameter: program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — Konfigurationen für Flutter und 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-Debugging in VS Code — paralleles Starten mehrerer Konfigurationen (compounds). Zum Beispiel Flutter DevTools + Flutter App mit automatischem Öffnen des Inspectors. Für React Native wird Attach to Packager verwendet — zuerst wird der Metro Bundler gestartet, dann verbindet sich der Debugger mit der bereits laufenden Anwendung.

Remote-Entwicklung über Dev Containers: VS Code verbindet sich mit einem Docker-Container oder WSL2 mit vorinstalliertem SDK (Flutter, Android, Node.js). Die Dev Containers-Erweiterung (ehemals Remote — Containers) startet das Projekt in einer isolierten Umgebung mit einem vollständigen Satz von Tools, einschließlich Emulator und Debugger.