VS Code: editor pro Flutter, React Native a Ionic

Co je VS Code?

VS Code — editor zdrojového kódu, vydaný Microsoftem v roce 2015. Na rozdíl od Visual Studio není VS Code plnohodnotné IDE — je to lehký editor rozšiřitelný na úroveň IDE pomocí extensions. Pro mobilní vývoj VS Code podporuje Flutter (přes Dart Code extension), React Native (React Native Tools extension) a Ionic (přes vestavěnou podporu TypeScript).

Podle Stack Overflow Developer Survey 2025 používá VS Code 74 % všech vývojářů, což z něj činí nejpopulárnější editor na světě. Pro mobilní vývoj jej volí 68 % Flutter vývojářů, 55 % React Native vývojářů a 71 % Ionic vývojářů. Hlavní důvody: rychlost práce, rozšiřitelnost, vestavěný Git a terminál.

Architektura VS Code je postavena na Language Server Protocol (LSP) pro automatické dokončování a diagnostiku, Debug Adapter Protocol (DAP) pro ladění a rozšířeních ve formátu VSIX. Editor běží na Electronu (Chromium + Node.js), což umožňuje používat JavaScript/TypeScript pro tvorbu rozšíření. VS Code je dostupný na Windows, macOS a Linux.

Nastavení VS Code pro mobilní vývoj

Základní nastavení VS Code pro mobilní vývoj zahrnuje instalaci extension pack pro konkrétní framework. Pro Flutter stačí rozšíření Flutter (Dart se nainstaluje automaticky). Pro React Native — React Native Tools. Pro Ionic/React Native s TypeScript — vestavěná podpora funguje okamžitě, ale doporučuje se nainstalovat ESLint a Prettier.

// .vscode/settings.json — nastavení pro mobilní projekt
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Rozšíření pro mobilní vývoj: Flutter (Dart Code, 50M+ instalací), React Native Tools (Microsoft, 10M+), Expo (pro React Native Expo), Thunder Client (testování API), GitLens (vizualizace Git), Error Lens (inline chyby), Material Icon Theme (ikony souborů). Doporučuje se také nainstalovat Code Runner pro rychlé spouštění skriptů.

Workspace konfigurace (.code-workspace) umožňuje seskupovat související projekty v jednom okně VS Code. Pro monorepozitáře (například React Native + Backend) workspace otevře všechny složky s jejich nastaveními, rozšířeními a launch konfiguracemi. VS Code automaticky detekuje projects v workspace a zobrazí je v Explorer.

Flutter ve VS Code

Flutter extension pro VS Code poskytuje kompletní sadu nástrojů pro vývoj: vytvoření projektu (Ctrl+Shift+P → Flutter: New Project), hot reload (Hot Reload, Hot Restart), UI inspektor (Flutter Inspector), emulátor/zařízení (Flutter: Select Device), DevTools (widget strom, timeline, síť, paměť).

// lib/main.dart — Flutter aplikace s navigací
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 ve VS Code se spouští jako záložka v editoru nebo samostatné okno. DevTools zahrnuje Flutter Inspector (strom widgetů s layout overlay), Performance (FPS, frame build/rast), CPU Profiler (flutter/scheduler/gesture), Memory (heap snapshot, GC, allocations), Network (HTTP požadavky) a Logging (dart:developer log, stderr).

React Native ve VS Code

React Native Tools — oficiální rozšíření Microsoftu pro ladění React Native aplikací. Podporuje spouštění na Android emulátoru, iOS simulátoru a fyzických zařízeních, ladění JavaScriptu s breakpoints, inspektor prvků přes Flipper a integraci s Expo pro rychlý vývoj.

Nastavení React Native: rozšíření přidává příkazy React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug. Pro ladění Hermes se používá React Native Hermes Debugger. VS Code podporuje Flipper Integration — plugin Reactotron pro monitorování sítě, Redux/NgRx stavu, async storage, console.log.

// App.tsx — React Native komponent s navigací
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 — povinná kombinace pro TypeScript ve VS Code. ESLint kontroluje sémantiku kódu (no-unused-vars, @typescript-eslint/ban-ts-comment), Prettier formátuje odsazení, uvozovky, čárky. Konfigurace je uložena v .eslintrc.js a .prettierrc. VS Code automaticky spouští ESLint při uložení a zvýrazňuje chyby inline.

Ionic ve VS Code

Ionic — framework pro hybridní mobilní aplikace na Angular, React nebo Vue. VS Code poskytuje vestavěnou podporu TypeScript, Angular Language Service (pro .html šablony) a automatické dokončování pro Ionic komponenty přes rozšíření Ionic Snippets. Pro sestavení a publikaci se používá Capacitor (nástupce Cordovy).

Ionic CLI integrace ve VS Code: vestavěný terminál spouští ionic serve pro vývoj v prohlížeči, ionic build pro produkci a ionic cap sync pro synchronizaci s nativními platformami. Rozšíření Ionic Extension přidává panel s příkazy: Generate Page, Generate Component, Run on Android/iOS.

Capacitor Plugins — most mezi webovým kódem a nativním API. Hlavní pluginy: Camera, Geolocation, Push Notifications, File System, Storage. Každý plugin má jednotné JS API a nativní implementace pro Android (Java/Kotlin) a iOS (Swift). VS Code nabízí automatické dokončování pro Capacitor API přes TypeScript definitions.

Launch.json a ladění

launch.json — konfigurace ladicího nástroje VS Code ve složce .vscode/. Pro mobilní projekty launch.json definuje typ spuštění: Flutter (dart), React Native (reactnative), Ionic (chrome nebo edge pro ladění v prohlížeči). Každá konfigurace zahrnuje parametry: program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — konfigurace pro Flutter a 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}"
        }
    ]
}

Ladění více cílů ve VS Code — paralelní spouštění několika konfigurací (compounds). Například Flutter DevTools + Flutter App s automatickým otevřením Inspector. Pro React Native se používá Attach to Packager — nejprve se spustí Metro bundler, poté se ladicí nástroj připojí k již běžící aplikaci.

Remote development přes Dev Containers: VS Code se připojí k Docker kontejneru nebo WSL2 s předinstalovaným SDK (Flutter, Android, Node.js). Rozšíření Dev Containers (dříve Remote — Containers) spouští projekt v izolovaném prostředí s kompletní sadou nástrojů včetně emulátoru a ladicího nástroje.