VS Code: szerkesztő Flutter, React Native és Ionic keretrendszerekhez

Mi az a VS Code?

VS Code — forráskód-szerkesztő, amelyet a Microsoft 2015-ben adott ki. A Visual Studio-tól eltérően a VS Code nem egy teljes IDE — ez egy könnyű szerkesztő, amely bővítményekkel IDE szintre bővíthető. Mobilfejlesztéshez a VS Code támogatja a Flutter (Dart Code bővítményen keresztül), React Native (React Native Tools bővítmény) és Ionic (beépített TypeScript támogatáson keresztül) keretrendszereket.

A Stack Overflow Developer Survey 2025 szerint a VS Code-ot a fejlesztők 74%-a használja, ami a világ legnépszerűbb szerkesztőjévé teszi. Mobilfejlesztéshez a Flutter-fejlesztők 68%-a, a React Native-fejlesztők 55%-a és az Ionic-fejlesztők 71%-a választja. Fő okok: munkasebesség, bővíthetőség, beépített Git és terminál.

A VS Code architektúrája a Language Server Protocol (LSP) alapokra épül az automatikus kiegészítéshez és diagnosztikához, Debug Adapter Protocol (DAP) a hibakereséshez és VSIX formátumú bővítményekhez. A szerkesztő Electron (Chromium + Node.js) alatt fut, ami lehetővé teszi JavaScript/TypeScript használatát bővítmények létrehozásához. A VS Code Windows, macOS és Linux rendszereken érhető el.

VS Code beállítása mobilfejlesztéshez

A mobilfejlesztéshez szükséges alap VS Code beállítás magában foglalja az adott keretrendszerhez tartozó bővítménycsomag telepítését. Flutter esetén a Flutter bővítmény elegendő (a Dart automatikusan települ). React Native esetén — React Native Tools. Ionic/React Native TypeScript esetén a beépített támogatás azonnal működik, de az ESLint és Prettier telepítése ajánlott.

// .vscode/settings.json — beállítások mobil projekthez
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Bővítmények mobilfejlesztéshez: Flutter (Dart Code, 50M+ telepítés), React Native Tools (Microsoft, 10M+), Expo (React Native Expo-hoz), Thunder Client (API tesztelés), GitLens (Git vizualizáció), Error Lens (inline hibák), Material Icon Theme (fájlikonok). Ajánlott a Code Runner telepítése is szkriptek gyors futtatásához.

Workspace konfiguráció (.code-workspace) lehetővé teszi kapcsolódó projektek csoportosítását egy VS Code ablakban. Monorepository-okhoz (pl. React Native + Backend) a workspace megnyitja az összes mappát azok beállításaival, bővítményeivel és launch konfigurációival. A VS Code automatikusan észleli a projekteket a workspace-ben és megjeleníti az Explorer-ben.

Flutter a VS Code-ban

Flutter bővítmény a VS Code-hoz teljes fejlesztőeszköz-készletet biztosít: projekt létrehozása (Ctrl+Shift+P → Flutter: New Project), gyors újratöltés (Hot Reload, Hot Restart), UI vizsgáló (Flutter Inspector), emulátor/eszköz (Flutter: Select Device), DevTools (widgetfa, timeline, hálózat, memória).

// lib/main.dart — Flutter alkalmazás navigációval
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 a VS Code-ban lapfülként nyílik meg a szerkesztőn belül vagy külön ablakban. A DevTools tartalmazza a Flutter Inspector (widgetfa elrendezés átfedéssel), Performance (FPS, frame build/rast), CPU Profiler (flutter/scheduler/gesture), Memory (heap snapshot, GC, foglalások), Network (HTTP kérések) és Logging (dart:developer log, stderr) modulokat.

React Native a VS Code-ban

React Native Tools — a Microsoft hivatalos bővítménye React Native alkalmazások hibakereséséhez. Támogatja az Android emulátoron, iOS szimulátoron és fizikai eszközökön történő futtatást, JavaScript hibakeresést töréspontokkal, elemek vizsgálatát Flipperen keresztül és integrációt az Expo-val gyors fejlesztéshez.

React Native beállítás: a bővítmény hozzáadja a React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug parancsokat. Hermes hibakereséshez a React Native Hermes Debugger használatos. A VS Code támogatja a Flipper Integration-t — Reactotron bővítményt a hálózat, Redux/NgRx állapot, async storage, console.log figyeléséhez.

// App.tsx — React Native komponens navigációval
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 — kötelező kombináció TypeScript-hez a VS Code-ban. Az ESLint ellenőrzi a kód szemantikáját (no-unused-vars, @typescript-eslint/ban-ts-comment), a Prettier formázza a behúzásokat, idézőjeleket, vesszőket. A konfiguráció .eslintrc.js és .prettierrc fájlokban tárolódik. A VS Code automatikusan futtatja az ESLint-et mentéskor és kiemeli a hibákat inline.

Ionic a VS Code-ban

Ionic — keretrendszer hibrid mobilalkalmazásokhoz Angular, React vagy Vue alapokon. A VS Code beépített TypeScript támogatást, Angular Language Service-t (.html sablonokhoz) és automatikus kiegészítést biztosít Ionic komponensekhez az Ionic Snippets bővítményen keresztül. Az építéshez és publikáláshoz a Capacitor (a Cordova utódja) használatos.

Ionic CLI integráció a VS Code-ban: a beépített terminál futtatja az ionic serve-t böngészőben történő fejlesztéshez, az ionic build-et éles verzióhoz és az ionic cap sync-et natív platformokkal való szinkronizáláshoz. Az Ionic Extension bővítmény egy panelt ad hozzá parancsokkal: Generate Page, Generate Component, Run on Android/iOS.

Capacitor Plugins — híd a webkód és a natív API között. Főbb bővítmények: Camera, Geolocation, Push Notifications, File System, Storage. Minden bővítmény egységes JS API-val és natív megvalósításokkal rendelkezik Android (Java/Kotlin) és iOS (Swift) rendszerekhez. A VS Code automatikus kiegészítést kínál a Capacitor API-hoz TypeScript definíciókon keresztül.

Launch.json és hibakeresés

launch.json — a VS Code hibakereső konfigurációja a .vscode/ mappában. Mobil projektekhez a launch.json meghatározza az indítás típusát: Flutter (dart), React Native (reactnative), Ionic (chrome vagy edge hibakereséshez a böngészőben). Minden konfiguráció tartalmazza a paramétereket: program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — konfigurációk Flutter és React Native számára
{
    "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 hibakeresés a VS Code-ban — több konfiguráció párhuzamos futtatása (compounds). Például Flutter DevTools + Flutter App az Inspector automatikus megnyitásával. React Native esetén az Attach to Packager használatos — először a Metro bundler indul el, majd a hibakereső csatlakozik a már futó alkalmazáshoz.

Remote development Dev Containers-en keresztül: a VS Code csatlakozik egy Docker konténerhez vagy WSL2-höz előre telepített SDK-val (Flutter, Android, Node.js). A Dev Containers bővítmény (korábban Remote — Containers) a projektet izolált környezetben futtatja teljes eszközkészlettel, beleértve az emulátort és a hibakeresőt.