VS Code: editor para Flutter, React Native e Ionic

¿Qué es VS Code?

VS Code es un editor de código fuente lanzado por Microsoft en 2015. A diferencia de Visual Studio, VS Code no es una IDE completa — es un editor ligero extensible a nivel de IDE mediante extensiones. Para desarrollo móvil, VS Code admite Flutter (a través de la extensión Dart Code), React Native (extensión React Native Tools) e Ionic (mediante soporte integrado de TypeScript).

Según la Encuesta a Desarrolladores de Stack Overflow 2025, VS Code es utilizado por el 74% de todos los desarrolladores, lo que lo convierte en el editor más popular del mundo. Para desarrollo móvil, lo eligen el 68% de los desarrolladores de Flutter, el 55% de los de React Native y el 71% de los de Ionic. Las principales razones son: velocidad, extensibilidad, Git integrado y terminal.

Arquitectura de VS Code está construida sobre el Protocolo de Servidor de Lenguaje (LSP) para autocompletado y diagnóstico, el Protocolo de Adaptador de Depuración (DAP) para depuración y extensiones en formato VSIX. El editor funciona sobre Electron (Chromium + Node.js), lo que permite usar JavaScript/TypeScript para crear extensiones. VS Code está disponible en Windows, macOS y Linux.

Configuración de VS Code para desarrollo móvil

La configuración básica de VS Code para desarrollo móvil incluye la instalación de un paquete de extensiones para el framework específico. Para Flutter, la extensión Flutter es suficiente (Dart se instala automáticamente). Para React Native — React Native Tools. Para Ionic/React Native con TypeScript — el soporte integrado funciona de inmediato, pero se recomienda instalar ESLint y Prettier.

// .vscode/settings.json — configuración para un proyecto móvil
{
    "dart.flutterSdkPath": "C:\\tools\\flutter",
    "dart.openDevTools": "flutter",
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "typescript"],
    "files.autoSave": "onFocusChange",
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Extensiones para desarrollo móvil: Flutter (Dart Code, más de 50M de instalaciones), React Native Tools (Microsoft, más de 10M), Expo (para React Native Expo), Thunder Client (pruebas de API), GitLens (visualización de Git), Error Lens (errores en línea), Material Icon Theme (iconos de archivos). También se recomienda Code Runner para ejecución rápida de scripts.

Configuración del espacio de trabajo (.code-workspace) permite agrupar proyectos relacionados en una sola ventana de VS Code. Para monorepositorios (por ejemplo, React Native + Backend), el espacio de trabajo abre todas las carpetas con sus configuraciones, extensiones y configuraciones de lanzamiento. VS Code detecta automáticamente los proyectos en el espacio de trabajo y los muestra en el Explorador.

Flutter en VS Code

La extensión Flutter para VS Code proporciona un conjunto completo de herramientas de desarrollo: creación de proyectos (Ctrl+Shift+P → Flutter: New Project), recarga en caliente (Hot Reload, Hot Restart), inspector de UI (Flutter Inspector), emulador/dispositivo (Flutter: Select Device), DevTools (árbol de widgets, línea de tiempo, red, memoria).

// lib/main.dart — aplicación Flutter con navegación
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('¡Hola desde VS Code!'),
                    child: Text('Toca aquí'),
                ),
            ),
        );
    }
}

Dart DevTools en VS Code se ejecuta como una pestaña dentro del editor o como una ventana separada. DevTools incluye Flutter Inspector (árbol de widgets con superposición de diseño), Rendimiento (FPS, compilación/rast de fotogramas), CPU Profiler (flutter/scheduler/gesture), Memoria (instantánea de heap, GC, asignaciones), Red (solicitudes HTTP) y Registro (dart:developer log, stderr).

React Native en VS Code

React Native Tools es la extensión oficial de Microsoft para depurar aplicaciones React Native. Admite ejecución en emulador de Android, simulador de iOS y dispositivos físicos, depuración de JavaScript con puntos de interrupción, inspección de elementos mediante Flipper e integración con Expo para desarrollo rápido.

Configuración de React Native: la extensión añade comandos React Native: Start Packager, Run Android, Run iOS, Attach to Packager, Debug. La depuración de Hermes usa React Native Hermes Debugger. VS Code admite la integración con Flipper — el plugin Reactotron para monitorear red, estado de Redux/NgRx, async storage, console.log.

// App.tsx — componente React Native con navegación
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 es una combinación obligatoria para TypeScript en VS Code. ESLint verifica la semántica del código (no-unused-vars, @typescript-eslint/ban-ts-comment), Prettier formatea sangrías, comillas, comas. La configuración se guarda en .eslintrc.js y .prettierrc. VS Code ejecuta automáticamente ESLint al guardar y resalta errores en línea.

Ionic en VS Code

Ionic es un framework para aplicaciones móviles híbridas que usa Angular, React o Vue. VS Code proporciona soporte integrado de TypeScript, Angular Language Service (para plantillas .html) y autocompletado para componentes Ionic a través de la extensión Ionic Snippets. Capacitor (sucesor de Cordova) se usa para compilar y publicar.

Integración de Ionic CLI en VS Code: la terminal integrada ejecuta ionic serve para desarrollo en navegador, ionic build para producción e ionic cap sync para sincronización con plataformas nativas. La extensión Ionic Extension añade un panel con comandos: Generate Page, Generate Component, Run on Android/iOS.

Plugins de Capacitor — un puente entre el código web y las API nativas. Plugins principales: Camera, Geolocation, Push Notifications, File System, Storage. Cada plugin tiene una API JS unificada e implementaciones nativas para Android (Java/Kotlin) e iOS (Swift). VS Code ofrece autocompletado para la API de Capacitor mediante definiciones de TypeScript.

Launch.json y depuración

launch.json — la configuración del depurador de VS Code en la carpeta .vscode/. Para proyectos móviles, launch.json define el tipo de lanzamiento: Flutter (dart), React Native (reactnative), Ionic (chrome o edge para depuración en navegador). Cada configuración incluye parámetros: program, args, cwd, env, platform, deviceId.

// .vscode/launch.json — configuraciones para Flutter y 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}"
        }
    ]
}

Depuración multiobjetivo en VS Code — lanzamiento paralelo de varias configuraciones (compounds). Por ejemplo, Flutter DevTools + Flutter App con apertura automática del Inspector. Para React Native se usa Attach to Packager — primero se inicia Metro bundler, luego el depurador se conecta a la aplicación ya en ejecución.

Desarrollo remoto mediante Dev Containers: VS Code se conecta a un contenedor Docker o WSL2 con SDK preinstalado (Flutter, Android, Node.js). La extensión Dev Containers (anteriormente Remote — Containers) lanza el proyecto en un entorno aislado con un conjunto completo de herramientas, incluyendo emulador y depurador.