VS Code: edytor dla Flutter, React Native i Ionic

Czym jest VS Code?

VS Code — edytor kodu źródłowego wydany przez Microsoft w 2015 roku. W przeciwieństwie do Visual Studio, VS Code nie jest pełnoprawnym IDE — to lekki edytor, rozszerzalny do poziomu IDE poprzez extensions. Do programowania mobilnego VS Code obsługuje Flutter (przez Dart Code extension), React Native (React Native Tools extension) i Ionic (przez wbudowaną obsługę TypeScript).

Według Stack Overflow Developer Survey 2025, VS Code jest używany przez 74% wszystkich programistów, co czyni go najpopularniejszym edytorem na świecie. Do programowania mobilnego wybiera go 68% programistów Flutter, 55% programistów React Native i 71% programistów Ionic. Główne powody: szybkość działania, rozszerzalność, wbudowany Git i terminal.

Architektura VS Code opiera się na Language Server Protocol (LSP) do autouzupełniania i diagnostyki, Debug Adapter Protocol (DAP) do debugowania oraz rozszerzeniach w formacie VSIX. Edytor działa na Electron (Chromium + Node.js), co pozwala na używanie JavaScript/TypeScript do tworzenia rozszerzeń. VS Code jest dostępny na Windows, macOS i Linux.

Konfiguracja VS Code do programowania mobilnego

Podstawowa konfiguracja VS Code do programowania mobilnego obejmuje instalację extension pack dla konkretnego frameworka. Dla Flutter wystarczy rozszerzenie Flutter (Dart zainstaluje się automatycznie). Dla React Native — React Native Tools. Dla Ionic/React Native z TypeScript — wbudowana obsługa działa od razu, ale zaleca się zainstalowanie ESLint i Prettier.

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

Rozszerzenia do programowania mobilnego: Flutter (Dart Code, 50M+ instalacji), React Native Tools (Microsoft, 10M+), Expo (dla React Native Expo), Thunder Client (testowanie API), GitLens (wizualizacja Git), Error Lens (błędy inline), Material Icon Theme (ikony plików). Zaleca się również zainstalowanie Code Runner do szybkiego uruchamiania skryptów.

Konfiguracja Workspace (.code-workspace) pozwala grupować powiązane projekty w jednym oknie VS Code. Dla monorepozytoriów (np. React Native + Backend) workspace otwiera wszystkie foldery z ich ustawieniami, rozszerzeniami i konfiguracjami launch. VS Code automatycznie wykrywa projekty w workspace i wyświetla je w Explorer.

Flutter w VS Code

Flutter extension dla VS Code zapewnia pełny zestaw narzędzi programistycznych: tworzenie projektu (Ctrl+Shift+P → Flutter: New Project), gorące przeładowanie (Hot Reload, Hot Restart), inspektor UI (Flutter Inspector), emulator/urządzenie (Flutter: Select Device), DevTools (drzewo widgetów, timeline, sieć, pamięć).

// lib/main.dart — aplikacja Flutter z nawigacją
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 w VS Code uruchamia się jako zakładka wewnątrz edytora lub osobne okno. DevTools zawiera Flutter Inspector (drzewo widgetów z overlay layoutu), Performance (FPS, frame build/rast), CPU Profiler (flutter/scheduler/gesture), Memory (heap snapshot, GC, alokacje), Network (żądania HTTP) i Logging (dart:developer log, stderr).

React Native w VS Code

React Native Tools — oficjalne rozszerzenie Microsoft do debugowania aplikacji React Native. Obsługuje uruchamianie na emulatorze Androida, symulatorze iOS i fizycznych urządzeniach, debugowanie JavaScript z breakpoints, inspekcję elementów przez Flipper i integrację z Expo do szybkiego programowania.

Konfiguracja React Native: rozszerzenie dodaje polecenia React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug. Do debugowania Hermes używa się React Native Hermes Debugger. VS Code obsługuje Flipper Integration — plugin Reactotron do monitorowania sieci, stanu Redux/NgRx, async storage, console.log.

// App.tsx — komponent React Native z nawigacją
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 — obowiązkowe połączenie dla TypeScript w VS Code. ESLint sprawdza semantykę kodu (no-unused-vars, @typescript-eslint/ban-ts-comment), Prettier formatuje wcięcia, cudzysłowy, przecinki. Konfiguracja jest przechowywana w .eslintrc.js i .prettierrc. VS Code automatycznie uruchamia ESLint przy zapisie i podświetla błędy inline.

Ionic w VS Code

Ionic — framework do hybrydowych aplikacji mobilnych w Angular, React lub Vue. VS Code zapewnia wbudowaną obsługę TypeScript, Angular Language Service (dla szablonów .html) i autouzupełnianie dla komponentów Ionic poprzez rozszerzenie Ionic Snippets. Do budowania i publikowania używa się Capacitor (następca Cordova).

Integracja Ionic CLI w VS Code: wbudowany terminal uruchamia ionic serve do programowania w przeglądarce, ionic build do produkcji i ionic cap sync do synchronizacji z platformami natywnymi. Rozszerzenie Ionic Extension dodaje panel z poleceniami: Generate Page, Generate Component, Run on Android/iOS.

Capacitor Plugins — most między kodem webowym a natywnym API. Główne pluginy: Camera, Geolocation, Push Notifications, File System, Storage. Każdy plugin ma jednolity JS API i natywne implementacje dla Android (Java/Kotlin) i iOS (Swift). VS Code oferuje autouzupełnianie dla Capacitor API poprzez TypeScript definitions.

Launch.json i debugowanie

launch.json — konfiguracja debuggera VS Code w folderze .vscode/. Dla projektów mobilnych launch.json określa typ uruchomienia: Flutter (dart), React Native (reactnative), Ionic (chrome lub edge do debugowania w przeglądarce). Każda konfiguracja zawiera parametry: program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — konfiguracje dla Flutter i 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}"
        }
    ]
}

Debugowanie Multi-target w VS Code — równoległe uruchamianie wielu konfiguracji (compounds). Na przykład Flutter DevTools + Flutter App z automatycznym otwieraniem Inspector. Dla React Native używa się Attach to Packager — najpierw uruchamiany jest Metro bundler, następnie debugger dołącza do już działającej aplikacji.

Remote development przez Dev Containers: VS Code łączy się z kontenerem Docker lub WSL2 z preinstalowanym SDK (Flutter, Android, Node.js). Rozszerzenie Dev Containers (dawniej Remote — Containers) uruchamia projekt w izolowanym środowisku z pełnym zestawem narzędzi, włączając emulator i debugger.