VS Code: editor per Flutter, React Native e Ionic

Cos'è VS Code?

VS Code è un editor di codice sorgente rilasciato da Microsoft nel 2015. A differenza di Visual Studio, VS Code non è un IDE completo — è un editor leggero estendibile a livello di IDE tramite estensioni. Per lo sviluppo mobile, VS Code supporta Flutter (tramite l'estensione Dart Code), React Native (estensione React Native Tools) e Ionic (tramite il supporto integrato a TypeScript).

Secondo il Stack Overflow Developer Survey 2025, VS Code è utilizzato dal 74% di tutti gli sviluppatori, diventando l'editor più popolare al mondo. Per lo sviluppo mobile, è scelto dal 68% degli sviluppatori Flutter, dal 55% degli sviluppatori React Native e dal 71% degli sviluppatori Ionic. I motivi principali sono: velocità, estendibilità, Git integrato e terminale.

L'architettura di VS Code è costruita sul Language Server Protocol (LSP) per autocompletamento e diagnostica, sul Debug Adapter Protocol (DAP) per il debug e su estensioni in formato VSIX. L'editor funziona su Electron (Chromium + Node.js), consentendo l'uso di JavaScript/TypeScript per creare estensioni. VS Code è disponibile su Windows, macOS e Linux.

Configurare VS Code per lo sviluppo mobile

La configurazione di base di VS Code per lo sviluppo mobile include l'installazione di un pacchetto di estensioni per il framework specifico. Per Flutter, l'estensione Flutter è sufficiente (Dart si installa automaticamente). Per React Native — React Native Tools. Per Ionic/React Native con TypeScript — il supporto integrato funziona immediatamente, ma si consiglia di installare ESLint e Prettier.

// .vscode/settings.json — impostazioni per un progetto mobile
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Estensioni per lo sviluppo mobile: Flutter (Dart Code, oltre 50M di installazioni), React Native Tools (Microsoft, oltre 10M), Expo (per React Native Expo), Thunder Client (test API), GitLens (visualizzazione Git), Error Lens (errori in linea), Material Icon Theme (icone file). Si consiglia anche Code Runner per l'esecuzione rapida di script.

Configurazione dell'area di lavoro (.code-workspace) consente di raggruppare progetti correlati in un'unica finestra di VS Code. Per i monorepo (ad esempio, React Native + Backend), l'area di lavoro apre tutte le cartelle con le loro impostazioni, estensioni e configurazioni di avvio. VS Code rileva automaticamente i progetti nell'area di lavoro e li mostra in Explorer.

Flutter in VS Code

L'estensione Flutter per VS Code fornisce un set completo di strumenti di sviluppo: creazione di progetti (Ctrl+Shift+P → Flutter: New Project), ricarica rapida (Hot Reload, Hot Restart), ispettore UI (Flutter Inspector), emulatore/dispositivo (Flutter: Select Device), DevTools (albero dei widget, timeline, rete, memoria).

// lib/main.dart — applicazione Flutter con navigazione
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('Ciao da VS Code!'),
                    child: Text('Tocca qui'),
                ),
            ),
        );
    }
}

Dart DevTools in VS Code viene eseguito come scheda all'interno dell'editor o come finestra separata. DevTools include Flutter Inspector (albero dei widget con overlay di layout), Performance (FPS, build/rast dei frame), CPU Profiler (flutter/scheduler/gesture), Memoria (snapshot heap, GC, allocazioni), Rete (richieste HTTP) e Logging (dart:developer log, stderr).

React Native in VS Code

React Native Tools è l'estensione ufficiale di Microsoft per il debug di applicazioni React Native. Supporta l'esecuzione su emulatore Android, simulatore iOS e dispositivi fisici, debug JavaScript con breakpoints, ispezione degli elementi tramite Flipper e integrazione con Expo per lo sviluppo rapido.

Configurazione di React Native: l'estensione aggiunge comandi React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug. Il debug di Hermes utilizza React Native Hermes Debugger. VS Code supporta l'integrazione con Flipper — il plugin Reactotron per monitorare rete, stato Redux/NgRx, async storage, console.log.

// App.tsx — componente React Native con navigazione
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 è una combinazione obbligatoria per TypeScript in VS Code. ESLint verifica la semantica del codice (no-unused-vars, @typescript-eslint/ban-ts-comment), Prettier formatta indentazione, virgolette, virgole. La configurazione è salvata in .eslintrc.js e .prettierrc. VS Code esegue automaticamente ESLint al salvataggio ed evidenzia gli errori in linea.

Ionic in VS Code

Ionic è un framework per applicazioni mobili ibride che utilizza Angular, React o Vue. VS Code fornisce supporto integrato a TypeScript, Angular Language Service (per template .html) e autocompletamento per componenti Ionic tramite l'estensione Ionic Snippets. Capacitor (successore di Cordova) viene utilizzato per la creazione e la pubblicazione.

Integrazione Ionic CLI in VS Code: il terminale integrato esegue ionic serve per lo sviluppo nel browser, ionic build per la produzione e ionic cap sync per la sincronizzazione con le piattaforme native. L'estensione Ionic Extension aggiunge un pannello con comandi: Generate Page, Generate Component, Run on Android/iOS.

Plugin Capacitor — un ponte tra il codice web e le API native. Plugin principali: Camera, Geolocation, Push Notifications, File System, Storage. Ogni plugin ha un'API JS unificata e implementazioni native per Android (Java/Kotlin) e iOS (Swift). VS Code offre l'autocompletamento per l'API di Capacitor tramite definizioni TypeScript.

Launch.json e debug

launch.json — la configurazione del debugger di VS Code nella cartella .vscode/. Per progetti mobile, launch.json definisce il tipo di avvio: Flutter (dart), React Native (reactnative), Ionic (chrome o edge per debug nel browser). Ogni configurazione include parametri: program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — configurazioni per Flutter e 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}"
        }
    ]
}

Debug multi-target in VS Code — avvio parallelo di più configurazioni (compounds). Ad esempio, Flutter DevTools + Flutter App con apertura automatica di Inspector. Per React Native si usa Attach to Packager — prima viene avviato Metro bundler, poi il debugger si collega all'applicazione già in esecuzione.

Sviluppo remoto tramite Dev Containers: VS Code si connette a un container Docker o WSL2 con SDK preinstallato (Flutter, Android, Node.js). L'estensione Dev Containers (ex Remote — Containers) avvia il progetto in un ambiente isolato con un set completo di strumenti, inclusi emulatore e debugger.