VS Code: editor pentru Flutter, React Native și Ionic

Ce este VS Code?

VS Code — editor de cod sursă lansat de Microsoft în 2015. Spre deosebire de Visual Studio, VS Code nu este un IDE complet — este un editor ușor, extensibil la nivel de IDE prin extensii. Pentru dezvoltare mobilă, VS Code suportă Flutter (prin extensia Dart Code), React Native (extensia React Native Tools) și Ionic (prin suportul integrat TypeScript).

Conform Stack Overflow Developer Survey 2025, VS Code este folosit de 74% dintre toți dezvoltatorii, fiind cel mai popular editor din lume. Pentru dezvoltare mobilă, îl aleg 68% dintre dezvoltatorii Flutter, 55% dintre dezvoltatorii React Native și 71% dintre dezvoltatorii Ionic. Principalele motive: viteza de lucru, extensibilitatea, Git integrat și terminalul.

Arhitectura VS Code este construită pe Language Server Protocol (LSP) pentru completare automată și diagnosticare, Debug Adapter Protocol (DAP) pentru depanare și extensii în format VSIX. Editorul rulează pe Electron (Chromium + Node.js), permițând utilizarea JavaScript/TypeScript pentru crearea de extensii. VS Code este disponibil pe Windows, macOS și Linux.

Configurarea VS Code pentru dezvoltare mobilă

Configurarea de bază VS Code pentru dezvoltare mobilă include instalarea unui pachet de extensii pentru framework-ul specific. Pentru Flutter, extensia Flutter este suficientă (Dart se instalează automat). Pentru React Native — React Native Tools. Pentru Ionic/React Native cu TypeScript — suportul integrat funcționează imediat, dar se recomandă instalarea ESLint și Prettier.

// .vscode/settings.json — setări pentru proiectul mobil
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Extensii pentru dezvoltare mobilă: Flutter (Dart Code, 50M+ instalări), React Native Tools (Microsoft, 10M+), Expo (pentru React Native Expo), Thunder Client (testare API), GitLens (vizualizare Git), Error Lens (erori inline), Material Icon Theme (icoane fișiere). Se recomandă și instalarea Code Runner pentru rularea rapidă a scripturilor.

Configurarea Workspace (.code-workspace) permite gruparea proiectelor conexe într-o singură fereastră VS Code. Pentru monorepository-uri (de exemplu, React Native + Backend), workspace deschide toate folderele cu setările, extensiile și configurațiile lor de lansare. VS Code detectează automat proiectele în workspace și le afișează în Explorer.

Flutter în VS Code

Extensia Flutter pentru VS Code oferă un set complet de instrumente de dezvoltare: creare proiect (Ctrl+Shift+P → Flutter: New Project), reîncărcare la cald (Hot Reload, Hot Restart), inspector UI (Flutter Inspector), emulator/dispozitiv (Flutter: Select Device), DevTools (arbore widget, timeline, rețea, memorie).

// lib/main.dart — aplicație Flutter cu navigare
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 în VS Code se deschide ca filă în interiorul editorului sau ca fereastră separată. DevTools include Flutter Inspector (arbore widget cu layout overlay), Performance (FPS, frame build/rast), CPU Profiler (flutter/scheduler/gesture), Memory (heap snapshot, GC, alocări), Network (cereri HTTP) și Logging (dart:developer log, stderr).

React Native în VS Code

React Native Tools — extensia oficială Microsoft pentru depanarea aplicațiilor React Native. Suportă rularea pe emulator Android, simulator iOS și dispozitive fizice, depanare JavaScript cu breakpoints, inspecție elemente prin Flipper și integrare cu Expo pentru dezvoltare rapidă.

Configurarea React Native: extensia adaugă comenzile React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug. Pentru depanarea Hermes se folosește React Native Hermes Debugger. VS Code suportă Flipper Integration — pluginul Reactotron pentru monitorizarea rețelei, stării Redux/NgRx, async storage, console.log.

// App.tsx — componentă React Native cu navigare
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 — combinație obligatorie pentru TypeScript în VS Code. ESLint verifică semantica codului (no-unused-vars, @typescript-eslint/ban-ts-comment), Prettier formatează indentări, ghilimele, virgule. Configurarea se păstrează în .eslintrc.js și .prettierrc. VS Code rulează automat ESLint la salvare și evidențiază erorile inline.

Ionic în VS Code

Ionic — framework pentru aplicații mobile hibride în Angular, React sau Vue. VS Code oferă suport integrat TypeScript, Angular Language Service (pentru șabloane .html) și completare automată pentru componente Ionic prin extensia Ionic Snippets. Pentru compilare și publicare se folosește Capacitor (succesorul Cordova).

Integrarea Ionic CLI în VS Code: terminalul integrat rulează ionic serve pentru dezvoltare în browser, ionic build pentru producție și ionic cap sync pentru sincronizare cu platformele native. Extensia Ionic Extension adaugă un panou cu comenzi: Generate Page, Generate Component, Run on Android/iOS.

Capacitor Plugins — punte între codul web și API-ul nativ. Pluginurile principale: Camera, Geolocation, Push Notifications, File System, Storage. Fiecare plugin are un API JS unitar și implementări native pentru Android (Java/Kotlin) și iOS (Swift). VS Code oferă completare automată pentru API-ul Capacitor prin definiții TypeScript.

Launch.json și depanare

launch.json — configurația debuggerului VS Code în folderul .vscode/. Pentru proiecte mobile, launch.json definește tipul de lansare: Flutter (dart), React Native (reactnative), Ionic (chrome sau edge pentru depanare în browser). Fiecare configurație include parametrii: program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — configurații pentru 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}"
        }
    ]
}

Depanare Multi-target în VS Code — rularea paralelă a mai multor configurații (compounds). De exemplu, Flutter DevTools + Flutter App cu deschiderea automată a Inspector. Pentru React Native se folosește Attach to Packager — mai întâi se pornește Metro bundler, apoi debuggerul se atașează la aplicația deja în execuție.

Dezvoltare remote prin Dev Containers: VS Code se conectează la un container Docker sau WSL2 cu SDK preinstalat (Flutter, Android, Node.js). Extensia Dev Containers (fost Remote — Containers) rulează proiectul într-un mediu izolat cu toate instrumentele, inclusiv emulator și debugger.